kotlin 如何在Android Jetpack Compose中创建一个可水平和垂直滚动的表格?

n3schb8v  于 2023-10-23  发布在  Kotlin
关注(0)|答案(1)|浏览(290)

我有一个用例,在这个用例中,我必须以一种可以垂直和水平滚动的方式呈现数据。我试着下面的一个片段。它们正在崩溃。

Column(
        modifier = Modifier
            .fillMaxWidth()
            .heightIn(250.dp, max = 350.dp)
            .shadow(5.dp)
            .clip(RoundedCornerShape(5.dp))
            .background(Color.White)
            .padding(top = 8.dp, bottom = 8.dp),
        horizontalAlignment = Alignment.Start,
        verticalArrangement = Arrangement.Top
   ) {
      // some randow text
      Text("text")
      ProgressBar()

      // drawing table here
      TableView(modifier, viewState)
   }

我的TableView代码是:

@Composable
    private fun TableView(modifier: Modifier, viewState: DashletsViewState) {
        val tableData = viewState.tableData
        val scrollState = rememberScrollState(0)
        val state = rememberLazyListState()
        if (!tableData.isNull()) {
            val rows = tableData.rows.size + 1
            val cols = tableData.columns.flatMap { it.child.orEmpty() }.size + 1
            Box {
                LazyColumn(
                    modifier = Modifier
                        .fillMaxSize(),
                ) {
                    items(rows) { rowIndex ->
                        Column {
                            LazyRow(
                                modifier = Modifier
                                    .wrapContentWidth(unbounded = true)
                                    .height(40.dp)
                                    .padding(8.dp)
                                    .background(if (rowIndex == 0) gray14 else Color.White)
                                    .horizontalScroll(scrollState),
                            ) {
                                items(cols) { colIndex ->
                                    Box(
                                        modifier = Modifier
                                            .size(40.dp)
                                            .padding(4.dp),
                                        contentAlignment = Alignment.Center,
                                    ) {
                                        // Content of each grid cell
                                        Text(
                                            text = "($rowIndex, $colIndex)",
                                            color = Color.Black,
                                        )
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

我使用单一的rememberScrollState()滚动所有的LazyRow s,它在Modifier.horizontalScroll(scrollState)处崩溃,错误消息是

Fatal Exception: java.lang.IllegalStateException
Horizontally scrollable component was measured with an infinity maximum width constraints, which is disallowed. One of the common reasons is nesting layouts like LazyRow and Row(Modifier.horizontalScroll()). 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 LazyRow 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.

有没有人能帮我解决这个问题。我被卡住了。或者我们可以在Jetpack Compose中以其他方式完成它?

nuypyhwy

nuypyhwy1#

你犯了两个致命的错误代码。

  1. wrapContentWidth(unbounded= true)这段代码使你的组件具有比最大能力更大的宽度。
    1.在LazyRow中,不能在Modifier上声明horizontalScroll属性。LazyRow会自动处理它。让我们试试这段代码:
    @可组合
private fun TableView(modifier: Modifier, viewState: DashletsViewState) {
    val tableData = viewState.tableData
    if (!tableData.isNull()) {
        val rows = tableData.rows.size + 1
        val cols = tableData.columns.flatMap { it.child.orEmpty() }.size + 1
        Box {
            LazyColumn(
                modifier = Modifier
                    .fillMaxSize(),
            ) {
                items(rows) { rowIndex ->
                    Column {
                        LazyRow(
                            modifier = Modifier
                                .height(40.dp)
                                .padding(8.dp)
                                .background(if (rowIndex == 0) Color.Gray else Color.White)
                        ) {
                            items(cols) { colIndex ->
                                Box(
                                    modifier = Modifier
                                        .size(30.dp)
                                        .padding(4.dp),
                                    contentAlignment = Alignment.Center,
                                ) {
                                    // Content of each grid cell
                                    Text(
                                        text = "($rowIndex, $colIndex)",
                                        color = Color.Black,
                                    )
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

相关问题