Compose 在函数后停止

Question

我想在我的应用程序中有两个 table，我使用代码作为 table 的模板。问题是当我调用 table 组件时，它之后的所有内容都不会被执行。 logcat 中没有显示任何错误或任何内容，所以我不知道是什么原因造成的。

主要：

Column {
    MyTable(someData = mylist) // will show

    
    Text(text = "Hello") // won't show
    MyTable(someData = mylist) // won't show
}

MyTable.kt

data class Cell(
    val name: String,
    val weight: Float
)

@Composable
fun RowScope.TableCell(...) { /* same as in the linked code */ }

@Composable
fun MyTable(data: List<Something>) {
    val columns = listOf(
        Cell("a", .25f),
        Cell("b", .25f),
        Cell("c", .25f),
        Cell("d", .25f)
    )

    LazyColumn(
        Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        item {
            Row {
                columns.forEach {
                    TableCell(
                        text = it.name,
                        weight = it.weight
                    )
                }
            }
        }

        itemsIndexed(data) { ind, item ->
            Row(Modifier.fillMaxWidth()) {
                TableCell(
                    text = item.somenumber.toString(),
                    weight = columns[0].weight
                )

                TableCell(
                    text = "Abc",
                    weight = columns[1].weight
                )

                TableCell(
                    text = item.somestring1,
                    weight = columns[2].weight
                )

                TableCell(
                    text = item.somestring2,
                    weight = columns[3].weight
                )
            }
        }
    }
}

Answer 1

您的 table 中的惰性列具有 fillMaxSize 修饰符，因此它将始终声明 parent 可以提供的所有 space。要在另一个下方显示一个 table，您必须将其设置为 wrapContentSize，这基本上违背了惰性列的全部目的。要正确地完成所有这些，您应该将所有内容嵌套在单个惰性列中。将 header 显示为一个简单项目，然后将行显示为 header 下方的项目。它会起作用，但根据我的经验，惰性列在性能方面还不存在（在具有不同 children 类型的惰性列的情况下）。所以也许对于那种特殊情况，我会坚持使用旧的 recyclerview

Answer 2

您应该从 LazyColumn()

中删除 fillMaxSize()

@Composable
    fun MyTable(data: List<Something>) {
        val columns = listOf(
            Cell("a", .25f),
            Cell("b", .25f),
            Cell("c", .25f),
            Cell("d", .25f)
        )

    LazyColumn(
        Modifier //Removed
            .padding(16.dp)
    ) {

Answer 3

正如@Jakoss 正确指出的那样，Column 内带有 Modifier.fillMaxHeight(1f /* default value */) 的第一个视图将占用所有可用的 space，因此其他视图不可见。

解决方案取决于您期望最终布局如何工作。

如果你想同时在屏幕上看到两个 table，并且每个都独立滚动，你可以将 Modifier.weight(1f) 应用到每个它们 - 这将使它们具有相同的大小和填充高度。此修饰符是 ColumnScope 的一部分，因此您需要将其作为 MyTable:

的参数传递

MyTable:

@Composable
fun MyTable(
    data: List<Something>
    modifier: Modifier,
) {
    // ..

    LazyColumn(
        modifier
            .padding(16.dp)
    ) {
        // ..

Main:

Column {
    MyTable(
        someData = mylist,
        modifier = Modifier
            .weight(1f)
    )

    Text(text = "Hello")

    MyTable(
        someData = mylist,
        modifier = Modifier
            .weight(1f)
    )
}

另一种情况是，如果您想要一个带有两个“subtable”的可滚动 table。在那种情况下，你应该只有一个“LazyColumn”，并且两个 subtables 作为里面的元素。像这样：

Main:

LazyColumn {
    myTableItems(data = mylist)
    item {
        Text(text = "Hello")
    }
    myTableItems(data = mylist)
}

myTableItems:

fun LazyListScope.myTableItems(data: List<Something>) {
    val columns = listOf(
        Cell("a", .25f),
        Cell("b", .25f),
        Cell("c", .25f),
        Cell("d", .25f)
    )
    item {
        Row {
            columns.forEach {
                TableCell(
                    text = it.name,
                    weight = it.weight
                )
            }
        }
    }

    itemsIndexed(data) { ind, item ->
        Row(Modifier.fillMaxWidth()) {
            TableCell(
                text = item.somenumber.toString(),
                weight = columns[0].weight
            )
            // other cells
        }
    }
}

Compose 在函数后停止

Compose stops after function

android

android-jetpack

android-jetpack-compose