Flutter开发之——动画-列表动画AnimatedList

发表于 分类于 ， ， 阅读时长 ≈ 3 分钟

一 概述

  • 列表动画即AnimatedList动画，是展示列表数据时组件动画
  • 当列表的数据发生变化(添加或删除时)，用动画的形式展示这种变化过程

二 AnimatedList

2.1 构造函数

1
2
3
4
5
6
7
8
9
10
11
12
13
class AnimatedList extends StatefulWidget 
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,
})

2.2 常用属性

属性 说明 取值
key 组件的标识符 Key
itemBuilder 生成每个列表的回调函数 Widget Function(BuildContext context, int index, Animation<double> animation)
initialItemCount 创建时的item个数 int
scrollDirection 滚动方向，默认垂直 Axis
controller scroll控制器 ScrollController

三 数据的变化(添加或删除)

3.1 数据的增加

过程描述

  • 数据增加时，将增加的数据添加到集合中
  • AnimatedListState刷新动画变化结果

代码描述

1
2
List<int>().insert(_index, _index);//集合变化
AnimatedList.of(context).insertItem(_index);//动画刷新

3.2 数据减少

过程描述

  • 数据减少时，将减少的数据从集合中移除
  • AnimatedListState刷新动画变化结果

代码描述

1
2
List<int>().removeAt(_index);
AnimatedList.of(context).removeItem(index, (context,animation)=>{});

3.3 AnimatedList.of(context)替换

因为设计到状态切换，使用AnimatedListState替换AnimatedList.of(context)

1
final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();

四 示例(默认列表)

4.1 代码

1
2
3
4
5
6
7
8
9
10
11
List<int> _list = [0,1];
body:AnimatedList(
        initialItemCount: _list.length,
        itemBuilder: (BuildContext context,int index,Animation animation){
          return _buildItem(_list[index].toString(), animation);
        },
      )
      
Widget _buildItem(String _item,Animation _animation){
  return Card(child: ListTile(title: Text(_item),) ,);
}

4.2 效果图

五 示例-添加/删除

5.1 代码

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
//定义变量
List<int> _list = [0,1];
final GlobalKey<AnimatedListState> _listKey=GlobalKey<AnimatedListState>();

//试图
body:AnimatedList(
          key: _listKey,
          initialItemCount: _list.length,
          itemBuilder: (BuildContext context,int index,Animation animation){
            return _buildItem(_list[index].toString(), animation);
          },
        ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        FloatingActionButton(onPressed: ()=>_addItem(),child: Icon(Icons.add),),
        SizedBox(width: 60,),
        FloatingActionButton(onPressed: ()=>_removeItem(),child: Icon(Icons.remove),)
      ],
    )
 //方法
   void _addItem(){
    final int _index=_list.length;
    _list.insert(_index, _index);
    //AnimatedList.of(context).insertItem(_index);
    _listKey.currentState.insertItem(_index);
  }

  void _removeItem(){
    final int _index=_list.length-1;
    var item=_list[_index].toString();
    //AnimatedList.of(context).removeItem(_index, (context, animation) => _buildItem(item,animation));
    _listKey.currentState.removeItem(_index, (context, animation) => _buildItem(item,animation));
    _list.removeAt(_index);

  }
  Widget _buildItem(String _item,Animation _animation){
    return SlideTransition(position: _animation.drive(CurveTween(curve: Curves.easeInOutQuart)).drive(Tween<Offset>(begin: Offset(1,0),end: Offset(0,0))),
      child: Card(child: ListTile(title: Text(_item),),),
    );
  }

5.2 效果图