Question

我正在尝试在 Jetpack Compose 中实现一个包含 2 列的网格 UI。

我的要求是

每个项目的宽度必须是父宽度的一半（减去填充等）
高度必须相同，所以项目是一个正方形。
在这里面我应该可以做其他事情，比如在 weight 中使用 Column

这应该如下所示

<-- parent 
    width -->
 ____   ____
|    | |    |
|____| |____|

 ____   ____
|    | |    |
|____| |____|

 ... and more items

我使用下面的代码部分实现了这一点，但是高度似乎没有“发送”给孩子们。



// can use this inside a Column or LazyColumn
@Composable
fun TileRow() {
    Row(modifier = Modifier.fillMaxWidth()) {
        Box(modifier = Modifier.weight(1f, fill = true).padding(10.dp)) {
            TestTile()
        }

        Box(modifier = Modifier.weight(1f, fill = true).padding(10.dp)) {
               TestTile()
        }
    }
}

@Composable
fun TestTile (){
    Surface(
            color = Color.Red,
            modifier = Modifier
                    .layout { measurable, constraints ->
                        val placeable = measurable.measure((constraints))
                        //placeable.height = placeable.width // can't resize. height has a private setter
                        layout(placeable.width, placeable.width) {
                            placeable.place(x = 0, y = 0, zIndex = 0f)
                    }
            }.fillMaxSize() // fills the width, but not height, likely due to above layout
    ){
        Column {
            Text(text = "item1")
            Text(text = "item2 to fill",
                    modifier = Modifier
                            .weight(1f)) // this is gone when weight is added
            Text(text = "item3")
        }
    }
}

这会创建以下 UI。

看起来 Surface 布局正确，因为下一个 Row 有空间。但是该列似乎没有占据全部高度。这也意味着列项目的 weight() 不起作用。将 weight 修饰符添加到列子项会使它们消失。

如何解决上述问题，让孩子们知道身高并达到预期的效果？

作为参考，我正在使用 Jetpack Compose alpha09

更新：我曾尝试使用 preferredHeight(IntrinsicSize.Max) 并且它似乎工作得更好，但它确实需要将代码标记为 @ExperimentalLayout 所以不想使用它但如果有其他选择。

Answer 1

根据 TileRow 的宽度自行设置磁贴的约束条件：

layout { measurable, constraints ->
                val tileSize = constraints.maxWidth / columnCount

                val placeable = measurable.measure(constraints.copy(
                    minWidth = tileSize,
                    maxWidth = tileSize,
                    minHeight = tileSize,
                    maxHeight = tileSize,
                ))

                layout(placeable.width, placeable.width) {
                    placeable.place(x = 0, y = 0, zIndex = 0f)
                }
}

请参阅 LazyGrid 以获取完整示例

将可组合高度调整为与宽度相同

1 个答案: