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常见属性：

关于GlobalKey： 每个Widget 都对应一个Element ，我们可以直接对Widget 进行操作，但是无法直 接操作Widget 对应的Element 。而GlobalKey 就是那把直接访问Element 的钥匙。通过GlobalKey 可以获取到Widget 对应的Element 。

AnimatedList增加列表FadeTransition、ScaleTransition

这里面新增用的是FadeTransition 删除用的是ScaleTransition，两种动画效果不一样，可以根据自己的需求选择

import 'dart:async';

import 'package:flutter/material.dart';

import 'tools/pageViewKeepAlive.dart';

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

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  bool _flag = true;

  final _globalKey = GlobalKey<AnimatedListState>();
  List<String> list = ['第一条', '第二条', '第三条', '第四条', '第五条'];

  Widget _buildItem(index){
    return ListTile(
      title: Text(list[index]),
      trailing: IconButton(
        icon: const Icon(Icons.delete),
        onPressed: () {
          _deleteItem(index);
        },
      )
    );
  }

  _deleteItem(index){
    if(_flag == true){
      _flag = false;
      print('删除第$index条');
      _globalKey.currentState!.removeItem(index, (context, animation) {
        var removeItem = _buildItem(index);
        list.removeAt(index);
        return ScaleTransition(
          //opacity: animation,
          scale: animation,
          child: removeItem,
        );
      });
      Timer.periodic(const Duration(milliseconds: 500), (timer) { 
        _flag = true;
        timer.cancel();
      });
    }

  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('搜索'),

      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // setState(() {

          // });
          list.add('第六条');
            _globalKey.currentState!.insertItem(list.length - 1);
        },
        child: const Icon(Icons.add),
      ),
      body:  AnimatedList(
        key: _globalKey,
        initialItemCount: list.length,
        itemBuilder: (context, index, animation) {
          return FadeTransition(
            opacity: animation,
            child: _buildItem(index),
          );
        },
      ),
    );
  }
}