Compose 有一項規(guī)則，即，子項只能測量一次，測量兩次就會引發(fā)運行時異常。

有時需要先收集一些關于子項的信息，然后再測量子項。

解決：借助固有特性，您可以先查詢子項，然后再進行實際測量。

對于可組合項，您可以查詢其 intrinsicWidth 或 intrinsicHeight：

• (min|max)IntrinsicWidth：給定此高度，可以正確繪制內容的最小/最大寬度是多少？
• (min|max)IntrinsicHeight：給定此寬度，可以正確繪制內容的最小/最大高度是多少？

1. 官方文檔舉了一個??：

「如果您查詢具有無限 width 的 Text 的 minIntrinsicHeight，它將返回 Text 的 height，就好像該文本是在單行中繪制的一樣。」

※ 請求固有特性測量不會兩次測量子項。 系統在測量子項前會先查詢其固有測量值，然后父項會根據這些信息計算測量其子項時使用的約束條件。

假設我們需要創(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) 可將其子項的高度強行調整為最小固有高度。由于該修飾符具有遞歸性，因此它將查詢 Row 及其子項 minIntrinsicHeight。

官方例子沒有添加高度，去掉.height(100.dp) 效果更加明顯

沒限制Monitor	限制Monitor

2. 自定義布局中的固有特性

創(chuàng)建自定義 Layout 或 layout 修飾符時，系統會根據近似值自動計算固有測量結果。因此，計算結果可能并不適用于所有布局。這些 API 提供了替換這些默認值的選項。

要指定自定義 Layout 的固有特性測量，則在創(chuàng)建該布局時替換 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 參數中可用的可組合的給定約束，也可以創(chuàng)建自己的約束。 對 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!")
    }
}