Flutter 中的 AnimatedList 小部件：全面指南

在Flutter中，AnimatedList是一个用于构建可以插入、移动或删除列表项并且在这些操作发生时带有动画效果的列表的小部件。以下是如何使用AnimatedList的基本步骤和示例代码：

1. 创建一个ListModel来管理列表的状态。
2. 创建一个AnimatedList小部件，并为其提供一个key以及用于每个列表项构建的itemBuilder。
3. 使用ListModel来处理列表项的插入、删除和移动操作，并通过AnimatedList的insertItem、removeItem和moveItem方法来应用动画。

示例代码：

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListPage(),
    );
  }
}
 
class ListPage extends StatefulWidget {
  @override
  _ListPageState createState() => _ListPageState();
}
 
class _ListPageState extends State<ListPage> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey();
  final ListModel<int> _list = ListModel<int>([]);
 
  void _insert(int index, int value) {
    _list.insert(index, value);
  }
 
  void _remove(int index) {
    _list.removeAt(index);
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _list.length,
        itemBuilder: (context, index, animation) {
          return SlideTransition(
            position: animation.drive(
              Tween<Offset>(
                begin: const Offset(1.0, 0.0),
                end: const Offset(0.0, 0.0),
              ),
            ),
            child: ListTile(
              title: Text('Item ${_list[index]}'),
              key: ValueKey<int>(_list[index]),
              onTap: () {
                // Navigate to a new screen and update the item when the user confirms.
              },
            ),
          );
        },
      ),
      floatingActionButton: Column(
        crossAxisAlignment: CrossAxisAlignment.end,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 5.0),
            child: FloatingActionButton(
              onPressed: () => _insert(_list.length, _list.length),
              tooltip: 'Add',
              child: Icon(Icons.add),
            )