【Flutter 专题】117 图解 Dismissible 滑动清除 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

secondaryBackground 与 background 类似，仅支持在向上滑动或从右向左滑动方向上展示的背景 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’,