从一个屏幕切换到另一个屏幕时，如何在 NetworkImage 上显示英雄动画？答案

【问题标题】：How to show Hero Animation on a NetworkImage while switching from one screen to another?从一个屏幕切换到另一个屏幕时，如何在 NetworkImage 上显示英雄动画？
【发布时间】：2020-02-13 12:09:50
【问题描述】：

在我的颤振项目中，我在一个屏幕中显示了来自 API 调用的一些数据列表（包括图像）。在该列表中，我用 Hero 包装了 NetworkImage，并将 productId 添加为标签。

这是代码-

            Expanded(
              child: Hero(
                tag: '${snapshot.data[position].products[index].id}',
                child: FadeInImage(
                  width: 130.0,
                  height: 186.0,
                  placeholder: AssetImage('assets/placeholder.jpg'),
                  image:     
                NetworkImage(snapshot.data[position].products[index].image),
                ),
              ),
            ),

切换到下一个屏幕时，我传递了从 API 获得的整个对象，该对象遵循以下代码-

Navigator.of(context)
    .push(MaterialPageRoute(
        builder: (context) => ProductDetailsScreen(
            snapshot.data[position].products[index])));

现在，在下一个屏幕中（我已经传递了整个对象产品），我用 Hero 包装了我的 NetworkImage 并使用 products.id 作为标签。

这是代码-

 Padding(
          padding: EdgeInsets.only(top: ScreenUtil.instance.setHeight(15)),
          child: Hero(
            tag: '${products.id}',
            child: FadeInImage(
              height: ScreenUtil.instance.setHeight(330),
              fit: BoxFit.fill,
              placeholder: AssetImage('assets/placeholder.jpg'),
              image: NetworkImage(
                "${products.image}",
              ),
            ),
          ),
        ),

现在问题是 ------

运行项目后，当我按下列表中的一项（NetworkImage 包括）时，它在下一个屏幕中显示为黑色，并在控制台中显示以下错误-

我遵循某些文档中描述的相同方式，动画的每个项目都应该具有相同的标签名称，但在我的情况下它不起作用。显示-

在一个子树中有多个英雄共享同一个标签。

所以，我需要一个解决方案来解决这个问题。

【问题讨论】：

你在任何一个页面上都有两次相同的英雄吗？
是的，我在两个不同的职业中拥有相同标签的同一个英雄。
我认为更多代码将有助于诊断潜在问题。即您如何构建初始产品小部件及其包含的内容。UUID 失败（假设您为每个产品创建了一个 ID）意味着可能在某处构建了重复的小部件。
帮我一个忙，删除下一个屏幕上的英雄标签。它是否按预期工作？
让我们continue this discussion in chat。

标签： flutter dart

【解决方案1】：

将网络图像文件保存到文件变量中，然后将其传递给抛出页面（你可以使用文件路径作为英雄的标签并使用文件）

从你的数据库中检索数据保存到 URL 变量在我的情况下它只是“字符串 url”（我从另一个小部件获取它，所以我使用了 widget.url）

从第一个屏幕

Hero(
  tag: 'anything' + widget.url,
                          child: CircleAvatar(
                            backgroundImage: widget.url!= null
                                ? ExtendedNetworkImageProvider(
                                    widget.url,
                                  )
                                : null,
                            radius: 23,
                          ),

Navigator.of(context).push(TransparentRoute(
                        builder: (BuildContext context) => SecondScreen(
                              image: widget.url,
                            )));

（图片的URL是唯一的，所以我们可以用它作为英雄的标签）

第二屏

class SecondScreen extends StatefulWidget {

  final image;

  
  SecondScreen(
      {this.image});
  @override
  _SecondScreenState createState() => _SecondScreenState();
}



    Hero(
      tag: 'anything' + widget.image,
                              child: CircleAvatar(
                                backgroundImage: widget.image!= null
                                    ? ExtendedNetworkImageProvider(
                                        widget.image
                                      )
                                    : null,
                                radius: 23,
                              ),

【讨论】：