Compose 有一项规则，即，子项只能测量一次，测量两次就会引发运行时异常。
有时需要先收集一些关于子项的信息，然后再测量子项。
解决：借助固有特性，您可以先查询子项，然后再进行实际测量。
对于可组合项，您可以查询其 intrinsicWidth 或 intrinsicHeight：
- (min|max)IntrinsicWidth：给定此高度，可以正确绘制内容的最小/最大宽度是多少？
- (min|max)IntrinsicHeight：给定此宽度，可以正确绘制内容的最小/最大高度是多少？
1. 官方文档举了一个🌰：
「如果您查询具有无限 width 的 Text 的 minIntrinsicHeight，它将返回 Text 的 height，就好像该文本是在单行中绘制的一样。」
※ 请求固有特性测量不会两次测量子项。 系统在测量子项前会先查询其固有测量值，然后父项会根据这些信息计算测量其子项时使用的约束条件。
假设我们需要创建一个可组合项，该可组合项在屏幕上显示两个用分隔线隔开的文本
我们可以将两个 Text 放在同一 Row，并在其中最大程度地扩展，另外在中间放置一个 Divider。我们需要将分隔线的高度设置为与最高的 Text 相同，粗细设置为 width = 1.dp。
用布局有好几种做法，可以用 ConstraintLayout约束布局，然后放两个TextView。 也可以用RelativeLayout 和LinearLayout包裹
// 测量
@Composable
fun TwoTexts(
text1: String,
text2: String,
modifier: Modifier = Modifier
) {
Row(modifier = modifier.height(IntrinsicSize.Min)) {
Text(
modifier = Modifier
.width(100.dp)
.height(100.dp)
.weight(1f)
.padding(start = 4.dp)
.wrapContentWidth(Alignment.Start),
text = text1
)
Divider(
color = Color.Black,
modifier = Modifier.fillMaxHeight().width(1.dp)
)
Text(
modifier = Modifier
.weight(1f)
.width(100.dp)
.height(100.dp)
.padding(end = 4.dp)
.wrapContentWidth(Alignment.End),
text = text2
)
}
}
@Preview
@Composable
fun TwoTextsPreview() {
MaterialTheme {
Surface {
TwoTexts(text1 = "Hi", text2 = "there")
}
}
}
要说名的是 Row(modifier = modifier.height(IntrinsicSize.Min))
去掉 modifier.height(IntrinsicSize.Min)
Row 会逐个测量每个子项，并且 Text 的高度不能用于限制 Divider。我们希望 Divider 以一个给定的高度来填充可用空间。为此，我们可以使用 height(IntrinsicSize.Min) 修饰符。
height(IntrinsicSize.Min) 可将其子项的高度强行调整为最小固有高度。由于该修饰符具有递归性，因此它将查询 Row 及其子项 minIntrinsicHeight。
官方例子没有添加高度，去掉.height(100.dp) 效果更加明显
| 没限制Monitor | 限制Monitor |
|---|---|
 |
 |
2. 自定义布局中的固有特性
创建自定义 Layout 或 layout 修饰符时，系统会根据近似值自动计算固有测量结果。因此，计算结果可能并不适用于所有布局。这些 API 提供了替换这些默认值的选项。
要指定自定义 Layout 的固有特性测量，则在创建该布局时替换 MeasurePolicy 的 minIntrinsicWidth、minIntrinsicHeight、maxIntrinsicWidth 和 maxIntrinsicHeight。
定义布局的度量和布局行为。 Layout 和 MeasurePolicy 是 Compose 布局（如 Box、Column 等）的构建方式，也可以用来实现自定义布局。
- 首先要做的是衡量可组合。 正如我们在 Compose 中的布局原则部分中提到的，您只能测量您的孩子一次。
fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout { measurable, constraints ->
...
}
)
- 通过调用 measurable.measure(constraints) 来衡量可组合。 调用 measure(constraints) 时，您可以传入约束 lambda 参数中可用的可组合的给定约束，也可以创建自己的约束。 对 Measurable 调用 measure() 的结果是一个 Placeable，可以通过调用 placeRelative(x, y) 来定位，
val placeable = measurable.measure(constraints)
对比一下
fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout { measurable, constraints ->
val placeable = measurable.measure(constraints)
// Check the composable has a first baseline
check(placeable[FirstBaseline] != AlignmentLine.Unspecified)
val firstBaseline = placeable[FirstBaseline]
// Height of the composable with padding - first baseline
val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
val height = placeable.height + placeableY
layout(placeable.width, height) {
// Height of the composable with padding - first baseline
val placeableY = firstBaselineToTop.roundToPx() - firstBaseline
val height = placeable.height + placeableY
layout(placeable.width, height) {
// Where the composable gets placed
placeable.placeRelative(0, placeableY)
}
}
}
)
@Preview
@Composable
fun TextWithPaddingToBaselinePreview() {
MaterialTheme {
Surface (color = MaterialTheme.colors.background){
Text("Hi there!", Modifier.firstBaselineToTop(32.dp))
}
}
}
@Preview
@Composable
fun TextWithNormalPaddingPreview() {
MaterialTheme {
Surface(color = MaterialTheme.colors.background) {
Text("Hi there!", Modifier.padding(top = 32.dp))
}
}
}
简单布局🌰：
@Composable
fun MyOwnColumn(
modifier: Modifier = Modifier,
content: @Composable () -> Unit
) {
Layout(
modifier = modifier,
content = content
) { measurables, constraints ->
// Don't constrain child views further, measure them with given constraints
// List of measured children
// val placeables = measurables.map { measurable ->
// // Measure each child
// measurable.measure(constraints)
// }
// // Set the size of the layout as big as it can
// layout(constraints.maxWidth, constraints.maxHeight) {
// // Place children
// }
// Don't constrain child views further, measure them with given constraints
// List of measured children
val placeables = measurables.map { measurable ->
// Measure each child
measurable.measure(constraints)
}
// Track the y co-ord we have placed children up to
var yPosition = 0
// Set the size of the layout as big as it can
layout(constraints.maxWidth, constraints.maxHeight) {
// Place children in the parent layout
placeables.forEach { placeable ->
// Position item on the screen
placeable.placeRelative(x = 0, y = yPosition)
// Record the y co-ord placed up to
yPosition += placeable.height
}
}
}
}
@Preview(
showBackground = true,
)
@Composable
fun BodyContent(modifier: Modifier = Modifier) {
MyOwnColumn(modifier.padding(8.dp)) {
Text("MyOwnColumn")
Text("places items")
Text("vertically.")
Text("We've done it by hand!")
}
}
