Compose 版面配置中的內建函式測量資料

Compose 的其中一項規則是只能測量子項一次。 測量子項兩次時，系統會擲回執行階段例外狀況。不過有時候，您必須先掌握子項的某些相關資訊，才能進行測量。

內建函式可讓您在實際測量前查詢子項相關資訊。

如果是可組合項，您可以查詢其 intrinsicWidth 或 intrinsicHeight：

  • (min|max)IntrinsicWidth：根據這個寬度，最小值/最大值 都能正確繪製內容
  • (min|max)IntrinsicHeight：依據這個高度，最小值/最大值 以及為內容繪製正確的高度？

舉例來說，如果您查詢 Text 的 minIntrinsicHeight，其中包含無限值 height，系統會傳回 Text 的 height，就像繪製在 一行。

內建函式實際使用狀況

假設我們要建立一個可組合項，在畫面上顯示兩個文字元素並以分隔線隔開，如下所示：

兩個文字元素並排顯示，中間有一個垂直的分隔線

我們該怎麼做？我們可以設定一個 Row，在當中有兩個 Text，展開為 而中間有 Divider我們希望 Divider 是 高度為最高 Text 和細 (width = 1.dp)。

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier) {
        Text(
            modifier = Modifier
                .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)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}
IntrinsicSnippets.kt

在預覽畫面上，我們可以看到 Divider 展開為整個螢幕，並且 這不是我們想要的：

兩個文字元素並排顯示，中間有一個垂直的分隔線，一直延伸至文字底部以下

之所以會發生這種情況，原因是 Row 會個別測量每個子項，而 Text 的高度無法用於限制 Divider。我們想讓 Divider 填滿指定高度的可用空間。想達到這個目的，我們可以使用 height(IntrinsicSize.Min) 修飾符。

height(IntrinsicSize.Min) 將子項的高度強制調整為 裝置的內建最小高度由於該修飾符有遞迴性，因此會查詢 Row 和其子項的 minIntrinsicHeight。

套用到我們的程式碼後，就能產生我們預期的結果：

@Composable
fun TwoTexts(modifier: Modifier = Modifier, text1: String, text2: String) {
    Row(modifier = modifier.height(IntrinsicSize.Min)) {
        Text(
            modifier = Modifier
                .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)
                .padding(end = 4.dp)
                .wrapContentWidth(Alignment.End),

            text = text2
        )
    }
}

// @Preview
@Composable
fun TwoTextsPreview() {
    MaterialTheme {
        Surface {
            TwoTexts(text1 = "Hi", text2 = "there")
        }
    }
}
IntrinsicSnippets.kt

預覽如下：

兩個文字元素並排顯示，中間有一個垂直的分隔線

Row 可組合項的 minIntrinsicHeight 將是其子項的 minIntrinsicHeight 上限。Divider 元素的 minIntrinsicHeight 為 0，因為在沒有限制的情況下不會佔用空間 已提供；Text minIntrinsicHeight 會是指定文字的 width。因此，Row 元素的 height 限制將是 Text 的 minIntrinsicHeight 上限。Divider 隨即會將其 height 擴展至 Row 指定的 height 限制。

自訂版面配置中的內建函式

建立自訂 Layout 或 layout 修飾符時，內建函式測量資料 會根據估計值自動計算因此，這些計算結果的正確性會依版面配置而異。這些 API 會提供覆寫這些預設值的選項。

如要指定自訂 Layout 的內建函式測量值， 覆寫 minIntrinsicWidth、minIntrinsicHeight、maxIntrinsicWidth 和下列項目的 maxIntrinsicHeight MeasurePolicy 介面。

@Composable
fun MyCustomComposable(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier,
        measurePolicy = object : MeasurePolicy {
            override fun MeasureScope.measure(
                measurables: List<Measurable>,
                constraints: Constraints
            ): MeasureResult {
                // Measure and layout here
                // ...
            }

            override fun IntrinsicMeasureScope.minIntrinsicWidth(
                measurables: List<IntrinsicMeasurable>,
                height: Int
            ): Int {
                // Logic here
                // ...
            }

            // Other intrinsics related methods have a default value,
            // you can override only the methods that you need.
        }
    )
}
IntrinsicSnippets.kt

建立自訂 layout 修飾符時，請在 LayoutModifier 介面中覆寫相關方法。

fun Modifier.myCustomModifier(/* ... */) = this then object : LayoutModifier {

    override fun MeasureScope.measure(
        measurable: Measurable,
        constraints: Constraints
    ): MeasureResult {
        // Measure and layout here
        // ...
    }

    override fun IntrinsicMeasureScope.minIntrinsicWidth(
        measurable: IntrinsicMeasurable,
        height: Int
    ): Int {
        // Logic here
        // ...
    }

    // Other intrinsics related methods have a default value,
    // you can override only the methods that you need.
}
IntrinsicSnippets.kt

上一頁
對齊線條
下一頁
ConstraintLayout