官网地址:选择你的开发平台，开始使用 | Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

文档地址:第二版序 | 《Flutter实战·第二版》 (flutterchina.club)

Flutter Animation

1、AnimatedList实现动画

AnimatedList 和 ListView 的功能大体相似，不同的是， AnimatedList 可以在列表中插入或删除节点

时执行一个动画，在需要添加或删除列表项的场景中会提高用户体验。

AnimatedList 是一个 StatefulWidget，它对应的 State 类型为 AnimatedListState，添加和删除元素的

方法位于 AnimatedListState 中：

//插入数据
void insertItem(int index, { Duration duration = _kDuration });
//移除数据
void removeItem(int index, AnimatedListRemovedItemBuilder builder, { Duration
duration = _kDuration }) ;

AnimatedList****常见属性：

属性	描述
key	globalKey final globalKey = GlobalKey();
initialItemCount	子元素数量
itemBuilder	方法 ( BuildContext context, int index, Animation animation) {}

关于****GlobalKey： 每个 Widget 都对应一个 Element ，我们可以直接对 Widget 进行操作，但是无法直

接操作 Widget 对应的 Element 。而 GlobalKey 就是那把直接访问 Element 的钥匙。通过 GlobalKey

可以获取到 Widget 对应的 Element 。

1.1.、新增与删除列表添加动画效果(ScaleTransition缩放动画)

import 'package:flutter/material.dart';

class AnimationList extends StatefulWidget {
  const AnimationList({super.key});

  @override
  State<AnimationList> createState() => _AnimationStateList();
}

class _AnimationStateList extends State<AnimationList> {
  // 数据
  List<String> list = ['第1条', '第2条'];
  // 定义一个globalKey，用于操作AnimatedList
  final _globalKey = GlobalKey<AnimatedListState>();
  Widget _buildItem(index) {
    return ListTile(
      title: Text(list[index]),
      trailing: IconButton(
        icon: const Icon(
          Icons.delete,
          color: Colors.red,
        ),
        onPressed: () {
          var removeItem = _buildItem(index);
          list.remove(index);
          // 通过_globalKey来操作AnimatedList
          // 删除数据,这样也可以不使用setState,AnimatedListState拥有removeItem属性来改变列表
          _globalKey.currentState?.removeItem(
            index,
            (context, animation) {
              return ScaleTransition(
                scale: animation,
                child: removeItem,
              );
            },
          );
        },
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimationList演示')),
      body: AnimatedList(
        key: _globalKey,
        initialItemCount: list.length,
        itemBuilder: ((context, index, animation) {
          return ScaleTransition(
            scale: animation,
            child: _buildItem(index),
          );
        }),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 添加数据
          list.add('第${list.length + 1}条');
          // 通过_globalKey来操作AnimatedList
          // 插入数据,这样也可以不使用setState,AnimatedListState拥有insertItem属性来改变列表
          _globalKey.currentState?.insertItem(list.length - 1);
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

1.2、FadeTransition动画

按照上方动画中替换ScaleTransition组件以及内容为:

return FadeTransition(
    opacity: animation,
    child: _buildItem(index),
);

2.隐式动画

3.显式动画