Flutter Hero 小部件未按预期工作

Question

我正在尝试使用 Hero animation 将小部件从一个屏幕传递到另一个屏幕。 我正在关注 flutter.dev 页面上的简单示例，但它似乎不起作用。

我有两个屏幕，ScreenOne 和 ScreenTwo，都是 StatefulWidget。 ScreenOne 包含一个小部件列表，点击时我应该导航到 ScreenTwo 并使用 Hero animation。

这是用于导航到 ScreenTwo 和 hero 小部件的 ScreenOne 部分代码

 Material(
        child: SizedBox(
          width: double.infinity,
          child: InkWell(
            onTap: () {
              Navigator.push(context, MaterialPageRoute(builder: (_) {
                return ScreenTwo(
                  imageUrl : "anUrl",
                );
              }));

            child: Padding(
              padding: EdgeInsets.all(10),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                  Hero(
                    tag: "imageHero",
                    child: Image(
                      width: 60,
                      height: 60,
                      image:
                          Image.network("anUrl").image,
                    ),
                  ),
                  // Other widgets

这是在 ScreenTwo 上

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(),
  body: Container(
    child: Hero(
      tag: "imageHero",
      child: Image(
        width: 60,
        height: 60,
        image: Image.network("anUrl").image,
      ),
    ),
  ),
);

}

现在，当我导航到 ScreenTwo 时，我没有看到 Hero animation。 怎么了？

Answer 1

使标签字段成为变量并将其用于两者，例如

int imageId = 1;

 Hero(
                tag: imageId,
                child: Image(
                  width: 60,
                  height: 60,
                  image:
                      Image.network("anUrl").image,
                ),

并将其用于两条路线