android 如何实现一个LazyColumn的多个表头和表体元素列表?

qxgroojn  于 2023-01-24  发布在  Android
关注(0)|答案(1)|浏览(698)

我想实现以下布局

所有的标题,如索赔要求的凭据,索赔收到的凭据,待定的请求等都是动态的,将来自后端和项目的每个标题,如模块1:...等也是动态的。我还需要card封装两个标题和正文项目。
以下是我尝试过的方法

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.
如何在排版中使用LazyColumn实现这种动态布局。在react-native中,使用SectionList可以轻松实现。

hfyxw5xn

hfyxw5xn1#

我觉得问题就在这里

LazyColumn(){
                        itemsIndexed(listOf(1,2,3)){ index, item ->
                            ManageCredentialItem()
                        }
                    }

您不能将LasyColumn嵌套在LazyColumn中,但可以像这样替换它:

Column {
    for (index, item in listOf(1, 2, 3).withIndex()) {
        ManageCredentialItem()
    }
}

相关问题