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: ,
padding: ly(
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 = ansparent;
Widget isSubWidget = InkWell(
child: Container(
alignment: ,
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: Imagework(
'gimg2.baidu/image_search/src=http%3A%2F%2F00.minipic.eastday%2F20170307%2F20170307164725_114ea3c04f605e59bd10699f37870267_13.jpeg&refer=http%3A%2F%2F00.minipic.eastday&app=2002&size=f9999,10000&              fit: ver,
),
),
Container(
width: duSetWidth(155),
height: duSetWidth(80),
child: Column(
mainAxisAlignment: ,
children: [
Container(
height: duSetWidth(25),
alignment: Left,
width: double.infinity,
child: Text(
'这是标题',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: Colors.white,
fontSize: duSetFontSize(16),
),
),
),
Container(
height: duSetWidth(20),
alignment: Left,
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: ly(
top: duSetWidth(4),
),
alignment: ,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,            children: [
isSubWidget,
InkWell(
onTap: () async {
await lucencyController.forward();
setState(() {
isChange = true;
sizeController.forward();
});
},
child: Container(
alignment: ,
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(
flutter开发appappBar: 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删除内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。