防止滾動的英雄在應用程序欄上跳躍

Question

我有一個Hero可以滾動，因此它的一部分不在屏幕上。當我觸發一個轉換時，它會突然跳到AppBar之上，然後在轉換完成時跳轉回去。我如何強制AppBar停留在Hero之上？

import 'package:flutter/material.dart'; 

void main() { 
    runApp(new MaterialApp(
    home: new Example(), 
    theme: new ThemeData(primaryColor: Colors.orange), 
    debugShowCheckedModeBanner: false, 
)); 
} 

Widget positionHeroOverlay(BuildContext context, Widget overlay, Rect rect, Size size) { 
    final RelativeRect offsets = new RelativeRect.fromSize(rect, size); 
    return new Positioned(
    top: offsets.top, 
    right: offsets.right, 
    bottom: offsets.bottom, 
    left: offsets.left, 
    child: overlay, 
); 
} 

class LogoPageRoute extends MaterialPageRoute<Null> { 
    LogoPageRoute(this.colors) : super(
    builder: (BuildContext context) { 
     return new Scaffold(
     appBar: new AppBar(
      title: new Text('Flutter Logo'), 
     ), 
     body: new ConstrainedBox(
      constraints: new BoxConstraints.expand(), 
      child: new Hero(
      tag: colors, 
      child: new FlutterLogo(colors: colors), 
     ), 
     ), 
    ); 
    }, 
); 

    /// The color of logo to display 
    final MaterialColor colors; 

    @override 
    final Duration transitionDuration = const Duration(seconds: 1); 
} 

final List<MaterialColor> swatches = [ 
    Colors.blue, 
    Colors.orange, 
    Colors.green, 
]; 

class Example extends StatelessWidget { 
    @override 
    Widget build(BuildContext context) { 
    return new Scaffold(
     appBar: new AppBar(
     title: new Text('All Logos'), 
    ), 
     body: new ListView(
     children: swatches.map((MaterialColor colors) { 
      return new InkWell(
      onTap:() { 
       Navigator.push(context, new LogoPageRoute(colors)); 
      }, 
      child: new Hero(
       tag: colors, 
       child: new FlutterLogo(size: 360.0, colors: colors), 
      ), 
     ); 
     }).toList(), 
    ), 
    ); 
    } 
} 

Answer 1

包裝你AppBar在Hero迫使它留在上面。

appBar: new PreferredSize(
    child: new Hero(
     tag: AppBar, 
     child: new AppBar(
     title: new Text('All Logos'), 
    ), 
    ), 
    preferredSize: new AppBar().preferredSize, 
), 

在詳細資料頁的AppBar，我會建議迫使後退按鈕顯示，使其出現在同一時間，頁面標題的變化。

appBar: new PreferredSize(
     child: new Hero(
     tag: AppBar, 
     child: new AppBar(
      leading: const BackButton(), 
      title: new Text('Flutter Logo'), 
     ), 
    ), 
     preferredSize: new AppBar().preferredSize, 
    ), 

這裏是什麼樣子：