Systeminterne Messungen in Compose-Layouts

Eine der Regeln von Compose ist, dass Sie Ihre untergeordneten Elemente nur einmal messen sollten. Wenn Sie untergeordnete Elemente zweimal messen, wird eine Laufzeitausnahme ausgelöst. Manchmal benötigen Sie jedoch Informationen zu Ihren untergeordneten Elementen, bevor Sie sie messen.

Mit intrinsischen Messungen können Sie untergeordnete Elemente abfragen, bevor sie tatsächlich gemessen werden.

Sie können eine zusammensetzbare Funktion nach ihrem IntrinsicSize.Min oder IntrinsicSize.Max fragen:

• Modifier.width(IntrinsicSize.Min): Wie breit muss der Bildschirm mindestens sein, damit Ihre Inhalte richtig dargestellt werden?
• Modifier.width(IntrinsicSize.Max): Wie breit muss der Bildschirm maximal sein, damit Ihre Inhalte richtig angezeigt werden?
• Modifier.height(IntrinsicSize.Min): Wie hoch muss die Anzeige mindestens sein, damit Ihre Inhalte richtig dargestellt werden?
• Modifier.height(IntrinsicSize.Max): Wie hoch muss der Bereich maximal sein, damit Ihre Inhalte richtig angezeigt werden?

Wenn Sie beispielsweise die minIntrinsicHeight eines Text mit unendlichen width-Einschränkungen in einem benutzerdefinierten Layout abfragen, wird die height des Text mit dem Text in einer einzigen Zeile zurückgegeben.

Intrinsische Funktionen in Aktion

Du kannst eine zusammensetzbare Funktion erstellen, die zwei Texte auf dem Bildschirm anzeigt, die durch eine Trennlinie getrennt sind:

Verwenden Sie dazu ein Row mit zwei Text-Kompositionen, die den verfügbaren Platz ausfüllen, und ein Divider in der Mitte. Der Divider sollte so hoch wie der höchste Text und dünn (width = 1.dp) sein.

@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
        )
        VerticalDivider(
            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

Die Divider wird auf den gesamten Bildschirm maximiert, was nicht das gewünschte Verhalten ist:

Das liegt daran, dass Row jedes untergeordnete Element einzeln misst und die Höhe von Text nicht verwendet werden kann, um die Divider einzuschränken.

Wenn die Divider stattdessen den verfügbaren Platz mit einer bestimmten Höhe füllen soll, verwenden Sie den Modifikator height(IntrinsicSize.Min).

height(IntrinsicSize.Min) passt die Größe seiner untergeordneten Elemente so an, dass sie so hoch sind wie ihre minimale intrinsische Höhe. Da dieser Modifikator rekursiv ist, werden die minIntrinsicHeight der Row und ihrer untergeordneten Elemente abgefragt.

Wenn Sie diesen Modifikator auf Ihren Code anwenden, funktioniert er wie erwartet:

@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
        )
        VerticalDivider(
            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

Mit Vorschau:

Die Höhe des Row wird so bestimmt:

• Der minIntrinsicHeight-Wert des Row-Kompositums ist der maximale minIntrinsicHeight-Wert seiner untergeordneten Elemente.
• Der minIntrinsicHeight des Divider-Elements ist 0, da es keinen Platz einnimmt, wenn keine Einschränkungen angegeben sind.
• Der Text-minIntrinsicHeight ist der des Texts für eine bestimmte width.
• Daher wird die height-Einschränkung des Row-Elements zum maximalen minIntrinsicHeight der Texts.
• Der Divider erweitert dann seine height auf die height-Einschränkung, die vom Row vorgegeben wird.

Intrinsische Werte in benutzerdefinierten Layouts

Wenn Sie einen benutzerdefinierten Layout- oder layout-Modifikator erstellen, werden intrinsische Messungen automatisch anhand von Näherungswerten berechnet. Daher sind die Berechnungen möglicherweise nicht für alle Layouts korrekt. Diese APIs bieten Optionen zum Überschreiben dieser Standardeinstellungen.

Wenn Sie die intrinsischen Messungen Ihres benutzerdefinierten Layout angeben möchten, überschreiben Sie beim Erstellen die minIntrinsicWidth, minIntrinsicHeight, maxIntrinsicWidth und maxIntrinsicHeight der MeasurePolicy-Schnittstelle.

@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

Wenn Sie einen benutzerdefinierten layout-Modifikator erstellen, überschreiben Sie die zugehörigen Methoden in der LayoutModifier-Schnittstelle.

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