Flutter Hero 小部件未按预期工作

Posted 2023-02-23

【中文标题】Flutter Hero 小部件未按预期工作

【英文标题】：Flutter Hero widget not working as expected

【发布时间】：2021-07-10 13:24:55

【问题描述】：

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

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

这是用于导航到 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 动画。怎么了？

【问题讨论】：

您可以尝试使用 Navigator.of(context).push(...) 而不是 Navigator.push(...) 进行导航吗？ github.com/flutter/website/blob/master/examples/_animation/…

它不起作用。

您是否尝试使用 StatelessWidget 而不是 StatfulWidget ？

【参考方案1】：

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

int imageId = 1;

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

并将其用于两条路线