Flutter：在 ListView Builder 中使用 Hero 动画

Posted 2023-02-23

【中文标题】Flutter：在 ListView Builder 中使用 Hero 动画

【英文标题】：Flutter: Using Hero Animation with ListView Builder

【发布时间】：2019-12-16 20:00:05

【问题描述】：

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

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

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

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

【问题讨论】：

您好，您解决了吗？我可以使用一个解决方案，我有一个类似的问题。

【参考方案1】：

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

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

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

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

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

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

tag: "some_name"+index.toString()

希望对你有帮助。

【讨论】：

是的。我已经这样做了。但是当 listview.builder 很长时（因此屏幕会隐藏列表的其余部分），英雄动画将仅适用于前面的小部件

前面的小部件是什么意思？可见的小部件？

【参考方案2】：

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

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