最近倒腾Flutter，需要做列表的插入删除动画，用到了AnimatedList这个组件，也遇到一些问题，在这里分析下源码以作备忘，不足之处希望大神指点
使用
先看下组件的构造函数
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,
})
- itemBuilder ：类似ListView的itemBuilder，为什么说类似呢，因为AnimatedList里实际渲染在屏幕上的item不一定都是从这里构造出来的，当有删除的操作动画时，会有调用另一个回调来生成，这个下面的分析会体现出来
- initialItemCount：初始化的数据集数量，注意这个参数区别于ListView的itemCount，因为这是初始化的数量，之后外部再去重新改变这个变量是不会改变组件相应State里的值的（widget销毁,state可能会复用）
- scrollDirection：布局的方向
- reverse：反向布局
- 剩余属性：都是直接赋值给内部包裹的ListView的
简单使用如下：
...
final GlobalKey<AnimatedListState> _listKey = new GlobalKey<AnimatedListState>();
final List<String> _list = [];
Scaffold(
backgroundColor: Colors.grey,
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: AnimatedList(
key: _listKey,
initialItemCount: _list.length,
itemBuilder: buildItem,
)),
)
/// 构建item
Widget buildItem(
BuildContext context, int index, Animation<double> animation) {...}
/// 执行删除动画时需要替换原来位置item的组件
Widget _buildRemovedItem(
String item, BuildContext context, Animation<double> animation) {...}
/// 增加一条数据
void _insert(String item, [int index = 0]) {
_list.insert(index, item);
listKey.currentState.insertItem(index);
}
/// 删除一条数据
void _remove(int index) {
var removedItem = _list.removeAt(index);
listKey.currentState.removeItem(index,
(BuildContext context, Animation<double> animation) {
return _buildRemovedItem(removedItem, context, animation);
})
}
GlobalKey的作用：
- widget的唯一标识，可防止父组件rebuild时，直接重建AnimatedList导致动画效果消失
- 可从key里直接获取AnimatedListState,因为除了对数据源进行操作外，还需要调用AnimatedListState的insertItem和removeItem方法
事实上AnimatedListState在初始化后，内部维护了_itemCount，所以当外部对数据集进行操作时，需要同步AnimatedListState
源码分析
看下组件对应的State
class AnimatedListState extends State<AnimatedList> with TickerProviderStateMixin<AnimatedList> {
final List<_ActiveItem> _incomingItems = <_ActiveItem>[];
final List<_ActiveItem> _outgoingItems = <_ActiveItem>[];
int _itemsCount = 0;
@override
void initState() {
super.initState();
_itemsCount = widget.initialItemCount;
}
@override
void dispose() {
for (_ActiveItem item in _incomingItems)
item.controller.dispose();
for (_ActiveItem item in _outgoingItems)
item.controller.dispose();
super.dispose();
}
...
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: _itemBuilder,
itemCount: _itemsCount,
scrollDirection: widget.scrollDirection,
reverse: widget.reverse,
controller: widget.controller,
primary: widget.primary,
physics: widget.physics,
shrinkWrap: widget.shrinkWrap,
padding: widget.padding,
);
}
}
- 看到build方法，这个组件就是封装了ListView，装饰器模式增强功能
- 混入了TickerProviderStateMixin，这个是做多动画需要的
- _incomingItems：记录正在执行插入动画的item集合
- _outgoingItems：记录正在执行删除动画的item集合
- _itemsCount：数据集的数量，显然是在首次创建的时候进行了赋值，事实上在flutter渲染流程里，widget是会不断地被重新build生成新的实例的，而当满足一定的条件时，如给widget设置了同一个GlobalKey等操作时，State是会被复用的，所以父组件的重新build时赋了一个新的count给initialItemCount是不生效的
重点来了~扩展功能的关键代码就在上面代码片段里的...里，咱接着看
insertItem
...
void insertItem(int index, { Duration duration = _kDuration }) {
...
final int itemIndex = _indexToItemIndex(index);
...
for (_ActiveItem item in _incomingItems) {
if (item.itemIndex >= itemIndex)
item.itemIndex += 1;
}
for (_ActiveItem item in _outgoingItems) {
if (item.itemIndex >= itemIndex)
item.itemIndex += 1;
}
final AnimationController controller = AnimationController(duration: duration, vsync: this);
final _ActiveItem incomingItem = _ActiveItem.incoming(controller, itemIndex);
setState(() {
_incomingItems
..add(incomingItem)
..sort();
_itemsCount += 1;
});
controller.forward().then<void>((_) {
_removeActiveItemAt(_incomingItems, incomingItem.itemIndex).controller.dispose();
});
}
...
当调用insertItem增加一个元素时
-
调用_indexToItemIndex(index)，将外部数据源集合传入的index转换成AnimatedListState内部实际的itemIndex(因为删除动画未播放完成 _itemCount的值是不会变的，所以会出现外部数据源集合长度不一致的情况，需要做Index修正 )
int _indexToItemIndex(int index) { int itemIndex = index; for (_ActiveItem item in _outgoingItems) { if (item.itemIndex <= itemIndex) itemIndex += 1; else break; } return itemIndex; }看的出来，这里主要是对如果有正在删除元素的动作情况下，对index修正(当当前传入index>=删除动画的index时，即表明该传入index映射在AnimatedListState里认为的集合里的位置应该要+1)
遍历正在插入动画的item集合，因为插入了个新元素，所以原本播放着动画的item的itemIndex如果>=当前插入的index，则需要+1到正确的位置
将新增的index项封装成_ActiveItem，添加到 _incomingItems里，表示这个位置的item正在播放插入动画，然后 _itemsCount+1
开启动画，动画结束后将 item从_incomingItems里清掉
细心的观察会发现，第一步里只对_outgoingItems集合进行了修正，没有对 _incomingItem进行处理，这是因为新增的时候 _itemsCount += 1是在动画开始前就设置了，而remove是在动画结束后才会去减1的，之所以动画结束后才减 _itemCount，主要是因为。。。减了widget就消失了！！！哪还有动画
removeItem
void removeItem(int index, AnimatedListRemovedItemBuilder builder, { Duration duration = _kDuration }) {
...
final int itemIndex = _indexToItemIndex(index);
...
final _ActiveItem incomingItem = _removeActiveItemAt(_incomingItems, itemIndex);
final AnimationController controller = incomingItem?.controller
?? AnimationController(duration: duration, value: 1.0, vsync: this);
final _ActiveItem outgoingItem = _ActiveItem.outgoing(controller, itemIndex, builder);
setState(() {
_outgoingItems
..add(outgoingItem)
..sort();
});
controller.reverse().then<void>((void value) {
_removeActiveItemAt(_outgoingItems, outgoingItem.itemIndex).controller.dispose();
// Decrement the incoming and outgoing item indices to account
// for the removal.
for (_ActiveItem item in _incomingItems) {
if (item.itemIndex > outgoingItem.itemIndex)
item.itemIndex -= 1;
}
for (_ActiveItem item in _outgoingItems) {
if (item.itemIndex > outgoingItem.itemIndex)
item.itemIndex -= 1;
}
setState(() {
_itemsCount -= 1;
});
});
}
删除动画，主要步骤如下:
- 同样是对传入的外部数据源集合的index进行修正，调用_indexToItemIndex方法
- _removeActiveItemAt 判断删除的item此时是否正在播放插入动画，有则取出AnimationController,无则新建动画
- 将此删除的item封装进 _ActiveItem 并加入 _outgoingItems里
- 对AnimationController进行reverse反向播放，即播放删除动画
- 动画播放完毕后，对其余正在播放动画的item的index进行修正，即如果当前删除的itemIndex < 正在播放动画的item的index，则位置-1
- 最后将 _itemsCount数量-1
上述动作都是在对插入、删除动作进行index、动画的处理，当开启动画后，便会开始不断地触发build，而build方法里则构造ListView，最终调用_itemBuilder方法
_itemBuilder
Widget _itemBuilder(BuildContext context, int itemIndex) {
final _ActiveItem outgoingItem = _activeItemAt(_outgoingItems, itemIndex);
if (outgoingItem != null)
return outgoingItem.removedItemBuilder(context, outgoingItem.controller.view);
final _ActiveItem incomingItem = _activeItemAt(_incomingItems, itemIndex);
final Animation<double> animation = incomingItem?.controller?.view ?? kAlwaysCompleteAnimation;
return widget.itemBuilder(context, _itemIndexToIndex(itemIndex), animation);
}
上述_itemBuilder方法，是直接赋值给ListView的itemBuilder属性，用来构建视图列表的每个item的widget的回调
首先判断回调itemIndex对应的Item此时是否正在进行删除动画， _activeItemAt(_outgoingItems, itemIndex)返回封装的 _ActiveItem，不为null则表示找到，此时应该调用removeItem方法传入的AnimatedListRemovedItemBuilder回调进行构建删除显示的Widget，之后构建下一个item
如果判断此ItemIndex没在删除动画集合里，则再判断是否是正在执行插入动画的item，是则取出Animation，否则使用默认的Animation，最后回调父widget传入的函数，进行构建Widget
-
_itemIndexToIndex(itemIndex)：该方法和 _indexToItemIndex方法相反，它是将内部的itemIndex转成外部数据源集合相应的index(因为如果有正在执行删除动画的item则内外count会存在不一致)
int _itemIndexToIndex(int itemIndex) { int index = itemIndex; for (_ActiveItem item in _outgoingItems) { assert(item.itemIndex != itemIndex); if (item.itemIndex < itemIndex) index -= 1; else break; } return index; }可以看出来，遍历正在删除动画的item，如果此时的itemIndex大于它们，则需要-1才能修正回去
总结
AnimatedList主要是利用装饰器模式对ListView进行了功能上的扩展，其在初始化后，内部对数据集的数量进行了维护以方便动画的播放，需要注意的是：进行删除动画时，实际上数据源集合的长度和内部_itemCount是会在一段时间内存在不一致的
亮点：
- 对itemIndex进行封装处理，完全解耦数据源
- 内部播放动画的控制机制与外部完全解耦，外部只需告诉widget 插入展示和删除展示的widget即可
坑：
- 对数据源集合进行整个替换或一定范围的更新，没有有效支持
本文由Owen Lee原创，转载请注明来源：
https://www.jianshu.com/p/ae094b8ec058
