5.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 }) ;

下面我们具体实现这样一个列表,点击底部 + 按钮时向列表追加一个列表项；点击每个列表项后面的删除按钮时，删除该列表项，添加和删除时分别执行指定的动画:这里添加和删除的动画的关键还是的使用全局的GlobalKey。

import 'package:flutter/material.dart';
import 'package:flutter_os_china/constants/constants.dart';
class AnimatedListWidgetData extends StatefulWidget {
 const AnimatedListWidgetData({Key? key}) : super(key: key);

 @override
 State<AnimatedListWidgetData> createState() => _AnimatedListWidgetDataState();
}

class _AnimatedListWidgetDataState extends State<AnimatedListWidgetData> {

 //先定义一个List
 List<String> data = <String>[];
 int counter = 5;

 final  globalListKey = GlobalKey<AnimatedListState>();
 
 @override
 void initState() {
   // TODO: implement initState
   
   for(var i=0;i<counter;i++){
     data.add('${i+1}');
   }
   
   super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
        appBar: AppBar(
          title: const Text('AnimatedList'),
        ),
        body: AnimatedList(
          key:globalListKey ,
          initialItemCount: data.length,
          itemBuilder: (
              BuildContext context,
              int index,
              Animation<double> animation
              ) {
                 // 添加列表项时会执行渐显动画
                 return  FadeTransition(
                   opacity: animation,
                   child: ListTile(title: Text('${index+1}'),trailing: const Icon(Icons.delete)),
                 );
              },
         ),
         floatingActionButton: FloatingActionButton(
           backgroundColor: AppColor.primaryColor,
           child: const Icon(Icons.add,color: Colors.white),
           onPressed: () {
             // 添加一个列表项
             data.add('${++counter}');
             // 告诉列表项有新添加的列表项
             globalListKey.currentState!.insertItem(data.length - 1);
             // print(globalListKey.currentState!.insertItem());

           },
         ),
   );
 }
}

关注点1

追加列表项关注点1

关注点2

追加列表项关注点2

删除节点并添加动画

删除节点并添加动画