【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

margin: EdgeInsets.symmetric(horizontal: 20),
child: Row(children: [
Expanded(child: Text(‘当前 item = ${(index + 1)}’, style: TextStyle(fontSize: 16.0))),
Padding(child: Icon(Icons.lock_open, size: 14.0), padding: EdgeInsets.only(left: 10.0))
])),
Container(height: 0.5, color: Colors.grey)
]);
}

_disItem(index) => Dismissible(key: UniqueKey(), child: _listItem(index));

【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

1. background

background 为堆叠在 Dismissible 设置的 child 元素后的 Widget,在滑动过程中展示的背景 Widget;对于未设置 secondaryBackground 时,各个方向的滑动展示的背景均为 background

_backgroundWid() {
return Container( color: Colors.red,
child: Align( alignment: Alignment.centerRight,
child: Padding( padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.delete_forever, color: Colors.white, size: 18.0),
SizedBox(height: 5.0),
Text(‘Delete’, style: TextStyle(color: Colors.white))
]))));
}

【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

2. secondaryBackground

secondaryBackgroundbackground 类似,仅支持在向上滑动或从右向左滑动方向上展示的背景 Widget

_secondBackgroundWid() {
return Container( color: Colors.green,
child: Align( alignment: Alignment.centerLeft,
child: Padding( padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Column( mainAxisAlignment: MainAxisAlignment.center, mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.edit, color: Colors.white, size: 18.0),
SizedBox(height: 5.0),
Text(‘Edit’, style: TextStyle(color: Colors.white))
]))));
}

【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

3. direction

direction 为限制滑动关闭方向,在 onDismissed / confirmDismiss 中也可以进行判断;

  • DismissDirection.vertical 竖直方向,包括 up / down 两种
  • DismissDirection.horizontal 水平方向,包括 endToStart / startToEnd 两种
  • DismissDirection.endToStart 结束到开始方向(与语言设置的 rtlltr 相关),汉英等日常方向一般是从右至左
  • DismissDirection.startToEnd 开始到结束方向(与语言设置的 rtlltr 相关),汉英等日常方向一般是从左至右
  • DismissDirection.up 由下向上
  • DismissDirection.down 由上向下

return Padding(padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
child: Dismissible(
key: Key(’ d i r e c t i o n . t o S t r i n g ( ) ′ ) , c h i l d : C o n t a i n e r ( h e i g h t : 100.0 , c h i l d : C e n t e r ( c h i l d : T e x t ( ′ {_direction.toString()}'), child: Container(height: 100.0, child: Center(child: Text(' d​irection.toString()′),child:Container(height:100.0,child:Center(child:Text(′{_direction.toString()}’, style: TextStyle(color: Colors.white, fontSize: 16.0))),
decoration: BoxDecoration(color: _color, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(20.0))),
direction: _direction,
background: Container(decoration: BoxDecoration(color: Colors.grey, shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(20.0))),
));

【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

4. confirmDismiss & onDismissed & onResize

confirmDismiss 返回的是 Future 类型的数据,用于判断是否清除当前 Widget,返回 true 时清除此 Widget,否则将其移回到其原始位置;当返回 false / null 时,均不会进入 onDismissed / onResize 回调;其中 onDismissed 为确认清除当前 Widget 的回调,onResize 为当前 Widget 改变尺寸时的回调;在 confirmDismiss / onDismissed 中可以根据 direction 滑动方向进行单独判断;

_itemDialog(context, _direction) {
bool _value = false;
return showDialog(context: context,
builder: (context) {
return AlertDialog(
title: Row(children: [
Icon(Icons.settings), SizedBox(width: 8),
Text(_direction == DismissDirection.endToStart ? ‘Delete’ : ‘Edit’)
]),
content: Icon(_direction == DismissDirection.endToStart ? Icons.delete_forever : Icons.edit, color: _direction == DismissDirection.endToStart ? Colors.red : Colors.green),
actions: [
FlatButton(child: const Text(‘No’),
onPressed: () { Navigator.pop(context, true); _value = false; }),
FlatButton(child: const Text(‘Yes’),
onPressed: () { Navigator.pop(context, t

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

rue); _value = true; })
]); }).then((val) {
val = _value; return val;
});
}

【Flutter 专题】117 图解 Dismissible 滑动清除 Widget

5. dismissThresholds

dismissThresholds 可根据各方向设置不同的阀值,对应的是一个 Map 集合;范围在(0.0, 1.0) 之间,设置的阀值越大,代表滑动范围越大才可以触发 onDismissed 回调;

dismissThresholds: {
DismissDirection.startToEnd: 0.8,
DismissDirection.endToStart: 0.3
},

onDismissed 回调;

dismissThresholds: {
DismissDirection.startToEnd: 0.8,
DismissDirection.endToStart: 0.3
},

上一篇:div 内 文字居中方式


下一篇:leetcode 59. 插入区间 60. 排列序列