Jetpack Compose 找到父母的宽度/长度答案

【问题标题】：Jetpack Compose find parents width/lengthJetpack Compose 找到父母的宽度/长度
【发布时间】：2021-04-17 12:46:05
【问题描述】：

我想明确检索 fillMaxSize() 的值。假设我有：

    Box(Modifier
            .fillMaxSize()
            .background(Color.Yellow)) 
    {
var size = ?
Box(Modifier
            .size(someSize)
            .background(Color.Blue))
    {Text("Test")}

我想多次更改我的第二个 Box 的大小（可能源于某些视图模型），然后将其重置为 maxSize。

我该怎么做，我不知道任何“getMaxSize()”方法？

【问题讨论】：

标签： android layout android-jetpack-compose

【解决方案1】：

如果确实需要原始大小值，可以使用以下代码：

var size by remember { mutableStateOf(IntSize.Zero) }

Box(Modifier
    .fillMaxSize()
    .background(Color.Yellow)
    .onSizeChanged {
        size = it
    }
) {
    Box(
        Modifier
            .then(
                with(LocalDensity.current) {
                    Modifier.size(
                        width = size.width.toDp(),
                        height = size.height.toDp(),
                    )
                }
            )
            .background(Color.Blue)
    ) { Text("Test") }
}

但请注意，这在性能方面并不是最优的：此视图会被渲染两次。第一次第二个框的大小为零，然后调用onSizeChanged 块，然后第二次渲染视图。

如果在顶级视图中使用remember，请特别小心，因为更改状态会触发完整视图堆栈重新渲染。通常您希望将屏幕拆分为具有状态的视图，因此仅更改一个视图状态会重新呈现该视图。

您还可以使用BoxWithConstraints，您可以在BoxWithConstraintsScope 中获得maxWidth/maxHeight：它的代码更少，性能也更好。

BoxWithConstraints(
    Modifier
        .fillMaxSize()
        .background(Color.Yellow)
) {
    Box(
        Modifier
            .size(
                width = maxWidth,
                height = maxHeight,
            )
            .background(Color.Blue)
    ) { Text("Test") }
}

但通常如果您想指示大小依赖关系，使用不直接知道大小的修饰符就足够了。这是一种更“组合”的代码编写方式和更优化的方式。

所以如果你想让你的第二个盒子和第一个一样大，也可以在上面使用.fillMaxSize()。如果你想让它成为父母的一部分，你可以添加分数参数。要使第二个盒子大小是第一个盒子大小的一半，您可以：

Box(
    Modifier
        .fillMaxSize(fraction = 0.5f)
) { Text("Test") }

如果你想要不同的宽度/高度部分：

Box(
    Modifier
        .fillMaxWidth(fraction = 0.3f)
        .fillMaxHeight(fraction = 0.7f)
) { Text("Test") }

【讨论】：

【解决方案2】：

在您的第一个Box 中，您可以使用onGloballyPositioned 修饰符来获得size。
当内容的全局位置可能发生变化时，会使用 Layout 的最终 LayoutCoordinates 调用它。

然后使用coordinates.size得到第一个Box的大小。

var size by remember { mutableStateOf(Size.Zero)}

Box(
    Modifier
        .fillMaxSize()
        .background(Color.Yellow)
        .onGloballyPositioned { coordinates ->
            size = coordinates.size.toSize()
        }
        Box(){ /*....*/ }
)

【讨论】：