flutter - 如何在颤动中使用动画列表对最初渲染的项目进行动画处理
问题描述
我在颤动中使用动画列表来加载列表类,在添加或删除项目时,动画可以工作,但是当列表最初加载时,动画不起作用。有没有办法在最初加载列表时为项目设置动画。
class AnimationTest extends StatefulWidget {
@override
_AnimationTestState createState() => _AnimationTestState();
}
class _AnimationTestState extends State<AnimationTest> with SingleTickerProviderStateMixin {
AnimationController _controller;
@override
void initState() {
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 1),
);
super.initState();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedList(
key: _listKey,
initialItemCount: 3,
itemBuilder: (BuildContext context, int index, Animation animation) {
return SlideTransition(
position: animation.drive(Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset.zero)
.chain(CurveTween(curve: Curves.decelerate))),
child: Row(
children: <Widget>[
Expanded(
child: InkWell(
onTap: () => _listKey.currentState.insertItem(0,duration: Duration(milliseconds: 600)),
child: Container(
padding: EdgeInsets.only(left: 10, right: 10),
height: 100,
child: Card(
margin: EdgeInsets.symmetric(vertical: 4.0),
color: Theme.of(context).backgroundColor,
)),
),
),
],
),
);
},
);
}
}
解决方案
因为AnimatedList
只能在添加/删除列表中的项目时设置动画。您需要使用insertItem
或removeItem
from单独添加每个项目AnimatedListState
。实现良好加载效果的一种方法是延迟每次插入/删除项目。
这是链接的代码,Future
以便在指定的延迟后一个接一个地加载每个项目
var future = Future(() {});
for (var i = 0; i < fetchedList.length; i++) {
future = future.then((_) {
return Future.delayed(Duration(milliseconds: 100), () {
// add/remove item
});
});
}
从那里您可以创建一个loadItems()
方法来初始化 in 中的所有AnimatedList
项目initState()
。请记住同时更新底层数据结构 ( _listItems
) 及其AnimatedList
本身以使其正常工作。
var _listItems = <Widget>[];
final GlobalKey<AnimatedListState> _listKey = GlobalKey();
@override
void initState() {
super.initState();
_loadItems();
}
void _loadItems() {
// fetching data from web api, local db...
final fetchedList = [
ListTile(
title: Text('Economy'),
trailing: Icon(Icons.directions_car),
),
ListTile(
title: Text('Comfort'),
trailing: Icon(Icons.motorcycle),
),
ListTile(
title: Text('Business'),
trailing: Icon(Icons.flight),
),
];
var future = Future(() {});
for (var i = 0; i < fetchedList.length; i++) {
future = future.then((_) {
return Future.delayed(Duration(milliseconds: 100), () {
_listItems.add(fetchedList[i]);
_listKey.currentState.insertItem(i);
});
});
}
}
这是完整的例子。我在应用栏中添加了 2 个按钮,以便您可以玩动画
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'YourAwesomeApp',
home: PageWithAnimatedList(),
);
}
}
class PageWithAnimatedList extends StatefulWidget {
@override
_PageWithAnimatedListState createState() => _PageWithAnimatedListState();
}
class _PageWithAnimatedListState extends State<PageWithAnimatedList> {
var _listItems = <Widget>[];
final GlobalKey<AnimatedListState> _listKey = GlobalKey();
@override
void initState() {
super.initState();
_loadItems();
}
void _loadItems() {
// fetching data from web api, db...
final fetchedList = [
ListTile(
title: Text('Economy'),
trailing: Icon(Icons.directions_car),
),
ListTile(
title: Text('Comfort'),
trailing: Icon(Icons.motorcycle),
),
ListTile(
title: Text('Business'),
trailing: Icon(Icons.flight),
),
];
var future = Future(() {});
for (var i = 0; i < fetchedList.length; i++) {
future = future.then((_) {
return Future.delayed(Duration(milliseconds: 100), () {
_listItems.add(fetchedList[i]);
_listKey.currentState.insertItem(_listItems.length - 1);
});
});
}
}
void _unloadItems() {
var future = Future(() {});
for (var i = _listItems.length - 1; i >= 0; i--) {
future = future.then((_) {
return Future.delayed(Duration(milliseconds: 100), () {
final deletedItem = _listItems.removeAt(i);
_listKey.currentState.removeItem(i,
(BuildContext context, Animation<double> animation) {
return SlideTransition(
position: CurvedAnimation(
curve: Curves.easeOut,
parent: animation,
).drive((Tween<Offset>(
begin: Offset(1, 0),
end: Offset(0, 0),
))),
child: deletedItem,
);
});
});
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
IconButton(icon: Icon(Icons.add), onPressed: _loadItems),
IconButton(icon: Icon(Icons.remove), onPressed: _unloadItems)
],
),
body: AnimatedList(
key: _listKey,
padding: EdgeInsets.only(top: 10),
initialItemCount: _listItems.length,
itemBuilder: (context, index, animation) {
return SlideTransition(
position: CurvedAnimation(
curve: Curves.easeOut,
parent: animation,
).drive((Tween<Offset>(
begin: Offset(1, 0),
end: Offset(0, 0),
))),
child: _listItems[index],
);
},
),
);
}
}
现场演示
推荐阅读
- python - 如何将python的变量输出传递给psql?
- tomcat - 为什么我的tomcat控制台在启动后就死机了?
- raspberry-pi - Raspberry Pi Pico - Thonny 解释器的问题
- javascript - 隐藏的音频文件不播放
- python - 如何将向量的每个元素提升到另一个向量的每个元素的幂?
- php - 使用 php 仅在桌面设备上显示 div
- javascript - Postman - 循环遍历嵌套对象数组以创建变量
- sql - 将 2 个不同表中的值与包含进行比较
- reactjs - 如果发生错误,在 redux-saga 中的 api 调用后调度一个动作
- html - 如何使用 CSS 去除 html 表格中的白线