Compose 有一項規(guī)則，即个少，子項只能測量一次洪乍，測量兩次就會引發(fā)運行時異常。
有時需要先收集一些關于子項的信息夜焦，然后再測量子項壳澳。
解決：借助固有特性，您可以先查詢子項茫经，然后再進行實際測量巷波。
對于可組合項，您可以查詢其 intrinsicWidth 或 intrinsicHeight：
- (min|max)IntrinsicWidth：給定此高度卸伞，可以正確繪制內(nèi)容的最小/最大寬度是多少抹镊？
- (min|max)IntrinsicHeight：給定此寬度，可以正確繪制內(nèi)容的最小/最大高度是多少荤傲？
1. 官方文檔舉了一個??：
「如果您查詢具有無限 width 的 Text 的 minIntrinsicHeight垮耳，它將返回 Text 的 height，就好像該文本是在單行中繪制的一樣遂黍≈辗穑」
※ 請求固有特性測量不會兩次測量子項。 系統(tǒng)在測量子項前會先查詢其固有測量值妓湘，然后父項會根據(jù)這些信息計算測量其子項時使用的約束條件查蓉。
假設我們需要創(chuàng)建一個可組合項，該可組合項在屏幕上顯示兩個用分隔線隔開的文本
我們可以將兩個 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) 可將其子項的高度強行調(diào)整為最小固有高度永丝。由于該修飾符具有遞歸性，因此它將查詢 Row 及其子項 minIntrinsicHeight箭养。
官方例子沒有添加高度慕嚷，去掉.height(100.dp) 效果更加明顯
| 沒限制Monitor | 限制Monitor |
|---|---|
 |
 |
2. 自定義布局中的固有特性
創(chuàng)建自定義 Layout 或 layout 修飾符時，系統(tǒng)會根據(jù)近似值自動計算固有測量結(jié)果毕泌。因此喝检，計算結(jié)果可能并不適用于所有布局。這些 API 提供了替換這些默認值的選項撼泛。
要指定自定義 Layout 的固有特性測量挠说，則在創(chuàng)建該布局時替換 MeasurePolicy 的 minIntrinsicWidth、minIntrinsicHeight愿题、maxIntrinsicWidth 和 maxIntrinsicHeight损俭。
定義布局的度量和布局行為。 Layout 和 MeasurePolicy 是 Compose 布局（如 Box抠忘、Column 等）的構(gòu)建方式撩炊，也可以用來實現(xiàn)自定義布局。
- 首先要做的是衡量可組合崎脉。 正如我們在 Compose 中的布局原則部分中提到的拧咳，您只能測量您的孩子一次。
fun Modifier.firstBaselineToTop(
firstBaselineToTop: Dp
) = this.then(
layout { measurable, constraints ->
...
}
)
- 通過調(diào)用 measurable.measure(constraints) 來衡量可組合囚灼。 調(diào)用 measure(constraints) 時骆膝，您可以傳入約束 lambda 參數(shù)中可用的可組合的給定約束，也可以創(chuàng)建自己的約束灶体。 對 Measurable 調(diào)用 measure() 的結(jié)果是一個 Placeable阅签，可以通過調(diào)用 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!")
}
}
