android compose list item 侧滑删除按钮

最新推荐文章于 2025-06-28 17:00:00 发布

GEOLO

最新推荐文章于 2025-06-28 17:00:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： android

本文链接：https://blog.youkuaiyun.com/GEOLO/article/details/131205991

文章介绍了如何在AndroidCompose中创建一个可侧滑删除的列表项组件。通过使用SwipeableState和Modifier.swipeable，配合FractionalThreshold和点击事件处理，当用户侧滑列表项超过预设阈值时，显示删除按钮并执行删除操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

您需要实现可侧滑删除的Android Compose列表项。以下是一个简单的实现：

创建一个自定义的列表项组件，例如 SwipeableListItem。
在 SwipeableListItem 组件中添加一个 SwipeableState 对象，用于跟踪侧滑状态。
在 SwipeableListItem 组件中添加一个 Modifier，使其可滑动。

Modifier.swipeable(
    state = swipeableState,
    anchors = mapOf(
        0f to SwipeDirection.Left,
        width.toFloat() to SwipeDirection.Right
    ),
    thresholds = { _, _ -> FractionalThreshold(0.3f) },
    orientation = Orientation.Horizontal
)

添加一个删除按钮，当侧滑距离超过阈值时，显示出来。

if (swipeableState.targetValue == SwipeDirection.Left) {
    Box(
        modifier = Modifier
            .fillMaxHeight()
            .background(MaterialTheme.colors.error)
            .align(Alignment.CenterEnd)
            .padding(end = 16.dp)
            .clickable { onDelete() }
    ) {
        Icon(
            Icons.Default.Delete,
            contentDescription = "Delete",
            tint = Color.White,
            modifier = Modifier.padding(16.dp)
        )
    }
}

完整代码示例：

@Composable
fun SwipeableListItem(
    text: String,
    onDelete: () -> Unit
) {
    val swipeableState = rememberSwipeableState(initialValue = SwipeDirection.None)

    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(64.dp)
            .swipeable(
                state = swipeableState,
                anchors = mapOf(
                    0f to SwipeDirection.Left,
                    width.toFloat() to SwipeDirection.Right
                ),
                thresholds = { _, _ -> FractionalThreshold(0.3f) },
                orientation = Orientation.Horizontal
            )
    ) {
        Text(
            text = text,
            modifier = Modifier
                .fillMaxSize()
                .background(MaterialTheme.colors.surface)
                .padding(horizontal = 16.dp)
                .align(Alignment.CenterStart)
        )

        if (swipeableState.targetValue == SwipeDirection.Left) {
            Box(
                modifier = Modifier
                    .fillMaxHeight()
                    .background(MaterialTheme.colors.error)
                    .align(Alignment.CenterEnd)
                    .padding(end = 16.dp)
                    .clickable { onDelete() }
            ) {
                Icon(
                    Icons.Default.Delete,
                    contentDescription = "Delete",
                    tint = Color.White,
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}

enum class SwipeDirection { Left, Right, None }