个人开发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简单的改造实现的补位动画，希望留言给我地址，非常感谢