flutter_slidable
一个 Flutter 实现的带有方向滑动操作的可滑动列表项，可以被Dismiss。
功能
- 接受主（左/上）和次（右/下）小部件列表作为滑动操作。
- 可以被关闭。
- 4 个内置布局。
- 2 个内置滑动操作小部件。
- 1 个内置关闭动画。
- 您可以轻松创建自定义布局和动画。
- 如果您想要在动画期间产生特殊效果，可以使用构建器来创建滑动操作。
- 点击滑动操作后关闭（可覆盖）。
- 当最近的
Scrollable开始滚动时关闭（可覆盖）。 - 轻松禁用滑动效果的选项。
入门
在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项
dependencies:
...
flutter_slidable: "^0.4.7"
在您的库中添加以下导入
import 'package:flutter_slidable/flutter_slidable.dart';
要开始使用 Flutter，请查看在线 文档。
构造函数
您可以通过两种方式创建 Slidable
- 调用
Slidable构造函数并传递滑动操作列表。 - 通过调用
Slidable.builder构造函数并传递滑动操作构建器，如果您想在动画期间产生特殊效果。
Slidable 需要几个要素
- 滑动操作（详情见下文）。它们可以是任何小部件。为了方便起见，此包提供了 2 个内置的侧边操作小部件。
- 一个代理。它控制滑动菜单的布局和动画。
- 滑动操作范围与项目范围之间的范围比。
- 一个子项。
actions 包含当子项向下或向右拖动时出现的操作。secondaryActions 包含当子项向上或向左拖动时出现的操作。
direction 参数可让您选择是希望操作在水平滑动（默认）还是垂直滑动时出现。
new Slidable(
delegate: new SlidableDrawerDelegate(),
actionExtentRatio: 0.25,
child: new Container(
color: Colors.white,
child: new ListTile(
leading: new CircleAvatar(
backgroundColor: Colors.indigoAccent,
child: new Text('$3'),
foregroundColor: Colors.white,
),
title: new Text('Tile n°$3'),
subtitle: new Text('SlidableDrawerDelegate'),
),
),
actions: <Widget>[
new IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () => _showSnackBar('Archive'),
),
new IconSlideAction(
caption: 'Share',
color: Colors.indigo,
icon: Icons.share,
onTap: () => _showSnackBar('Share'),
),
],
secondaryActions: <Widget>[
new IconSlideAction(
caption: 'More',
color: Colors.black45,
icon: Icons.more_horiz,
onTap: () => _showSnackBar('More'),
),
new IconSlideAction(
caption: 'Delete',
color: Colors.red,
icon: Icons.delete,
onTap: () => _showSnackBar('Delete'),
),
],
);
内置滑动操作
此包带有 2 种滑动操作
SlideAction，这是最灵活的。您可以选择背景颜色或任何装饰，并且它可以接受任何小部件作为子项。IconSlideAction，它需要一个图标。它可以有背景颜色并在图标下方有一个标题。
内置代理
此包带有 4 种代理
SlidableBehindDelegate
滑动操作在项目滑动时保持在项目后面。
SlidableScrollDelegate
滑动操作在项目滑动时跟随项目。
SlidableDrawerDelegate
当项目滑动时，滑动操作像抽屉一样进行动画。
SlidableStrechDelegate
项目滑动时，滑动操作会拉伸。
常见问题
如何阻止我的滑动操作在被点击后关闭？
默认情况下，SlideAction 和 IconSlideAction 在点击时关闭。
要防止这种情况，您可以在 closeOnTap 构造函数参数中传递 false。
如何阻止我的 Slidable 在我的列表滚动后关闭？
默认情况下，当最近的 Scrollable 小部件开始滚动时，Slidable 会关闭。
要防止这种情况，您可以在 closeOnScroll 构造函数参数中传递 false。
如何关闭我的 Slidable？
为了使您的 Slidable 可关闭，您必须在 Slidable 构造函数中设置 slideToDismissDelegate 参数。
您可以设置任何继承 SlideToDismissDelegate 的类。目前只有一个内置的：SlideToDismissDrawerDelegate。
传递给 onDismissed 回调的 actionType 会告知您哪个操作已被关闭。
当 Slidable 可关闭时，key 参数不能为空。
示例
slideToDismissDelegate: new SlideToDismissDrawerDelegate(
onDismissed: (actionType) {
_showSnackBar(
context,
actionType == SlideActionType.primary
? 'Dismiss Archive'
: 'Dimiss Delete');
setState(() {
items.removeAt(index);
});
},
),
如何防止一侧关闭但另一侧不关闭？
如果您只想让一侧可关闭，您可以将相关阈值设置为 1.0 或更高。
例如，如果您不想关闭第一个主操作，您将在 slideToDismissDelegate 上设置以下阈值：
dismissThresholds: <SlideActionType, double>{
SlideActionType.primary: 1.0
},
如何让用户取消关闭？
您可以通过在 slideToDismissDelegate 上设置 onWillDismiss 回调来让用户确认关闭。
示例
slideToDismissDelegate: new SlideToDismissDrawerDelegate(
onWillDismiss: (actionType) {
return showDialog<bool>(
context: context,
builder: (context) {
return new AlertDialog(
title: new Text('Delete'),
content: new Text('Item will be deleted'),
actions: <Widget>[
new FlatButton(
child: new Text('Cancel'),
onPressed: () => Navigator.of(context).pop(false),
),
new FlatButton(
child: new Text('Ok'),
onPressed: () => Navigator.of(context).pop(true),
),
],
);
},
);
},
...
),
如何只保留一个 Slidable 打开？
您必须将 Slidable 构造函数的 controller 参数设置为 SlidableController 实例。
final SlidableController slidableController = new SlidableController();
...
new Slidable(
key: new Key(item.title),
controller: slidableController,
...
);
