Flutter：在 ListView Builder 中使用英雄动画

Question

我正在构建列表（ListView.builder）和详细信息屏幕。Hero用于在选择小部件时为某些部分设置动画（使用pushReplacement）。

我注意到当我从详细信息屏幕移动到列表屏幕时，如果所选小部件是ListView的结束/尾部/最后一个小部件，则动画将不会运行。

因为ListView.builder只渲染第一个/头部可见元素，我认为Hero不知道小部件的位置。

那么，我该如何解决这个问题呢？这不是那么重要，但它困扰了我好几天。

Answer 1

Hero 小部件通过其标签标识要制作动画的元素。标签属性必须是唯一的，才能使这项工作发挥作用。所以你可以做的是：

1. 使每个英雄的标签独一无二。喜欢，

   ListView.builder
   (
      itemCount: litems.length,
      itemBuilder: (BuildContext context, int index) {
      return Hero(
                   tag: "some_name"+index.toString(),
                   child: SomeChild();
                 );
      }
   )
   

2. 单击时将索引传递到详细屏幕。喜欢，

   Navigator.push(context,
                  MaterialPageRoute(
                  builder: (BuildContext context) => DetailedScreen(index)
                  )
   );
   

3. 在详细屏幕上，使用收到的索引创建标签。喜欢，

   tag: "some_name"+index.toString()

希望它会帮助你。

Answer 2

你需要的是为每个列表构建器元素提供唯一的标签

Hero(
       tag: snapshot.data.documents[index]['category'],
       child: // your child ,
    ),