Flutter开发-------侧滑删除
侧滑删除
- 前言
- 主要技术
- 实现效果
- 实例代码分析
- 叠层的使用
- 状态管理的使用
- 控制按钮的布局和动画
- 列表布局代码
前言
昨天的一个需求，需要完成侧滑删除这个功能，现在Dismissible的功能需求满足不了现在的项目需求，就自己封装一个小组将
主要技术
涉及到叠层，动画，状态管理
实现效果
实例代码分析
叠层的使用
child: Stack(
children: <Widget>[
_item(context,index,imageList), //底部的列表
operationArea(context,index) //控制按钮的区域
],
),
状态管理的使用
//控制操作区域是否打开
Widget operationArea(context,index){
if(Provide.value<AttentionProvide>(context).operationArea==index){
return attentionOperation();
}else{
return Container(
child: null,
);
}
}
控制按钮的布局和动画
class attentionOperation extends StatefulWidget {
attentionOperation({Key key}) : super(key: key);
_attentionOperationState createState() => _attentionOperationState();
}
class _attentionOperationState extends State<attentionOperation> with SingleTickerProviderStateMixin{
//动画控制器
Animation<double> tween;
AnimationController controller;
/*初始化状态*/
initState() {
super.initState();
/*创建动画控制类对象*/
controller = new AnimationController(
duration: const Duration(milliseconds: 200),
vsync: this);
/*创建补间对象*/
tween = new Tween(begin: 0.0, end: 1.0)
.animate(controller) //返回Animation对象
..addListener(() { //添加监听
setState(() {
// print(tween.value); //打印补间插值
});
});
controller.forward(); //执行动画
}
@override
Widget build(BuildContext context) {
return Container(
child: Container(
height: 140,
width: 300,
margin: EdgeInsets.fromLTRB(400-240*controller.value, 0, 0, 0),
child:ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
InkWell(
onTap: (){
controller.reverse(); //动画往返现执行
},
child: Container(
width: 100,
color: Colors.blue,
child: Center(
child: Text(
'置顶',
style: TextStyle(
color: Colors.white
),
),
),
),
),
InkWell(
onTap: (){
controller.reverse();
},
child: Container(
width: 100,
color: Colors.red,
child: Center(
child: Text(
'删除',
style: TextStyle(
color: Colors.white
),
),
),
),
)
],
)
),
);
}
}
列表布局代码
class AttPage extends StatefulWidget {
AttPage({Key key}) : super(key: key);
_AttPageState createState() => _AttPageState();
}
class _AttPageState extends State<AttPage> {
@override
Widget build(BuildContext context) {
List imageList=[
'https://img.alicdn.com/imgextra/i3/29795688/O1CN01KW7JKw1rt9Mx5rvUd_!!0-saturn_solar.jpg_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i3/57832447/O1CN01vAbfBB1TwlhtTBAas_!!0-saturn_solar.jpg_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i1/34525248/O1CN01jCNkMp1odd5Q8JdZa_!!2-saturn_solar.png_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i1/32794171/O1CN01pGHpqf1ggMWEBBfPn_!!0-saturn_solar.jpg_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i4/23653277/O1CN010cqOWE1a4uPGFMauo_!!0-saturn_solar.jpg_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i1/113995386/O1CN015JHEhb1pepl0Paa6E_!!0-saturn_solar.jpg_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i2/31099960/TB2zDAQcZfpK1RjSZFOXXa6nFXa_!!0-saturn_solar.jpg_220x220.jpg_.webp',
'https://img.alicdn.com/imgextra/i3/46531393/O1CN014gTo6E1MA2GAPaeqt_!!0-saturn_solar.jpg_220x220.jpg_.webp'
];
return Scaffold(
body: Provide<AttentionProvide>(
builder: (context,child,val){
return ListView.builder(
scrollDirection: Axis.vertical,
itemCount: imageList.length,
itemBuilder: (context,index){
return GestureDetector(
onHorizontalDragUpdate :(startDetail){
if(startDetail.delta.direction>0){
Provide.value<AttentionProvide>(context).isOpen(index); //控制那个列表打开操作列表
}
},
child: Stack(
children: <Widget>[
_item(context,index,imageList),
operationArea(context,index)
],
),
);
},
);
}),
);
}
}
Widget _item(context,index,imageList){
return InkWell(
onTap: (){
Application.router.navigateTo(context, "/attention?message=$index"); //跳转到另外一个页面
},
child: Container(
margin: EdgeInsets.fromLTRB(10, 20, 0, 0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container( //图片区域
width: 100,
height: 100,
child: Image.network(imageList[index]),
),
/****************start 信息区域************************/
Container(
margin: EdgeInsets.only(left: 5),
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.fromLTRB(5, 10, 0, 0),
child:Row(
children: <Widget>[
Text(
'SKU:123456'
),
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
'SKU:123456'
),
)
],
)
),
Container(
margin: EdgeInsets.fromLTRB(5, 10, 0, 0),
child:Row(
children: <Widget>[
Text(
'SKU:123456'
),
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
'SKU:123456'
),
)
],
)
),
Container(
margin: EdgeInsets.fromLTRB(5, 10, 0, 0),
child:Row(
children: <Widget>[
Text(
'SKU:123456'
),
Container(
margin: EdgeInsets.only(left: 15),
child: Text(
'SKU:123456'
),
)
],
)
),
/****************end 信息区域************************/
],
)
),
],
),
Divider()
],
)
),
);
}
//控制操作区域是否打开
Widget operationArea(context,index){
if(Provide.value<AttentionProvide>(context).operationArea==index){
return attentionOperation();
}else{
return Container(
child: null,
);
}
}
就是模拟微信的侧滑出现按钮控件，不过还是没有加上手势，只能用动画来代替，有兴趣的朋友可以看看，对手势和动画熟悉的小伙伴，希望可以跟你交流交流，一起弄一个组件出来。