Compose布局中的内在测量

Compose 的规则之一是您应该只测量您的子元素一次；两次测量子元素会抛出运行时异常。但是，有时您需要在测量子元素之前了解一些关于子元素的信息。

Intrinsics允许您在实际测量子元素之前查询它们。

对于一个可组合项，您可以请求它的intrinsicWidth或intrinsicHeight

(min|max)IntrinsicWidth：给定此宽度，您可以正确绘制内容的最小/最大宽度是多少？
(min|max)IntrinsicHeight：给定此高度，您可以正确绘制内容的最小/最大高度是多少？

例如，如果您请求具有无限height的Text的minIntrinsicHeight，它将返回Text的高度，就像文本在一行中绘制一样。

实际应用中的Intrinsics

假设我们要创建一个可组合项，它在屏幕上显示用分隔符分隔的两段文本，如下所示

Two text elements side by side, with a vertical divider between them

我们该如何做到这一点？我们可以使用一个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
        )
        HorizontalDivider(
            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扩展到了整个屏幕，这不是我们想要的。

Two text elements side by side, with a divider between them, but the divider stretches down below the bottom of the text

发生这种情况是因为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
        )
        HorizontalDivider(
            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

带有预览

Two text elements side by side, with a vertical divider between them

Row可组合项的minIntrinsicHeight将是其子元素的最大minIntrinsicHeight。Divider元素的minIntrinsicHeight为0，因为如果没有给定约束，它不会占用空间；Text的minIntrinsicHeight将是在给定特定width的情况下文本的高度。因此，Row元素的height约束将是Text的最大minIntrinsicHeight。Divider然后将它的height扩展到Row给出的height约束。

自定义布局中的Intrinsics

在创建自定义Layout或layout修饰符时，内在测量值会根据近似值自动计算。因此，计算可能并不适用于所有布局。这些 API 提供了覆盖这些默认值的选择。

要指定自定义Layout的内在测量值，请在创建MeasurePolicy接口时，覆盖其minIntrinsicWidth、minIntrinsicHeight、maxIntrinsicWidth和maxIntrinsicHeight。

@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