Question

在我的flutter项目中，在一个屏幕中，我显示了API调用的一些数据列表（包括图像）。在该列表中，我已将 NetworkImage 和 Hero 包装在一起，并添加了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 作为标签。 / p>

这是代码-

 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包含该项目）时，它在下一个屏幕中显示黑色，并在控制台中显示以下错误-

我遵循某些文档中描述的相同方法，每个动画项目应具有相同的标签名称，但就我而言，它不起作用。显示那个-

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

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

Answer 1

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

从你的数据库中检索数据保存到 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,
                            )));

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

第二屏

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,
                              ),

从一个屏幕切换到另一个屏幕时，如何在NetworkImage上显示Hero Animation？

1 个答案: