flutter - Flutter AnimatedList - 将 CurvedAnimation 添加到 SlideTransition
问题描述
我已经设法达到了一个AnimatedList
可以滑入新添加项目的地步。包装我的列表项的Dismissible
小部件控制删除动画。我的问题是如何在其中添加某种动画曲线,SlideTransition
以便我可以控制新列表项在滑入时的显示方式。这是我目前所处的位置:
@override
Widget build(BuildContext context) {
final checklists = Provider.of<Checklists>(context);
return AnimatedList(
key: listKey,
initialItemCount: checklists.lists.length,
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: CurvedAnimation(parent: ).drive(child) // <- this line needs changing
child: _buildListItem(checklists.lists[i], i),
);
},
);
}
我不确定如何处理这个position
论点。以前对于SlideTransition
我只是使用的标准
animation.drive(Tween(begin: Offset(0.2, 0), end: Offset(0.0, 0))),
效果很好,但缺乏曲线缓和。有任何想法吗?
为了清楚起见,编辑 继承完整的 .dart 文件以及我从父小部件插入新项目的位置:
GlobalKey<AnimatedListState> recentListsAnimationKey = GlobalKey();
class RecentLists extends StatefulWidget {
@override
_RecentListsState createState() => _RecentListsState();
}
class _RecentListsState extends State<RecentLists>
with TickerProviderStateMixin {
Widget _buildListItem(Checklist list, int listIndex) {
return Dismissible(
key: ObjectKey(list.id),
direction: DismissDirection.endToStart,
background: Container(
alignment: AlignmentDirectional.centerEnd,
color: Theme.of(context).accentColor,
child: Padding(
padding: EdgeInsets.fromLTRB(0.0, 0.0, 10.0, 0.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
child: ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (ctx) => ListItemsScreen(list.id),
),
);
},
title: Text(list.name),
leading: Checkbox(
value: list.completed,
onChanged: (value) {
setState(() {
list.completed = value;
});
},
),
),
onDismissed: (direction) {
_onDeleteList(list, listIndex);
},
);
}
void _onDeleteList(Checklist list, int listIndex) {
Provider.of<Checklists>(context).deleteList(list.id);
recentListsAnimationKey.currentState
.removeItem(listIndex, (_, __) => Container());
Scaffold.of(context).showSnackBar(
SnackBar(
action: SnackBarAction(
label: 'UNDO',
onPressed: () {
Provider.of<Checklists>(context).undoDeleteList(list, listIndex);
recentListsAnimationKey.currentState
.insertItem(listIndex, duration: Duration(milliseconds: 100));
},
),
content: Text(
'List deleted',
style: TextStyle(color: Theme.of(context).accentColor),
),
),
);
}
AnimationController _controller;
Animation<Offset> _position;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 200),
vsync: this,
);
_position = Tween(
begin: Offset(0.5, 0),
end: Offset(0.0, 0),
).animate(
CurvedAnimation(
parent: _controller,
curve: Curves.decelerate,
),
);
_controller.forward();
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
final checklists = Provider.of<Checklists>(context);
return AnimatedList(
key: recentListsAnimationKey,
initialItemCount: checklists.lists.length,
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: _position,
child: _buildListItem(checklists.lists[i], i),
);
},
);
}
}
这是我在列表中插入新项目的地方。不显示幻灯片动画。
void createNewList(BuildContext context) {
if (nameController.text.isNotEmpty) {
Provider.of<Checklists>(context).addList(nameController.text);
recentListsAnimationKey.currentState.insertItem(0, duration: Duration(milliseconds: 100));
nameController.clear();
}
Navigator.of(context).pop();
}
解决方案
将Animation.drive函数与链接到偏移 Tween的CurveTween一起使用。您的 itemBuilder 应如下所示:
itemBuilder: (ctx, i, animation) {
return SlideTransition(
position: animation.drive(Tween(begin: Offset(2, 0.0), end: Offset(0.0, 0.0))
.chain(CurveTween(curve: Curves.elasticInOut))),
child: _buildListItem(checklists.lists[i], i),
);
},
推荐阅读
- javascript - 如何计算 div
- c# - 访问路径“Enrollments.zip”被拒绝,运行后台服务运行后
- angular - Bootstrap 3.3.7 下拉菜单不显示所选值
- unix - 使用 shell 脚本在 HDFS 中删除文件名中的扩展名
- ocaml - OCaml 的集成开发环境
- angular - 如何动态更改 index.html 中的脚本——Angular
- django - 在 ElasticBeanstalk 上部署多容器应用程序时出现 CannotPullContainerError
- flutter - 如何在颤振应用程序中无上下文导航?
- php - 如何从 youtube 嵌入中删除更多视频?
- azure-devops - 在 build.yml 中设置代码覆盖率百分比