Jetpack Compose : 超简单实现侧滑删除

前言

侧滑删除可以说是开发中常见的功能之一,话不多说直接看效果图。

思路

通过Box堆叠并加上拖动手势实现,伪代码如下:

Kotlin 复制代码
Box {
	Box()
	Box(
		modifier = Modifier
                .graphicsLayer {
                    translationX = anchoredDraggableState.offset
                }
	)
}

拖动手势实现

AnchoredDraggable是compose提供的锚定状态的可拖动组件,我们可以通过它来实现拖动。

Kotlin 复制代码
    val minBound = 0f //描点的位置
    val maxBound = 100f //描点的位置
	
	val anchoredDraggableState = remember(maxBound) {
        AnchoredDraggableState(
            initialValue = checked,
            animationSpec = TweenSpec(durationMillis = 1000),
            anchors = DraggableAnchors {
                false at minBound
                true at maxBound
            },
            positionalThreshold = { distance -> distance * 0.5f }, //触发位置的阈值,这里设置0.5即中间位置时切换到下一个状态
            velocityThreshold = { maxBound } //拖动速度必须超过该阈值才能设置到下一个状态
        )
    }

完整代码

Kotlin 复制代码
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun SwipeBox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    bottomContent: @Composable BoxScope.() -> Unit,
    content: @Composable BoxScope.() -> Unit
) {
    var bottomWidth by remember { mutableFloatStateOf(0f) }
    var bottomHeight by remember { mutableStateOf(0) }
    val minBound = 0f
    val maxBound = -bottomWidth
    var forceAnimationCheck by remember { mutableStateOf(false) }
    val anchoredDraggableState = remember(maxBound) {
        AnchoredDraggableState(
            initialValue = checked,
            animationSpec = TweenSpec(durationMillis = 1000),
            anchors = DraggableAnchors {
                false at minBound
                true at maxBound
            },
            positionalThreshold = { distance -> distance * 0.5f },
            velocityThreshold = { maxBound }
        )
    }
    val currentOnCheckedChange by rememberUpdatedState(onCheckedChange)
    val currentChecked by rememberUpdatedState(checked)
    LaunchedEffect(anchoredDraggableState) {
        snapshotFlow { anchoredDraggableState.currentValue }
            .collectLatest { newValue ->
                if (currentChecked != newValue) {
                    currentOnCheckedChange?.invoke(newValue)
                    forceAnimationCheck = !forceAnimationCheck
                }
            }
    }
    LaunchedEffect(checked, forceAnimationCheck) {
        if (checked != anchoredDraggableState.currentValue) {
            anchoredDraggableState.animateTo(checked)
        }
    }

    Box(
        modifier = modifier
            .anchoredDraggable(
                state = anchoredDraggableState,
                orientation = Orientation.Horizontal,
                enabled = onCheckedChange != null
            )
            .clipToBounds()
    ) {
        Box(
            modifier = Modifier
                .align(Alignment.CenterEnd)
                .height(with(LocalDensity.current) {
                    bottomHeight.toDp()
                })
                .onSizeChanged {
                    bottomWidth = it.width.toFloat()
                }
        ) {
            bottomContent()
        }
        Box(
            modifier = Modifier
                .graphicsLayer {
                    translationX = anchoredDraggableState.offset
                }
                .onSizeChanged {
                    bottomHeight = it.height
                }
        ) {
            content()
        }
    }
}

如何使用

Kotlin 复制代码
var checked by remember { mutableStateOf(false) }
    SwipeBox(
        checked = checked,
        onCheckedChange = { checked = it },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        bottomContent = {
            Row {
                Box(
                    modifier = Modifier
                        .width(70.dp)
                        .fillMaxHeight()
                        .background(colorResource(R.color.blue))
                ) {
                    Text(
                        text = "标为未读",
                        modifier = Modifier.align(Alignment.Center),
                        style = TextStyle.Default.copy(
                            color = colorResource(R.color.white),
                            fontSize = 12.sp
                        )
                    )
                }
                Box(
                    modifier = Modifier
                        .width(70.dp)
                        .fillMaxHeight()
                        .background(colorResource(R.color.yellow))
                ) {
                    Text(
                        text = "不显示",
                        modifier = Modifier.align(Alignment.Center),
                        style = TextStyle.Default.copy(
                            color = colorResource(R.color.white),
                            fontSize = 12.sp
                        )
                    )
                }
                Box(
                    modifier = Modifier
                        .width(70.dp)
                        .fillMaxHeight()
                        .background(colorResource(R.color.red))
                ) {
                    Text(
                        text = "删除",
                        modifier = Modifier.align(Alignment.Center),
                        style = TextStyle.Default.copy(
                            color = colorResource(R.color.white),
                            fontSize = 12.sp
                        )
                    )
                }
            }
        }
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .background(colorResource(R.color.white))
                .padding(20.dp, 10.dp)
        ) {
            Text(
                text = "小美",
                color = colorResource(R.color.text_333),
                fontSize = 14.sp
            )
            Spacer(Modifier.size(5.dp))
            Text(
                text = "我的电脑坏了,你能过来看看嘛。",
                color = colorResource(R.color.text_666),
                fontSize = 12.sp
            )
        }
    }

Thanks

以上就是本篇文章的全部内容,如有问题欢迎指出,我们一起进步。

如果觉得本篇文章对您有帮助的话请点个赞让更多人看到吧,您的鼓励是我前进的动力。

谢谢~~

源代码地址

推荐阅读

相关推荐
PanZonghui2 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
言兴6 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常10 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常12 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc101816 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28123 分钟前
Chrome插件开发
前端
apihz31 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
前端 贾公子35 分钟前
Monorepo + vite 怎么热更新
前端
问道飞鱼1 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访