Question

我目前有一个SliverList，其项目是动态加载的。问题是，一旦加载了这些项目，SliverList就会在没有设置动画动画的情况下进行更新，从而在加载和加载之间进行转换。加载非常震撼。

我发现AnimatedList存在，但它不是条子，因此我无法将其直接放在CustomScrollView中。

Answer 1

您现在可能已经知道了这一点，但也可以在此处提及以帮助人们。

您可以使用SliverAnimatedList。它达到了所需的结果。

SliverAnimatedList构造：

itemBuilder定义了构建新项目的方式。构建器通常应返回Transition小部件，或将使用animation参数的任何小部件。

SliverAnimatedList(
     key: someKey,
     initialItemCount: itemCount,
     itemBuilder: (context, index, animation) => SizeTransition(
              sizeFactor: animation,
              child: SomeWidget()
     )
)

动态添加/删除

您可以通过使用insertItem的{{1}}和removeItem方法来做到这一点。您可以通过以下任一方式访问状态：

向SliverAnimatedListState提供Key并使用SliverAnimatedList
使用key.currentState静态方法。

在需要从列表外部进行更改的情况下，总是需要使用密钥。

这里是一个完整的例子来说明问题。通过点击SliverAnimatedList.of(context)可以添加项目，而通过点击项目本身可以将其删除。我同时使用FloatingActionButton和key的方式来访问of(context)。

SliverAnimatedListState

Answer 2

我有一个解决方法，可以将简单的ListView与Sliver一起使用。它并不完美，并且有局限性，但是它适用于您只有两个Sliver，AppBar和SliverList的情况。

NestedScrollView(
  headerSliverBuilder: (_, _a) => SliverAppBar(<Insert Code Here>),
  body: MediaQuery.removePadding(
    removeTop: true, 
    context: context, 
    child: AnimatedList(
      <InsertCodeHere>
    )))

您可以调整Widget树，但这是基本思想。将条形应用程序条包装在NestedScrollView中，然后将列表放置在正文中。

Answer 3

您可以将列表项包装在AnimatedWidget中

在文档AnimatedWidget

中进行了解

Answer 4

您可以使用Implicitly Animated Reorderable List

const r = iterate(data, e=>'converted_'+e);
console.log(r);

动画SliverList中的更改

4 个答案: