android - Flutter:在 ListView Builder 中使用英雄动画

Question

我正在构建List (ListView.builder) 和Detail 屏幕。 Hero 用于在选择小部件时为某些部分设置动画(使用 pushedReplacement)。

我注意到，当我从 Detail 屏幕移动到 List 屏幕时，如果所选的小部件是 end/tail/last 小部件ListView，则动画不会运行。

因为 ListView.builder 只渲染 first/head 可视元素，我认为 Hero 不知道小部件的位置。

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

Answer 1

Hero 小部件通过其标签标识要设置动画的元素。 tag 属性必须是唯一的才能使其工作。所以你可以做的是:

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. 在详细屏幕上使用收到的索引创建标签。喜欢，

   标签:"some_name"+index.toString()

希望对你有所帮助。