列表是移动应用中用得最多的组件了，我们也会经常对列表元素进行增加或删除操作，最简单的方法是列表数据变动后，直接 setState 更新列表界面。这种方式存在一个缺陷就是列表元素会突然消失（删除）或出现（添加），当列表元素内容接近时，我们都没法知道操作是否成功了。而如果能够有动效展示这个消失和出现的过程，那么体验就会好很多，比如下面的这种效果，删除元素的时候，会有个逐渐消失的动画，而添加元素的时候会有渐现效果。
AnimatedList.gif
这里使用到的就是 AnimatedList，本篇文章的示例代码主要来自官方文档:AnimatedList 组件。需要注意的是，毕竟列表带了动画效果，对性能肯定会有影响，建议只对需要对元素进行删除、增加操作的小数据量的列表使用。
AnimatedList 介绍
AnimatedList 是 ListView 的替代，构造函数基本上和 ListView 一致。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const AnimatedList({ Key? key, required this.itemBuilder, this.initialItemCount = 0, this.scrollDirection = Axis.vertical, this.reverse = false, this.controller, this.primary, this.physics, this.shrinkWrap = false, this.padding, this.clipBehavior = Clip.hardEdge, }) |
不同的地方在于 itemBuilder 的定义不同，itemBuilder 与 ListView 相比，多了一个 animation 参数：
|
1 2 3 4 5 |
typedef AnimatedListItemBuilder = Widget Function( BuildContext context, int index, Animation<double> animation ); |
animation是一个 Animation<double>对象，因此可以使用 animation 来构建元素的过渡动画。比如我们这里的示例就使用了 FadeTransition 来构建列表元素，从而有渐现效果。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
class ListItem extends StatelessWidget { const ListItem({ Key? key, required this.onRemove, required this.animation, required this.item, }) : super(key: key);
final Animation<double> animation; final ValueChanged onRemove; final int item;
@override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(2.0), child: FadeTransition( opacity: animation, child: Container( child: Row(children: [ Expanded( child: Text( 'Item $item', style: TextStyle( color: Colors.blue, ), ), ), IconButton( onPressed: () { onRemove(this.item); }, icon: Icon(Icons.delete_forever_rounded, color: Colors.grey), ), ]), ), ), ); } } |
元素的插入和删除
使用 AnimatedList 时，我们需要调用 AnimatedListState 的insertItem 和 removeItem 方法来操作，而不能直接操作完数据后刷新界面。也就是在插入和删除数据的时候，应该是先修改列表数据，然后再调用AnimatedListState的 insertItem 或 removeItem 方法来刷新列表界面。例如删除元素的代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
E removeAt(int index) { final E removedItem = _items.removeAt(index);
if (removedItem != null) { _animatedList!.removeItem( index, (BuildContext context, Animation<double> animation) { return removedItemBuilder(removedItem, context, animation); }, ); } return removedItem; } |
这里 removedItem接收两个参数，一个是要移除元素的下标，另一个是一个构建移除元素的方法 builder。之所以要这个方法是因为元素实际从列表马上移除的，为了在动画过渡时间内还能够看到被移除的元素，需要通过这种方式来构建一个被移除的元素来感觉是动画删除的。这里也可以使用 animation 参数自定义动画效果。insertItem 方法没有 builder 参数，它直接将新插入的元素传给 AnimatedList 的 builder 方法来插入新的元素，这样能够保持和列表新增元素的动效一致。
使用 GlobalKey 获取 AnimatedListState
由于 AnimatedList 的所有控制都是在 AnimatedState 中进行的，而 AnimatedState 对象没法直接获取得到，因此需要使用 GlobalKey 来获取 AnimatedListState 对象。在构建 AnimatedList 的时候给 key 属性传入一个 GlobalKey，。然后就可以通过 currentState 获取到 AnimatedListState 对象了。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
class _AnimatedListSampleState extends State<AnimatedListSample> { final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>(); late ListModel<int> _list; late int _nextItem;
@override void initState() { super.initState(); _list = ListModel<int>( listKey: _listKey, initialItems: <int>[0, 1, 2], removedItemBuilder: _buildRemovedItem, ); _nextItem = 3; }
Widget _buildRemovedItem( int item, BuildContext context, Animation<double> animation) { return ListItem( animation: animation, item: item, onRemove: _remove, ); }
// Insert the "next item" into the list model. void _insert() { final int index = _list.length; _list.insert(index, _nextItem++); }
// Remove the selected item from the list model. void _remove(item) { if (item != null) { _list.removeAt(_list.indexOf(item!)); } }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('AnimatedList'), actions: <Widget>[ IconButton( icon: const Icon(Icons.add), onPressed: _insert, tooltip: '添加', ), ], ), body: Padding( padding: const EdgeInsets.all(16.0), child: AnimatedList( key: _listKey, initialItemCount: _list.length, itemBuilder: (context, index, animation) { return FadeTransition( opacity: animation, child: ListItem( onRemove: _remove, animation: animation, item: _list[index], ), ); }, ), ), ); } } |
总结
本篇介绍了 AnimatedList 的使用，对于我们的一些数据量少、又有插入或删除元素操作的列表，可以考虑使用 AnimatedList 来提升用户体验。
