Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出

系列文章

1. Flutter 旋转动画 — RotationTransition
2. Flutter 平移动画 — 4种实现方式
3. Flutter 淡入淡出与逐渐出现动画
4. Flutter 尺寸缩放、形状、颜色、阴影变换动画
5. Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
6. Flutter Hero 实现共享元素转场动画
7. Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
8. Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

---

1 列表Item动画效果图

---

2 列表动画 AnimatedList

AnimatedList 是Flutter提供的一个可以在插入或移除Item时为Item设置动画的列表Widget。

2.1 实现Item淡入淡出动画

淡入淡出效果使用 FadeTransition实现，若不熟悉该控件的用法，建议先看博客
Flutter 平移动画 — 4种实现方式

2.1.1 AnimatedList 列表展示

AnimatedList 的主要的属性

• Widget Function(BuildContext context, int index, Animation animation) itemBuilder
  用于构建Item，可在回调中animation的基础上定义Item动画
• int initialItemCount
  初始的item数量
• GlobalKey<AnimatedListState> key
  可通过 AnimatedListState 来添加或删除Item,以触发动画效果

以下代码为实现 AnimatedList的列表展示，并无动画效果

class _AnimatedListPageState extends State<AnimatedListPage> {
   
  /// AnimatedList 的 key  可通过AnimatedListState来添加或删除Item
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  final List<String> _items = ["Item 0", "Item 1"];

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(title: const Text('AnimatedList'), centerTitle: true),
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _items.length,
        itemBuilder: (context, index, animation) {
   
          return _buildItem(_items[index]);
        },
      ),
    );
  }

  /// 无动画效果的Item
  Widget _buildItem(String item) {
   
    return Container(
      height: 44.0,
      margin: const EdgeInsets.only(bottom: 1),
      color: Colors.black,
      alignment: Alignment.center,
      child: Text(item, style: const TextStyle(color: Colors.white)),
    );
  }
}

2.1.2 编写淡入淡出动画效果的Item Widget

在无动画的Item基础上套一层Widgt FadeTransition，实现淡入淡出效果。

  /// 淡入淡出的Widget
  Widget _buildFadeWidget(
    Widget child,
    Animation<double> animation,
  ) {
   
    return FadeTransition(
      opacity: Tween<double><