在Flutter中一个List可以同时被两个AnimatedListView使用吗?修改List之后数据之后AnimatedListView会执行动画并更新数据吗?该如何做呢?
在Flutter中,一个List可以被多个AnimatedListView使用。当修改List之后,AnimatedListView会执行动画并更新数据。要做到这一点,可以使用AnimatedList和AnimationController。
AnimatedList是一个可以自动执行动画的List视图,它可以让你在不需要手动调用setState()的情况下更新数据。AnimationController是一个控制动画执行的类,它可以让你控制动画的进度和持续时间。
下面是一个简单的例子,演示了如何使用AnimatedList和AnimationController来更新多个AnimatedListView中的数据:
class MyListWidget extends StatefulWidget {
final List<String> items;
final AnimationController animationController;
MyListWidget({required this.items, required this.animationController});
@override
_MyListWidgetState createState() => _MyListWidgetState();
}
class _MyListWidgetState extends State<MyListWidget> {
late final GlobalKey<AnimatedListState> _listKey;
late final List<String> _items;
@override
void initState() {
super.initState();
_items = List.from(widget.items);
_listKey = GlobalKey<AnimatedListState>();
}
@override
Widget build(BuildContext context) {
return AnimatedList(
key: _listKey,
initialItemCount: _items.length,
itemBuilder: (context, index, animation) {
return SizeTransition(
sizeFactor: animation,
child: ListTile(
title: Text(_items[index]),
),
);
},
);
}
void addItem(String item) {
_items.add(item);
_listKey.currentState!.insertItem(
_items.length - 1,
duration: Duration(milliseconds: 500),
);
widget.animationController.forward();
}
void removeItem(int index) {
final item = _items.removeAt(index);
_listKey.currentState!.removeItem(
index,
(context, animation) {
return SizeTransition(
sizeFactor: animation,
child: ListTile(
title: Text(item),
),
);
},
duration: Duration(milliseconds: 500),
);
widget.animationController.reverse();
}
}
在这个例子中,我们创建了一个MyListWidget类,它继承自StatefulWidget。MyListWidget有两个属性,一个是items(List
在MyListWidget中,我们创建了一个AnimatedList,并将它的key设置为_listKey。在build方法中,我们使用ListTile来渲染每个item。我们还将SizeTransition包装在ListTile周围,以便在插入或删除item时执行动画。
在MyListWidget中,我们还创建了两个方法,addItem和removeItem,用于添加和删除items。在addItem方法中,我们向_items列表添加一个新的item,并通过_listKey.currentState.insertItem来添加一个新的item。在removeItem方法中,我们删除指定的item,并通过_listKey.currentState.removeItem来删除它。
在addItem和removeItem方法中,我们还调用了widget.animationController.forward和widget.animationController.reverse方法,以控制动画的执行。这样,我们就可以在多个AnimatedListView中更新数据并执行动画了。
原文地址: https://www.cveoy.top/t/topic/sHy 著作权归作者所有。请勿转载和采集!