在Flutter中,AnimatedList
是一个用于构建可以插入、移动或删除列表项并且在这些操作发生时带有动画效果的列表的小部件。以下是如何使用AnimatedList
的基本步骤和示例代码:
- 创建一个
ListModel
来管理列表的状态。 - 创建一个
AnimatedList
小部件,并为其提供一个key
以及用于每个列表项构建的itemBuilder
。 - 使用
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),
)