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

86 阅读1分钟

const Dismissible({ @required Key key, @required this.child, this.background, // 滑动背景展示 Widget this.secondaryBackground, // 与background相反滑动背景展示 Widget this.confirmDismiss, // 是否确定清除当前 Widget this.onResize, // 重新修改尺寸回调 this.onDismissed, // 确定清除回调 this.direction = DismissDirection.horizontal, // 滑动关闭方向 this.resizeDuration = const Duration(milliseconds: 300), // 修改尺寸时长 this.dismissThresholds = const <DismissDirection, double>{}, // 各方向滑动清除阀值 this.movementDuration = const Duration(milliseconds: 200), // 清除过程时长 this.crossAxisEndOffset = 0.0, this.dragStartBehavior = DragStartBehavior.start, })

分析源码可得,其中 key 是必须参数,key 作为 Widget 的唯一标识,对应滑动删除的组件,在列表中不建议直接用索引作为 key 的唯一标识,因为关闭窗口小部件可能会更改其他窗口小部件的索引;

案例源码

_listWid() => ListView.builder(itemCount: 20, itemBuilder: (context, index) => _disItem(index));

_listItem(index) { return Column(children: [ Container( height: 55.0, 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));

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)) ])))); }

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)) ])))); }

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('direction.toString()),child:Container(height:100.0,child:Center(child:Text({_direction.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))), ));

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: [