带有 AlertDialog 的英雄动画

Question

我想在我的主屏幕上实现一个图像的英雄动画，同时在对话框的内容中呈现一个具有相同图像的 AlertDialog 小部件。

我希望演示文稿显示在下面的屏幕截图中。当我点击左下角的图像时，我想要英雄动画和图像的插入预览以及可以点击以关闭的透明叠加层。

以下代码不执行英雄动画。

class AlertDialogTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Material(
      child: new InkWell(
        child: new Hero(
          tag: "preview",
          child: new Container(
            alignment: FractionalOffset.bottomLeft,
            child: new Image(
              image: new AssetImage('assets/images/theater.png'),
            ),
          ),
        ),
        onTap: () {
          showDialog(
            context: context,
            child: new AlertDialog(
              content: new Hero(
                tag: "preview",
                child: new Image(
                  image: new AssetImage('assets/images/theater.png'),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

Answer 1

Hero 转换仅对 PageRoute 的两个实例之间的转换启用。所以如果你想利用现有的 Hero 系统，你应该使用 PageRoute.

您可以尝试全屏对话框，而不是推送 AlertDialog：

Navigator.push(context, new MaterialPageRoute(
  fullscreenDialog: true,
  builder: (BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Dialog'),
      ),
      body: new Hero(
        tag: "preview",
        child: new Image(
          image: new AssetImage('assets/images/theater.png'),
        ),
      ),
    );
  }
));

如果你想要一个半透明的屏障，你可以扩展PageRoute并使它更像对话框。

下面是一些实现上述动画的代码。

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new HomePage(),
  ));
}

class HeroDialogRoute<T> extends PageRoute<T> {
  HeroDialogRoute({ this.builder }) : super();

  final WidgetBuilder builder;

  @override
  bool get opaque => false;

  @override
  bool get barrierDismissible => true;

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

  @override
  bool get maintainState => true;

  @override
  Color get barrierColor => Colors.black54;

  @override
  Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
    return new FadeTransition(
      opacity: new CurvedAnimation(
        parent: animation,
        curve: Curves.easeOut
      ),
      child: child
    );
  }

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
    Animation<double> secondaryAnimation) {
    return builder(context);
  }

}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Hero demo'),
      ),
      body: new Align(
        alignment: FractionalOffset.center,
        child: new Card(
          child: new Hero(
            tag: 'developer-hero',
            child: new Container(
              width: 300.0,
              height: 300.0,
              child: new FlutterLogo(),
            ),
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        child: new Icon(Icons.developer_mode),
        onPressed: () {
          Navigator.push(
            context,
            new HeroDialogRoute(
              builder: (BuildContext context) {
                return new Center(
                  child: new AlertDialog(
                    title: new Text('You are my hero.'),
                    content: new Container(
                      child: new Hero(
                        tag: 'developer-hero',
                        child: new Container(
                          height: 200.0,
                          width: 200.0,
                          child: new FlutterLogo(),
                        ),
                      ),
                    ),
                    actions: <Widget>[
                      new FlatButton(
                        child: new Text('RAD!'),
                        onPressed: Navigator
                          .of(context)
                          .pop,
                      ),
                    ],
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

根据对话框的大小和英雄所在的位置，一旦第二个 Hero 完成动画到位，您可能会看到原始的 Hero 重新出现在对话框下方。如果这让您感到困扰，您可以堆叠两个图像副本，只有最上面的一个是 Hero，或者您可以触发一个动画来隐藏原始 Hero（也许使用 AnimatedCrossFade）直到对话框关闭。

另一种选择是您可以自己实现动画，而不是使用现有的 Hero 系统。您可能想阅读 animations documentation and possibly copy bits and pieces of heroes.dart.

Answer 2

你可以使用 PageRouteBuilder。

将您的 onTap() 代码替换为以下代码

Navigator.of(context).push(
    new PageRouteBuilder(
        opaque: false,
        barrierDismissible:true,
        pageBuilder: (BuildContext context, _, __) {
            return Container(
                child: Hero(
                    tag: "preview",
                    child: new Image(
                        image: new AssetImage('assets/images/theater.png'),
                    ),
                ),
            );
        }
    )
)

Demo这里是示例代码。

带有 AlertDialog 的英雄动画

Hero animation with an AlertDialog

dart

flutter