dart - 防止滚动的英雄跳到应用栏顶部

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,
    ),

这是它的样子: