Flutter-AnimatedList源码分析

983 阅读6分钟

​ 最近倒腾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的作用:

  1. widget的唯一标识,可防止父组件rebuild时,直接重建AnimatedList导致动画效果消失
  2. 可从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,
    );
  }
}
  1. 看到build方法,这个组件就是封装了ListView,装饰器模式增强功能
  2. 混入了TickerProviderStateMixin,这个是做多动画需要的
  3. _incomingItems:记录正在执行插入动画的item集合
  4. _outgoingItems:记录正在执行删除动画的item集合
  5. _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增加一个元素时

  1. 调用_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)

  2. 遍历正在插入动画的item集合,因为插入了个新元素,所以原本播放着动画的item的itemIndex如果>=当前插入的index,则需要+1到正确的位置

  3. 将新增的index项封装成_ActiveItem,添加到 _incomingItems里,表示这个位置的item正在播放插入动画,然后 _itemsCount+1

  4. 开启动画,动画结束后将 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;
      });
    });
  }

删除动画,主要步骤如下:

  1. 同样是对传入的外部数据源集合的index进行修正,调用_indexToItemIndex方法
  2. _removeActiveItemAt 判断删除的item此时是否正在播放插入动画,有则取出AnimationController,无则新建动画
  3. 将此删除的item封装进 _ActiveItem 并加入 _outgoingItems里
  4. 对AnimationController进行reverse反向播放,即播放删除动画
  5. 动画播放完毕后,对其余正在播放动画的item的index进行修正,即如果当前删除的itemIndex < 正在播放动画的item的index,则位置-1
  6. 最后将 _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的回调

  1. 首先判断回调itemIndex对应的Item此时是否正在进行删除动画, _activeItemAt(_outgoingItems, itemIndex)返回封装的 _ActiveItem,不为null则表示找到,此时应该调用removeItem方法传入的AnimatedListRemovedItemBuilder回调进行构建删除显示的Widget,之后构建下一个item

  2. 如果判断此ItemIndex没在删除动画集合里,则再判断是否是正在执行插入动画的item,是则取出Animation,否则使用默认的Animation,最后回调父widget传入的函数,进行构建Widget

  3. _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是会在一段时间内存在不一致的

亮点:

  1. 对itemIndex进行封装处理,完全解耦数据源
  2. 内部播放动画的控制机制与外部完全解耦,外部只需告诉widget 插入展示和删除展示的widget即可

坑:

  1. 对数据源集合进行整个替换或一定范围的更新,没有有效支持

本文由Owen Lee原创,转载请注明来源: juejin.cn/post/684490…