对SliverList中的更改进行动画处理 [英] Animating changes in a SliverList

问题描述

我目前有一个SliverList，其项目是动态加载的.问题在于，一旦加载了这些项目，SliverList就会更新而不会显示更改的动画效果，从而在加载和加载之间进行过渡.加载了非常震颤.

I currently have a SliverList whose items are loaded dynamically. The issue is that once these items are loaded, the SliverList updates without animating the changes, making the transition between loading & loaded very jarring.

我看到AnimatedList存在，但它不是条子，所以我不能将其直接放在CustomScrollView中.

I see that AnimatedList exists but it isn't a sliver so I can't place it directly in a CustomScrollView.

推荐答案

您现在可能已经知道了这一点，但也可以在这里提及它以帮助人们.

You probably know about this now, but might as well mention it here to help people.

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

You can use SliverAnimatedList. It achieves the required result.

SliverAnimatedList构造:

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

itemBuilder defines the way new items are built. The builder should typically return a Transition widget, or any widget that would use the animation parameter.

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

动态添加/删除

您可以通过使用SliverAnimatedListState的insertItem和removeItem方法来执行此操作.您可以通过以下任一方式访问状态:

You do that by using insertItem and removeItem methods of SliverAnimatedListState. You access the state by either:

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

1. providing a Key to the SliverAnimatedList and use key.currentState
2. using SliverAnimatedList.of(context) static method.

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

In cases where you need to make changes from outside of the list, you're always going to need to use the key.

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

Here's a full example to clarify things. Items are added by tapping the FloatingActionButton and are removed by tapping the item itself. I used both the key and of(context) ways to access the 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,
            )));
  }
}

这篇关于对SliverList中的更改进行动画处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！