Jetpack Compose：如何让SwipeToDismiss在LazyRow中实现垂直滑动？

要在LazyRow里实现垂直方向的滑动删除，需要修改SwipeToDismiss的滑动方向配置，并调整相关布局和状态逻辑，以下是具体改动方案：

关键修改点： #

• 复用同一个DismissState：你当前代码中创建了dismissState但未在SwipeToDismiss中使用，而是重新创建了新状态，这会导致状态不统一，必须复用同一个实例。
• 指定垂直滑动方向：通过dismissDirections参数设置垂直方向的滑动规则（UpToDown和DownToUp）。
• 调整背景布局对齐：根据垂直滑动方向，修改背景容器的内容对齐方式，让图标显示在顶部或底部。
• 适配垂直方向的状态判断：更新颜色动画、状态判断的逻辑，对应垂直滑动的不同状态。

修改后的完整代码： #

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun DashboardDataState(dashboardCardModels: List<DashboardCardModel>) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(
                brush = Brush.verticalGradient(
                    colors = listOf(
                        backgroundStartColor,
                        backgroundEndColor
                    )
                )
            ),
        verticalArrangement = Arrangement.Center
    ) {
        LazyRow(modifier = Modifier.wrapContentSize()) {
            items(dashboardCardModels) { model ->
                val dismissState = rememberDismissState()

                // 处理滑动后的逻辑，比如移除item
                LaunchedEffect(dismissState.currentValue) {
                    when {
                        dismissState.isDismissed(DismissDirection.UpToDown) -> {
                            // 这里添加向下滑动后的操作，比如删除该item
                        }
                        dismissState.isDismissed(DismissDirection.DownToUp) -> {
                            // 这里添加上滑后的操作，比如标记已读
                        }
                    }
                }

                SwipeToDismiss(
                    state = dismissState,
                    // 指定垂直滑动方向
                    dismissDirections = setOf(DismissDirection.UpToDown, DismissDirection.DownToUp),
                    background = {
                        val color by animateColorAsState(
                            when (dismissState.targetValue) {
                                DismissValue.Default -> Color.White
                                DismissValue.DismissedToUp -> Color.Blue // 上滑状态颜色
                                DismissValue.DismissedToDown -> Color.Red // 下滑状态颜色
                            }
                        )
                        // 根据滑动方向调整图标对齐位置
                        val alignment = when (dismissState.targetValue) {
                            DismissValue.DismissedToUp -> Alignment.TopCenter
                            DismissValue.DismissedToDown -> Alignment.BottomCenter
                            else -> Alignment.Center
                        }
                        val icon = Icons.Default.Delete

                        val scale by animateFloatAsState(
                            if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f
                        )

                        Box(
                            Modifier
                                .fillMaxSize()
                                .background(color)
                                .padding(vertical = 20.dp), // 垂直方向内边距
                            contentAlignment = alignment
                        ) {
                            Icon(
                                icon,
                                contentDescription = "操作图标",
                                modifier = Modifier.scale(scale)
                            )
                        }
                    },
                    dismissContent = {
                        DashboardCard(model = model)
                    }
                )
            }
        }
    }
}

额外说明： #

• 如果只需要单一垂直方向（比如仅支持下滑删除），只需在dismissDirections中保留对应的方向即可。
• 滑动后的业务逻辑（如删除item）需要结合你的列表数据源处理，建议使用mutableStateListOf来存储dashboardCardModels，这样滑动删除后UI能自动更新。

内容的提问来源于stack exchange，提问作者Alon Shlider