用Flutter让列表侧滑更加丝滑

tech2025-02-12 9

/ 今日科技快讯 /

近日，OPPO方面称，“疫情防控逐渐常态化，市场稳步恢复。公司结合市场情况，调高了销售目标。下半年，我们整体预计销售量拉升至1亿部。”供应链消息人士称，“1亿的量可能达不到，预计会提升至8500万部。”OPPO近期海外拓展成绩斐然。据Counterpoint发布的最新报告显示，2020年第二季度，OPPO以20.3%的市场份额超越三星，成为东南亚智能手机出货量（环比增长8.6%）第一的手机品牌。三星在东南亚市场份额占比19.5%，环比增长3.2%，占据第二位。

/ 作者简介 /

本篇文章来自源能量的投稿，和大家分享了一个开源库来解决flutter列表侧滑的问题，相信会对大家有所帮助！同时也感谢作者贡献的精彩文章！

源能量的博客地址：

https://www.jianshu.com/u/9f0229b2ca4c

/ 正文 /

由于iOS原生列表功能很强大，系统自带的列表项的侧滑菜单功能，编辑功能等很方便使用，但是flutter中没有一个官方的组件可以支持，所以推荐一个新出的库可以供大家参考使用：flutter_swipe_action_cell。

https://github.com/luckysmg/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，提建议。