材料滑动以在 Jetpack 中消除 用列而不是懒惰列组成

Question

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

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

@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

您可以使用键，它将使用相同的懒散列键＜/code>参数：

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

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