android - Jetpack Compose 找到 parent 的宽度/长度

Question

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

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

我想多次更改第二个 Box 的大小(可能来自某些 View 模型)，然后将其重置为 maxSize。
我该怎么做，我不知道任何“getMaxSize()”方法？

Answer 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") }
}

但请注意，这在性能方面并不是最优的:这个 View 被渲染了两次。第一次第二个盒子的大小为零，然后 onSizeChanged block 被调用，然后 View 被第二次渲染。
使用 remember 时要特别小心在顶级 View 中，因为更改状态将触发完整 View 堆栈重新渲染。通常您希望将屏幕拆分为具有状态的 View ，因此仅更改一个 View 状态会重新呈现该 View 。
您也可以使用 BoxWithConstraints在哪里可以获得 maxWidth/ maxHeight里面 BoxWithConstraintsScope : 它的代码少得多，性能也好一点。

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

但通常如果您想指示大小依赖关系，使用不直接知道大小的修饰符就足够了。它是一种更“组合”的代码编写方式，也是一种更优化的方式。
所以如果你想让你的第二个盒子和第一个一样大，只需使用 .fillMaxSize()也在上面。如果你想让它成为 parent 的一部分，你可以添加分数参数。要使第二个盒子大小为第一个盒子大小的一半，您可以:

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

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

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