如何在撰写中为 LazyColumn 实现多个标题和正文元素列表？

Question

我想实现以下布局

所有标头（如声明请求的凭据、声明收到的凭据、待处理请求等）都是动态的，并且将来自后端，并且每个标头（如模块 1:... 等）的项目也是动态的。我还需要card封装 Header 和 Body 项目。

这是我尝试过的

LazyColumn(
        modifier = Modifier
            .offset(x = 0.dp, y = 110.dp)
            .fillMaxSize()
            .background(
                shape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
                color = MaterialTheme.colors.primaryVariant
            )
            .padding(12.dp)
    ) {
        itemsIndexed(
            listOf(
                "Claim requested credentials",
                "Claim received credentials",
                "Pending Requests"
            )
        ) { index, item ->
            Card(
                modifier = Modifier
                    .fillMaxWidth()
                    .statusBarsPadding()
                    .background(
                        color = MaterialTheme.colors.primaryVariant,
                        shape = RoundedCornerShape(10.dp)
                    )
                ,elevation = 20.dp,
                contentColor = MaterialTheme.colors.primaryVariant,
                backgroundColor = MaterialTheme.colors.primaryVariant
            ) {
                Column(modifier = Modifier.padding(horizontal = 8.dp, vertical = 12.dp)) {
                    ManageCredentialHeader(text = item, vcsNo = 2)
                    LazyColumn(){
                        itemsIndexed(listOf(1,2,3)){ index, item ->
                            ManageCredentialItem()
                        }
                    }
                }
            }
        }
    }

但我收到一条错误消息 java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

如何在compose中用LazyColumn实现这种动态布局。react-native使用 可以轻松实现这一点SectionList。

Answer 1

看起来你LazyColumn在这里需要一个单一的动态。

您不必只items在最顶层使用 - 如果您查看其源代码，您会发现它只是item在循环中添加 single。

您可以通过在另一个循环中添加多个项目来构建惰性内容，如下所示：

LazyColumn {
    listOf(
        "Claim requested credentials",
        "Claim received credentials",
        "Pending Requests"
    ).forEach { header ->
        item(
            contentType = "header"
        ) {
            Text(header)
        }
        items(
            count = 10,
            contentType = "body",
        ) { bodyIndex ->
            Text(bodyIndex.toString())
        }
    }
}