手指轻轻一挥，轻松实现侧滑删除

2023-03-17 12:27:54

侧滑删除：赋能列表操作的优雅之举

在快节奏的科技圈，处理海量数据已成为家常便饭。经常有必要从列表中删除过时或不再需要的信息。那么，如何才能高效且优雅地完成这项任务呢？侧滑删除应运而生，成为解决这一痛点的最佳选择。

1. 侧滑删除的奥秘

侧滑删除的实现思路非常巧妙。将需要删除的项放置在一个Box中，并添加一个拖动手势。当用户的手指滑动到特定位置时，就会触发删除操作。这种交互方式直观流畅，让用户轻松掌控删除过程。

2. Jetpack Compose中的侧滑删除实践

为了让大家更深入地了解侧滑删除的实现，我们准备了一个详细的代码示例，使用的是Jetpack Compose框架：

@Composable
fun SideSwipeToDelete(
    item: Any,
    onDelete: (Any) -> Unit,
) {
    val anchorState = rememberSwipeableState(initialValue = SwipeableValue(0f))

    Box(
        Modifier
            .swipeable(
                state = anchorState,
                anchors = mapOf(
                    0f to SwipeableAnchor(
                        swipeDirection = SwipeDirection.StartToEnd
                    ),
                    -itemWidth.value to SwipeableAnchor(
                        swipeDirection = SwipeDirection.EndToStart
                    )
                ),
                thresholds = { _, _ -> FractionalThreshold(0.5f) }
            )
            .offset { IntOffset(anchorState.offset.value.toInt(), 0) }
    ) {
        // 你的项目内容放在这里
        TextButton(
            onClick = {
                anchorState.animateTo(SwipeableValue(-itemWidth.value))
                onDelete(item)
            }
        ) {
            Text("删除")
        }
    }
}