Jetpack Compose 中如何获得可组合项的大小？

1. 使用 BoxWithConstraints 测量可组合项的大小

介绍

BoxWithConstraints 是一种类似于 Box 的布局，可以根据传入的测量约束条件定义自己的内容。

可以在内容 lambda 的作用域内找到 测量约束条件。您可以使用这些测量约束条件，为不同的屏幕配置组成不同的布局：

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("minHeight is $minHeight, maxHeight is $maxHeight, maxWidth is $maxWidth")
    }
}

如下是 API 中 BoxWithConstraints 的介绍：

BoxWithConstraints 的参数 propagateMinConstraints 表示是否应将传入的最小约束传递给内容。

// 根据测量约束的可用空间定义内容的可组合项（根据约束的最大高度，如果不能显示两个长方形则只显示一个）
@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        val rectangleHeight = 100.dp
        if (maxHeight < rectangleHeight * 2) {
            Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
        } else {
            Column {
                Box(Modifier.size(50.dp, rectangleHeight).background(Color.Blue))
                Box(Modifier.size(50.dp, rectangleHeight).background(Color.Gray))
            }
        }
    }
}

如何使用 BoxWithConstraints

使用 BoxWithConstraints 可组合项，参考以下步骤：

1. 在我们的布局中添加 BoxWithConstraints 可组合项。
2. 根据约束的参数确定可用空间，调整布局。

示例：

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        // 使用测量约束的参数访问父布局的约束
        if (maxWidth < 200.dp) {
            // TODO 调整在较小可用空间的布局
        } else {
            // TODO 调整在较大可用空间的布局
        }
    }
}

使用约束参数的 minWidth、maxWidth、minHeight 和 maxHeight 属性来访问父布局的尺寸。

2. 使用 onSizeChanged 或 OnGloballyPositionedModifier

还有另一种测量可组合项的方法：使用 Modifier.onSizeChanged 或 Modifier.globallyPositioned。当可组合项的坐标最终确定时，它将在渲染后调用。

onSizeChanged

Text(
    "Hello $name",
    Modifier.onSizeChanged { size ->
        println("The size of the Text in pixels is $size")
    }
)

OnGloballyPositionedModifier

Column(
    Modifier.onGloballyPositioned { coordinates ->
        // Column 的大小
        coordinates.size
        // Column 相对于应用程序窗口的位置
        coordinates.positionInWindow()
        // Column 相对于 Compose 跟节点的位置。
        coordinates.positionInRoot()
        // 提供给布局的对齐线（此处对于 Column 为空）
        coordinates.providedAlignmentLines
        // 与 Column 的父级相对应的 LayoutCooperatives 实例
        coordinates.parentLayoutCoordinates
    }
) {
    Box(Modifier.size(20.dp).background(Color.Green))
    Box(Modifier.size(20.dp).background(Color.Blue))
}

BoxWithConstraint 是在渲染之前测量大小，onSizeChanged 和 onGloballyPositioned 是在可组合项渲染之后调用。