Flutter框架 AnimatedList

封面图 • 2025-11-01 • Flutter

在 Flutter 框架中，`AnimatedList` 是一个用于动态展示列表项的组件，它允许你以动画的形式添加、删除或更新列表中的项目。与 `ListView` 不同的是，`AnimatedList` 会自动为每个操作（如插入、删除）生成动画效果。

---

## ✅ 一、`AnimatedList` 的基本用法

### 1. 基本结构

```dart
AnimatedList(
  key: _listKey,
  initialItemCount: 0,
  itemBuilder: (context, index, animation) {
    return SizeTransition(
      sizeFactor: animation,
      child: ListTile(title: Text('Item $index')),
    );
  },
)
```

- `key`: 必须提供一个 `GlobalKey<AnimatedListState>` 来控制 `AnimatedList`。
- `initialItemCount`: 初始显示的条目数量。
- `itemBuilder`: 为每个条目构建一个带有动画的 widget。

---

## ✅ 二、常用方法

### 1. 添加条目

```dart
void addItem() {
  final int index = _items.length;
  _items.add('Item $index');
  _listKey.currentState?.insertItem(index);
}
```

### 2. 删除条目

```dart
void removeItem(int index) {
  _listKey.currentState?.removeItem(
    index,
    (context, animation) => SizeTransition(
      sizeFactor: animation,
      child: ListTile(title: Text(_items[index])),
    ),
    duration: const Duration(seconds: 1),
  );
  _items.removeAt(index);
}
```

> 注意：`removeItem` 需要传入一个 `Animation<double>` 回调，用来创建删除时的动画。

---

## ✅ 三、完整示例代码

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('AnimatedList Example')),
        body: AnimatedListExample(),
        floatingActionButton: FloatingActionButton(
          onPressed: () => _addItem(),
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class AnimatedListExample extends StatefulWidget {
  @override
  _AnimatedListExampleState createState() => _AnimatedListExampleState();
}

class _AnimatedListExampleState extends State<AnimatedListExample> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  List<String> _items = [];

void _addItem() {
    final int index = _items.length;
    _items.add('Item $index');
    _listKey.currentState?.insertItem(index);
  }

void _removeItem(int index) {
    _listKey.currentState?.removeItem(
      index,
      (context, animation) => SizeTransition(
        sizeFactor: animation,
        child: ListTile(title: Text(_items[index])),
      ),
      duration: const Duration(milliseconds: 300),
    );
    _items.removeAt(index);
  }

@override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: AnimatedList(
            key: _listKey,
            initialItemCount: _items.length,
            itemBuilder: (context, index, animation) {
              return SizeTransition(
                sizeFactor: animation,
                child: ListTile(
                  title: Text(_items[index]),
                  trailing: IconButton(
                    icon: Icon(Icons.delete),
                    onPressed: () => _removeItem(index),
                  ),
                ),
              );
            },
          ),
        ),
      ],
    );
  }
}
```

---

## ✅ 四、动画类型

你可以使用不同的动画 widget 来实现不同的动画效果：

| 动画类型 | 描述 |
|----------|------|
| `SizeTransition` | 改变大小的动画 |
| `FadeTransition` | 渐显/渐隐动画 |
| `SlideTransition` | 滑动动画 |
| `RotationTransition` | 旋转动画 |

例如，使用 `FadeTransition`：

```dart
FadeTransition(
  opacity: animation,
  child: ListTile(title: Text('Item $index')),
)
```

---

## ✅ 五、注意事项

- `AnimatedList` 只能处理有限的条目数（通常不超过 100），否则性能可能下降。
- `AnimatedList` 不支持滚动，除非你将它放在 `SingleChildScrollView` 或 `CustomScrollView` 中。
- 如果你需要复杂的动画逻辑，可以考虑使用 `AnimatedList` + `AnimationController` 自定义动画。

---

## ✅ 六、总结

| 功能 | 说明 |
|------|------|
| 添加条目 | 使用 `insertItem()` |
| 删除条目 | 使用 `removeItem()` |
| 动画支持 | 内置动画，支持多种动画类型 |
| 适用场景 | 动态列表（如聊天记录、待办事项等） |

---

如果你有更具体的需求（比如自定义动画、复杂交互等），欢迎继续提问！