由于iOS原生列表功能很强大，系统自带的列表项的侧滑菜单功能，编辑功能等很方便使用，但是flutter中没有一个官方的组件可以支持，所以推荐一个新出的库可以供大家参考使用：flutter_swipe_action_cell。
先列出功能和相应的动图：简单删除
拉到左边一定距离后，执行第一个action
伴随折叠动画的删除
多于一个按钮时候的交互效果
点击后确认删除效果
确认删除适应按钮宽度
编辑模式
看到这里应该来说效果还是挺多的，具体的使用的代码就不贴了，大家可以去github上看，每种功能都提供了完全的demo代码，建议后续慢慢享用。下面要给大家讲的是一些其中的设计原理，代码实现逻辑等。由于其中设计的内容比较多，这里只给大家讲重点的两个内容：
-
整个控件的布局思路
-
手势判断逻辑以及动画处理
布局思路（省去了一些没有必要展示的层，这里主要是看结构和大致逻辑）
GestureDetector(
child: Stack(
children: [
///这里放编辑模式下的按钮
_buildSelectedButton(selected),
Transform.translate(
offset: currentOffset,
transformHitTests: false,
///这里就是你传进来的内容，外面包的transform用于改变位置
child: widget.child,
),
///在偏移量为0的时候（也就是没有拉出的状态），不会build其中的菜单按钮，而是只返回一个空的SizedBox
///可以提升一定的性能，因为大部分情况下菜单都是隐藏的
currentOffset.dx == 0 ? const SizedBox() : _buildActionButtons(),
],
),
);
在这里讲一下为什么要用Stack，之前有同学说为什么不用Row，因为他们想着可以这样放。
GestureDetector(
child: Row(
children: [
_buildSelectedButton(selected),
Transform.translate(
offset: currentOffset,
transformHitTests: false,
child: widget.child,
),
currentOffset.dx == 0 ? const SizedBox() : _buildActionButtons(),
],
),
);
这样当初我也思考过，也上手代码试过，但是最后放弃了，原因有两点：
-
在上面给的例子中，有一个折叠的删除动画，有一个细节就是在折叠动画执行的时候，最右边的那个按钮会覆盖整个cell，基于这个思想，我就想着要把按钮放到最上面，到时候直接让他的宽度等于cell的宽度即可完成。
-
在Row中，会有内部的宽度计算和约束，导致最后按钮的宽度计算出现问题，UI上也会有很奇怪的效果（我记得是会造成文字都挤在一起）。
所以最后用了Stack来作为基础的层。然后就是使用 Transform.translate，配合offset参数来做平移的交互，因为在Transform.translate中，你对offset进行改变，他内部的child是不会执行build的.因为在真实的业务开发中，一个列表项中可能有很多数据，包括文本，图片等，所以如果在手指交互的触发cell内部的内容build那将会是极差的性能体验。手势判断逻辑以及动画处理水平拖动手势交互
void _onHorizontalDragUpdate(DragUpdateDetails details) {
///performsFirstActionWithFullSwipe 代表是否支持一直往左拉
///来触发第一个action的事件，是一个iOS端原生的交互效果
if (widget.performsFirstActionWithFullSwipe) {
_updateWithFullDraggableEffect(details);
} else {
_updateWithNormalEffect(details);
}
}
可以看到，是否支持performsFirstActionWithFullSwipe参数，对于我们的拉动效果是有影响的，下面我们来看这两个方法：对于支持performsFirstActionWithFullSwipe
void _updateWithFullDraggableEffect(DragUpdateDetails details) {
///如果当前是往右拉，并且本身处于未拉出的位置，那么直接返回，不处理下面的逻辑
if (details.delta.dx >= 0 && currentOffset.dx >= 0.0) return;
///更新Offset，把这次的偏移量加到原来的offset中，从而更新offset
currentOffset += Offset(details.delta.dx, 0);
///这里默认是拉到cell四分之三的宽度，就触发第一个action的事件
if (currentOffset.dx < -0.75 * width) {
if (!lastItemOut) {
///让最后一个action拉出
pullLastButton(true);
lastItemOut = true;
///震动效果
HapticFeedback.heavyImpact();
}
} else {
if (lastItemOut) {
pullLastButton(false);
lastItemOut = false;
///震动效果
HapticFeedback.heavyImpact();
}
}
///如果当前cell的offset大于0，也就是往右的情况，那就置为0
///主要是为了防止快速操作造成的跳动
if (currentOffset.dx > 0) {
currentOffset = Offset.zero;
}
///判断完成，更新状态
setState(() {});
}
对于不支持performsFirstActionWithFullSwipe
void _updateWithNormalEffect(DragUpdateDetails details) {
///如果当前是往右拉，并且本身处于未拉出的位置，那么直接返回，不处理下面的逻辑
if (details.delta.dx >= 0 && currentOffset.dx >= 0.0) return;
///先解释一下下面的参数：
///1.往左拉的时候，currentOffset.dx是负值，所以算距离值需要在它上面乘 -1
///2.maxPullWidth 是最大的拉动距离，大于这个距离会有拖动阻尼
if (-currentOffset.dx > maxPullWidth && details.delta.dx < 0) {
///阻尼：就简单的用正常拖动距离 / 8 ,就不用二次函数了
currentOffset += Offset(details.delta.dx / 8, 0);
} else {
///若拉动距离在正常范围内，则正常更新offset
currentOffset += Offset(details.delta.dx, 0);
}
///同上，防止布局跳动
if (currentOffset.dx > 0) {
currentOffset = Offset.zero;
}
///计算完成，更新状态
setState(() {});
}
这两套逻辑是分开两个函数写的，也是为了好维护，因为能重用的代码其实不是很多，所以就没在拆了。抬手控制流程
void _onHorizontalDragEnd(DragEndDetails details) async {
if (lastItemOut && widget.performsFirstActionWithFullSwipe) {
CompletionHandler completionHandler = (delete) async {
if (delete) {
///外部执行了handler(true）,那么执行删除动画
///( 如果你不知道什么是handler，建议先移步pub看一下API ^_^ )
deleteWithAnim();
} else {
///否则退回到没有拉出的状态
lastItemOut = false;
closeWithAnim();
}
};
///执行第一个action的动作
widget.actions[0].onTap?.call(completionHandler);
} else {
///若没有开启performsFirstActionWithFullSwipe，执行下面逻辑
if (details.velocity.pixelsPerSecond.dx < 0) {
///若用户往左边清扫cell，那么执行打开动画
_openWithAnim();
return;
} else if (details.velocity.pixelsPerSecond.dx > 0) {
///若用户往右边清扫cell，那么执行关闭动画
closeWithAnim();
return;
}
///若拉出的距离小于（最大值 / 4），那么关闭cell，否则打开cell
if (-currentOffset.dx < maxPullWidth / 4) {
closeWithAnim();
} else {
_openWithAnim();
}
}
}
动画控制（这里主要是主要的动画）打开cell动画
///打开cell的动画
void _openWithAnim() {
///将AnimationController的value重置为0（注意锁值，不然这里会造成动画进度错误，下面会提到）
_resetAnimValue();
///拿到当前的offset
final double startOffset = currentOffset.dx;
///使用tween，开始的值就是现在的offset，结束的值就是最大的宽度值（注意正负，往左是负的）
animation = Tween<double>(begin: startOffset, end: -maxPullWidth)
.animate(curvedAnim)
..addListener(() {
///锁值，如果是在重设动画，那么就啥也不做
if (lockAnim) return;
///否则更新offset，更新状态
this.currentOffset = Offset(animation.value, 0);
setState(() {});
});
///执行动画
controller.forward();
}
其中_resetAnimValue()实现如下：
///重置动画
void _resetAnimValue() {
///用一个bool 代表锁，防止在重设AnimationController 的value的时候执行动画
lockAnim = true;
controller.value = 0.0;
lockAnim = false;
}
关闭cell动画
///关闭cell
void closeWithAnim() async {
///重设动画，不在赘述
_resetAnimValue();
if (mounted) {
///开始的值就是现在的offset，结束点是0，也即是回到最初始没有拉出的状态
animation =
Tween<double>(begin: currentOffset.dx, end: 0.0).animate(curvedAnim)
..addListener(() {
///同上
if (lockAnim) return;
this.currentOffset = Offset(animation.value, 0);
setState(() {});
});
///执行动画
controller.forward();
}
}
上面几乎就是该控件的主要处理逻辑，涉及到布局思路，手势监听，动画控制等多方面，当然，这个库还很年轻，1个月前才发布，也希望大家在使用的时候遇到问题能够提issue，提建议。
网友评论