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 可组合项，参考以下步骤：
- 在我们的布局中添加
BoxWithConstraints 可组合项。
- 根据约束的参数确定可用空间，调整布局。
示例：
@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 是在可组合项渲染之后调用。