flutter - SliverList 中的动画变化

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

动态添加/删除

您可以通过使用 SliverAnimatedListState 的 insertItem 和 removeItem 方法来做到这一点。您可以通过以下任一方式访问该状态:

1. 为 SliverAnimatedList 提供一个 Key 并使用 key.currentState
2. 使用 SliverAnimatedList.of(context) 静态方法。

如果您需要从列表之外进行更改，您总是需要使用 key 。

这里有一个完整的例子来说明问题。通过点击 FloatingActionButton 可以添加项目，并通过点击项目本身来移除项目。我同时使用了 key 和 of(context) 方法来访问 SliverAnimatedListState。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SliverAnimatedListTest extends StatefulWidget {
  @override
  _SliverAnimatedListTestState createState() => _SliverAnimatedListTestState();
}

class _SliverAnimatedListTestState extends State<SliverAnimatedListTest> {
  int itemCount = 2;

  // The key to be used when accessing SliverAnimatedListState
  final GlobalKey<SliverAnimatedListState> _listKey =
      GlobalKey<SliverAnimatedListState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Sliver Animated List Test")),

      // fab will handle inserting a new item at the last index of the list.
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () {
          _listKey.currentState.insertItem(itemCount);
          itemCount++;
        },
      ),


      body: CustomScrollView(
        slivers: <Widget>[
          SliverAnimatedList(
              key: _listKey,
              initialItemCount: itemCount,

              // Return a widget that is wrapped with a transition
              itemBuilder: (context, index, animation) => 
                 SizeTransition(
                    sizeFactor: animation,
                    child: SomeWidget(
                        index: index,

                        // Handle removing an item using of(context) static method.
                        // Returned widget should also utilize the [animation] param
                        onPressed: () {
                          SliverAnimatedList.of(context).removeItem(
                              index,
                              (context, animation) => SizeTransition(
                                  sizeFactor: animation,
                                  child: SomeWidget(
                                    index: index,
                                  )));

                          itemCount--;
                        }),
                  ))
        ],
      ),
    );
  }
}

class SomeWidget extends StatelessWidget {
  final int index;

  final Function() onPressed;

  const SomeWidget({Key key, this.index, this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(20.0),
        child: Center(
            child: FlatButton(
              child: Text("item $index"), 
              onPressed: onPressed,
            )));
  }
}