Flutter 共享元素英雄动画不适用于自定义 ModalRoute

Question

为了在 flutter 中获得类似模态的效果(当页面被推到当前页面的顶部时，背景为黑色并且足够透明，以便您可以在背景中看到后面的页面)。

我正在使用 ModalRoute 类在我当前页面的顶部显示一个覆盖小部件。

我的问题是:当我的 TestOverlay 页面进入时，只显示 fadeIn 动画而不显示 Shared Element Hero 动画。

后面的页面有一个 Hero(tag: "111", child: Text("Test")) 小部件，当我调用 Navigator.of(context).push(TestOverlay ()); 只有 FadeIn 是动画的，共享元素转换不起作用.. :(

谁知道为什么？

谢谢!!

class TestOverlay extends ModalRoute<void> {
  TestOverlay();

  @override
  Duration get transitionDuration => Duration(milliseconds: 400);

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => false;

  @override
  Color get barrierColor => Colors.black.withOpacity(0.7);

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Widget buildPage(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      ) {
    // This makes sure that text and other content follows the material style
    return Material(
      type: MaterialType.transparency,
      // make sure that the overlay content is not cut off
      child: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        behavior: HitTestBehavior.opaque,
        child: SafeArea(
          child: _buildOverlayContent(context),
        ),
      ),
    );
  }

  Widget _buildOverlayContent(BuildContext context) {
    return Center(
      child: Hero(tag: "111", Text("Test"))
    );
  }

  @override
  Widget buildTransitions(
      BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    // You can add your own animations for the overlay content
    return FadeTransition(
      opacity: animation,
      child: ScaleTransition(
        scale: animation,
        child: child,
      ),
    );
  }
}

Answer 1

改用PageRoute:

class TestOverlay extends PageRoute<void> {
  TestOverlay({
    @required this.builder,
    RouteSettings settings,
  })  : assert(builder != null),
        super(settings: settings);

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  Color get barrierColor => null;

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 350);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    final result = builder(context);
    return FadeTransition(
      opacity: Tween<double>(begin: 0, end: 1).animate(animation),
      child: result,
    );
  }
}