用Flutter让列表侧滑更加丝滑

最新推荐文章于 2024-08-10 07:01:40 发布

2401_84009993

最新推荐文章于 2024-08-10 07:01:40 发布

阅读量798

点赞数 19

分类专栏：程序员文章标签： flutter

本文链接：https://blog.csdn.net/2401_84009993/article/details/138680057

版权

程序员专栏收录该内容

247 篇文章 0 订阅

订阅专栏

在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(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(begin: currentOffset.dx, end: 0.0).animate(curvedAnim)
…addListener(() {
///同上
if (lockAnim) return;
this.currentOffset = Offset(animation.value, 0);
setState(() {});
});

最后，如果大伙有什么好的学习方法或建议欢迎大家在评论中积极留言哈，希望大家能够共同学习、共同努力、共同进步。

小编在这里祝小伙伴们在未来的日子里都可以升职加薪，当上总经理，出任CEO，迎娶白富美，走上人生巅峰！！