flutter实现带删除动画的listview功能
个人开发app中,需要开发一个带有删除功能的ListView
效果如下
需求动画分析
列表可以滚动用listView,
有两个动画,第一个动画是透明度变化,第二个是size变化
是顺序执行
实现过程
新建一个动画页面进行单独控制
记得用statefulwidget类,这第二个动画之间涉及到页面刷新切换widget
记得with tickerproviderstatemixin 这个是动画类状态管理的必备
class AnimationListItem extends StatefulWidget { AnimationListItem(); @override _AnimationListItemState createState() => _AnimationListItemState(); } class _AnimationListItemState extends State<AnimationListItem> with TickerProviderStateMixin { @override Widget build(BuildContext context) { // TODO: implement build return Container(); } }
动画流程
声明
//控制器 AnimationController lucencyController; AnimationController sizeController; // 动画 Animation<double> lucencyAnimation; Animation<double> sizeAnimation;
初始化
///必须在initstate这个生命周期进行初始化 @override void initState() { // TODO: implement initState super.initState(); lucencyController = AnimationController(vsync: this, duration: Duration(milliseconds: 150)); lucencyAnimation = Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation(parent: lucencyController, curve: Curves.easeOut)); sizeController = AnimationController(vsync: this, duration: Duration(milliseconds: 250)); sizeAnimation = Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation(parent: sizeController, curve: Curves.easeOut)); }
注销
@override void dispose() { lucencyController.dispose(); sizeController.dispose(); super.dispose(); }
最后内容呈现
class AnimationListItem extends StatefulWidget { AnimationListItem(); @override _AnimationListItemState createState() => _AnimationListItemState(); } class _AnimationListItemState extends State<AnimationListItem> with TickerProviderStateMixin { AnimationController lucencyController; AnimationController sizeController; Animation<double> lucencyAnimation; Animation<double> sizeAnimation; bool isChange = false; @override void initState() { // TODO: implement initState super.initState(); lucencyController = AnimationController(vsync: this, duration: Duration(milliseconds: 150)); lucencyAnimation = Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation(parent: lucencyController, curve: Curves.easeOut)); sizeController = AnimationController(vsync: this, duration: Duration(milliseconds: 250)); sizeAnimation = Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation(parent: sizeController, curve: Curves.easeOut)); } @override Widget build(BuildContext context) { return buildItemBox(); } @override void dispose() { lucencyController.dispose(); sizeController.dispose(); super.dispose(); } Widget buildItemBox() { return isChange ? SizeTransition( axis: Axis.vertical, sizeFactor: sizeAnimation, child: Container( height: duSetWidth(100), width: double.infinity, ), ) : FadeTransition( opacity: lucencyAnimation, child: Container( alignment: Alignment.center, padding: EdgeInsets.only( left: duSetWidth(15), right: duSetWidth(15), ), height: duSetWidth(100), child: buildRow(), ), ); } Widget buildRow() { ///设置显示的样式 bool _isSub = false; Color _isSubColor = Color.fromRGBO(245, 77, 130, 1); Color _isSubBackColor = Colors.transparent; Widget isSubWidget = InkWell( child: Container( alignment: Alignment.center, width: duSetWidth(55), height: duSetWidth(28), decoration: BoxDecoration( color: _isSubBackColor, border: Border.all(color: _isSubColor), borderRadius: BorderRadius.circular(duSetWidth(15)), ), child: Text( '+ 书架', style: TextStyle( color: _isSubColor, ), ), ), onTap: () { if (_isSub) print('dasd'); else print('dsada'); }, ); return Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( width: duSetWidth(60), height: duSetWidth(80), child: ClipRRect( borderRadius: BorderRadius.circular(duSetWidth(5)), child: Image.network( 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2F00.minipic.eastday.com%2F20170307%2F20170307164725_114ea3c04f605e59bd10699f37870267_13.jpeg&refer=http%3A%2F%2F00.minipic.eastday.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1623596389&t=946dba98698d8d67d773ea8f7af55f45', fit: BoxFit.cover, ), ), ), Container( width: duSetWidth(155), height: duSetWidth(80), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Container( height: duSetWidth(25), alignment: Alignment.centerLeft, width: double.infinity, child: Text( '这是标题', maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( color: Colors.white, fontSize: duSetFontSize(16), ), ), ), Container( height: duSetWidth(20), alignment: Alignment.centerLeft, width: double.infinity, child: Text( '这是副标题', maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle( color: Color.fromRGBO(162, 168, 186, 1), fontSize: duSetFontSize(14), ), ), ), ], ), ), Container( width: duSetWidth(100), height: duSetWidth(80), padding: EdgeInsets.only( top: duSetWidth(4), ), alignment: Alignment.center, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ isSubWidget, InkWell( onTap: () async { await lucencyController.forward(); setState(() { isChange = true; sizeController.forward(); }); }, child: Container( alignment: Alignment.center, width: duSetWidth(35), height: duSetWidth(28), decoration: BoxDecoration( border: Border.all( color: Color.fromRGBO(113, 118, 140, 1), ), borderRadius: BorderRadius.circular(duSetWidth(15)), ), child: Icon( Icons.delete, color: Color.fromRGBO(113, 118, 140, 1), size: duSetFontSize(16), ), ), ), ], ), ) ], ); } }
dusetwidth是我自定义的函数可以不用管,自己替换
下列是在页面使用
class HistoryPage extends StatefulWidget { @override _HistoryPageState createState() => _HistoryPageState(); } class _HistoryPageState extends State<HistoryPage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: ListView( children: [ AnimationListItem(), AnimationListItem(), AnimationListItem(), AnimationListItem(), ], ), ); } /// 构造appbar Widget buildAppabr() { return AppBar( backgroundColor: Color.fromRGBO(33, 39, 46, 1), brightness: Brightness.dark, centerTitle: true, title: Text( '浏览记录', style: TextStyle( fontSize: duSetFontSize(16), color: Colors.white, ), ), leading: IconButton( icon: Icon( Icons.arrow_back_ios, color: Colors.white, size: duSetFontSize(18), ), onPressed: () { Get.back(); }, ), ); } }
这个我原来是准备使用animatedList来进行实现的,最后发现,animatedList里面只能设置移除动画,不能实现补位动画
第一个透明度的动画就是移除动画,第二个size变化就是补位动画,
animatedList没有补位,所以下方list直接移动上去会显得非常突兀,我看了看源码,修改较为麻烦。所以就直接用动画变换来写
这个List内的内容,并不是直接移除,而是替换成高低为0 的一个盒子
如果有animatedList简单的改造实现的补位动画,希望留言给我地址,非常感谢
到此这篇关于flutter实现带删除动画的listview功能的文章就介绍到这了,更多相关flutter listview删除内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 下面小编来给大家演示几个php操作zip文件的实例,我们可以读取zip包中指定文件与删除zip包中指定文件,下面来给大这介绍一下。 从zip压缩文件中提取文件 代...2016-11-25
- 复制代码 代码如下: <td> <a href="/member/life/edit_ppt/<?php echo $v->id;?>" class="btn">编辑</a> <a href="javascript:;" onclick="if(confirm('您确定删除这条记录?')){location.href='/member/life/d...2014-06-07
- 伪造跨站请求介绍伪造跨站请求比较难以防范,而且危害巨大,攻击者可以通过这种方式恶作剧,发spam信息,删除数据等等。...2013-10-01
Centos中彻底删除Mysql(rpm、yum安装的情况)
我用的centos6,mysql让我整出了各种问题,我想重装一个全新的mysql,yum remove mysql-server mysql之后再install并不能得到一个干净的mysql,原来的/etc/my.cnf依然没变,datadir里面的数据已没有任何变化,手动删除/etc/my.cn...2015-03-15- 数据库中的数据删除会分为两种:物理删除 和 逻辑删除,接下来通过本文给大家介绍MyBatis-Plus的物理删除和逻辑删除使用场景分析,感兴趣的朋友一起看看吧...2021-09-25
- 这篇文章主要介绍了mybatis-plus getOne和逻辑删除,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-26
- 这篇文章主要介绍了C#实现带进度条的ListView 的相关资料,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C# 复制与删除文件的实现方法的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下...2020-06-25
- 最近由于项目的需要,需要动态的添加和删除table中的tr,感觉用JS可以实现,但是在网上找了一下,单纯的自己写JS,感觉太麻烦,而且也不好维护。于是想到了最近学的jQuery。这篇文章给大家用实例介绍了jQuery动态添加与删除tr行的方法,有需要的朋友们可以参考借鉴。...2016-10-20
- 这篇文章主要为大家详细介绍了js实现上传文件添加和删除文件选择框 ,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-25
- 下面小编就为大家带来一篇C#获取鼠标在listview右键点击单元格的内容方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2020-06-25
- 这篇文章主要介绍了C#删除UL LI中指定标签里文字的方法,涉及C#针对页面HTML元素进行正则匹配与替换的相关操作技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了MybatisPlus实现逻辑删除功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-12-25
- 这篇文章主要介绍了C++递归删除一个目录的实现方法,涉及到目录的操作及递归算法的应用,需要的朋友可以参考下...2020-04-25
- 这篇文章主要介绍了jQuery中DOM节点的删除方法,文中介绍的很相信,内容包括empty()的基本用法、remove()的有参用法和无参用法、empty和remove区别、保留数据的删除操作detach()以及detach()和remove()区别,需要的朋友可以参考借鉴。...2017-01-26
C#实现读取DataSet数据并显示在ListView控件中的方法
这篇文章主要介绍了C#实现读取DataSet数据并显示在ListView控件中的方法,涉及C#操作DataSet及ListView控件的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25- 本文实例讲述了MySQL查看、创建和删除索引的方法。分享给大家供大家参考。具体如下:1.索引作用在索引列上,除了上面提到的有序查找之外,数据库利用各种各样的快速定位技术,能够大大提高查询效率。特别是当数据量非常大,查询...2015-10-21
- 这篇文章主要介绍了C#中WPF ListView绑定数据的实例详解的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下...2020-06-25
- 在本篇文章里小编给大家分享了关于C#删除Excel中的图片的实例代码内容,有兴趣的朋友们参考学习下。...2020-06-25
- 这篇文章主要介绍了mysql delete 多表连接删除功能的相关资料,需要的朋友可以参考下...2017-03-14