在 Jetpack Compose 中使用 Column 而不是 LazyColumn 来关闭材料滑动

Question

在我的 Jetpack Compose 项目中，我想使用 Material SwipeToDismiss 通过滑动删除一个项目。 在我的可组合中，我使用列表中的列而不是 LazyColumn。 问题是当项目被删除时，重新组合开始并且所有后续项目也被删除（因为下一个项目的dismissState似乎相同）。 例如，如果列有 7 个项目并且我删除了项目 #5，那么项目 #6 和项目 #7 也会被删除。

如果我使用具有固定高度的 LazyColumn（可能是因为键），它可以工作，但我只想要一个不滚动或固定高度的项目列表。 有什么建议可以让它运行吗？

@OptIn(ExperimentalMaterialApi::class)
@Composable
private fun DocumentationsList(
    modifier: Modifier = Modifier,
    task: DBTask,
    documentations: List<DBDocumentation>,
    onDocumentationDelete: (DBDocumentation) -> Unit,
) {

    Column(
        modifier = modifier
    ) {
        for ((index, documentation) in documentations.withIndex()) {

            var dismissState = rememberDismissState(initialValue = DismissValue.Default)
            if (dismissState.isDismissed(DismissDirection.EndToStart)) {
                onDocumentationDelete(documentation)
            }

            SwipeToDismiss(
                state = dismissState,
                modifier = Modifier.padding(vertical = 4.dp),
                directions = setOf(DismissDirection.EndToStart),
                dismissThresholds = { direction ->
                    FractionalThreshold(if (direction == DismissDirection.StartToEnd) 0.25f else 0.5f)
                },
                background = {
                    val direction = dismissState.dismissDirection ?: return@SwipeToDismiss
                    val color by animateColorAsState(
                        when (dismissState.targetValue) {
                            DismissValue.Default -> Color.LightGray
                            DismissValue.DismissedToEnd -> Color.Green
                            DismissValue.DismissedToStart -> Color.Red
                        }
                    )
                    val alignment = when (direction) {
                        DismissDirection.StartToEnd -> Alignment.CenterStart
                        DismissDirection.EndToStart -> Alignment.CenterEnd
                    }
                    val icon = when (direction) {
                        DismissDirection.StartToEnd -> Icons.Default.Done
                        DismissDirection.EndToStart -> Icons.Default.Delete
                    }
                    val scale by animateFloatAsState(
                        if (dismissState.targetValue == DismissValue.Default) 0.75f else 1f
                    )

                    Box(
                        Modifier.fillMaxSize().background(color).padding(horizontal = 20.dp),
                        contentAlignment = alignment
                    ) {
                        Icon(
                            icon,
                            contentDescription = "Localized description",
                            modifier = Modifier.scale(scale)
                        )
                    }
                },
                dismissContent = {
                    Card(
                        elevation = animateDpAsState(
                            if (dismissState.dismissDirection != null) 4.dp else 0.dp
                        ).value
                    ) {
                        
                        // Layout here
                    }
                }
            )
        }
    }

Answer 1

您可以使用可以使用相同LazyColumn key参数的key ：

Column(
    modifier = modifier
) {
    for ((index, documentation) in documentations.withIndex()) {
        key(uniqueKey) {
            // your view
        }
    }
}

这不应该是您的index ，因为它会在删除后更改为已删除项之下的所有项目，它应该是您集合中每个项目的唯一标识符。