Modifikatoren für die Inhaltserstellung

Mit Modifikatoren können Sie ein Composeable verzieren oder ergänzen. Mit Modifikatoren können Sie Folgendes tun:

• Größe, Layout, Verhalten und Darstellung des Composeables ändern
• Informationen wie Labels für die Barrierefreiheit hinzufügen
• Nutzereingabe verarbeiten
• Fügen Sie allgemeine Interaktionen hinzu, z. B. dass ein Element anklickbar, scrollbar, verschiebbar oder zoombar ist.

Modifikatoren sind standardmäßige Kotlin-Objekte. Erstellen Sie einen Modifikator, indem Sie eine der Klassenfunktionen Modifier aufrufen:

@Composable
private fun Greeting(name: String) {
    Column(modifier = Modifier.padding(24.dp)) {
        Text(text = "Hello,")
        Text(text = name)
    }
}
ModifierSnippets.kt

Sie können diese Funktionen verketten, um sie zusammenzusetzen:

@Composable
private fun Greeting(name: String) {
    Column(
        modifier = Modifier
            .padding(24.dp)
            .fillMaxWidth()
    ) {
        Text(text = "Hello,")
        Text(text = name)
    }
}
ModifierSnippets.kt

Im obigen Code werden verschiedene Modifiziererfunktionen zusammen verwendet.

• padding fügt einem Element einen Abstand hinzu.
• Mit fillMaxWidth wird das zusammensetzbare Element auf die maximale Breite des übergeordneten Elements eingestellt.

Es wird empfohlen, dass alle Ihre Composeables einen modifier-Parameter akzeptieren und diesen Modifikator an das erste untergeordnete Element weitergeben, das die Benutzeroberfläche ausgibt. Dadurch wird Ihr Code wiederverwendbarer und sein Verhalten vorhersehbarer und intuitiver. Weitere Informationen finden Sie in den Richtlinien für die Compose API unter Elemente akzeptieren und respektieren einen Modifikatorparameter.

Reihenfolge der Modifikatoren ist wichtig

Die Reihenfolge der Modifikatorfunktionen ist wichtig. Da jede Funktion Änderungen an dem von der vorherigen Funktion zurückgegebenen Modifier vornimmt, wirkt sich die Reihenfolge auf das Endergebnis aus. Sehen wir uns ein Beispiel an:

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}
ModifierSnippets.kt

Im Code oben ist der gesamte Bereich anklickbar, einschließlich des umgebenden Abstands, da der Modifikator padding nach dem Modifikator clickable angewendet wurde. Wenn die Reihenfolge der Modifikatoren umgekehrt ist, reagiert der durch padding hinzugefügte Abstand nicht auf Nutzereingaben:

@Composable
fun ArtistCard(/*...*/) {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
        // rest of the implementation
    }
}
ModifierSnippets.kt

Hinweis :Die explizite Reihenfolge hilft Ihnen zu verstehen, wie verschiedene Modifikatoren miteinander interagieren. Vergleichen Sie dies mit dem ansichtenbasierten System, bei dem Sie das Box-Modell lernen mussten, dass Ränder „außerhalb“ des Elements angewendet wurden, aber Abstände „innerhalb“ des Elements, und dass ein Hintergrundelement entsprechend dimensioniert wurde. Durch das Design des Modifiers wird dieses Verhalten explizit und vorhersehbar. Außerdem haben Sie mehr Kontrolle, um genau das gewünschte Verhalten zu erzielen. Außerdem wird erklärt, warum es keinen Margen-, sondern nur einen padding-Modifikator gibt.

Integrierte Modifikatoren

Jetpack Compose bietet eine Liste vordefinierter Modifikatoren, mit denen Sie ein Compose-Element verzieren oder ergänzen können. Im Folgenden finden Sie einige gängige Modifikatoren, mit denen Sie Ihre Layouts anpassen können.

Hinweis: Viele dieser Modifikatoren sind so konzipiert, dass Sie das Layout Ihrer Benutzeroberfläche genau so gestalten können, wie Sie es benötigen. Weitere Informationen zur Funktionsweise von Modifikatoren in Ihrem Layout finden Sie in der Dokumentation Grundlagen des Layouts erstellen.

padding und size

Standardmäßig werden in Compose bereitgestellte Layouts umgebrochen. Sie können jedoch mit dem Modifikator size eine Größe festlegen:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(/*...*/)
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

Die von Ihnen angegebene Größe wird möglicherweise nicht berücksichtigt, wenn sie nicht den Einschränkungen des übergeordneten Elements des Layouts entspricht. Wenn die Größe des zusammensetzbaren Elements unabhängig von den eingehenden Einschränkungen festgelegt werden soll, verwenden Sie den Modifikator requiredSize:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            /*...*/
            modifier = Modifier.requiredSize(150.dp)
        )
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

In diesem Beispiel hat Image die Höhe 150.dp, auch wenn das übergeordnete Element height auf 100.dp festgelegt ist, da der Modifikator requiredSize Vorrang hat.

Hinweis :Layouts basieren auf Einschränkungen. Normalerweise übergibt das übergeordnete Element diese Einschränkungen an die untergeordneten Elemente. Das untergeordnete Element sollte die Einschränkungen einhalten. Das ist jedoch nicht immer das, was die Benutzeroberfläche erfordert. Es gibt Möglichkeiten, dieses Verhalten zu umgehen. Sie können beispielsweise Modifikatoren wie requiredSize direkt an das untergeordnete Element übergeben und die Einschränkungen überschreiben, die es vom übergeordneten Element erhalten hat. Sie können auch ein benutzerdefiniertes Layout mit einem anderen Verhalten verwenden. Wenn ein untergeordnetes Element seine Einschränkungen nicht einhält, wird es vom Layoutsystem vor dem übergeordneten Element ausgeblendet. Für das übergeordnete Element werden die Werte width und height des untergeordneten Elements so angezeigt, als wären sie auf die vom übergeordneten Element angegebenen Einschränkungen festgelegt. Das Layoutsystem zentriert das untergeordnete Element dann im vom übergeordneten Element zugewiesenen Bereich, vorausgesetzt, das untergeordnete Element hat die Einschränkungen eingehalten. Entwickler können dieses Zentrierungsverhalten überschreiben, indem sie dem untergeordneten Element wrapContentSize-Modifizierer hinzufügen.

Wenn ein untergeordnetes Layout die gesamte vom übergeordneten Layout zulässige Höhe einnehmen soll, fügen Sie den Modifikator fillMaxHeight hinzu. Compose bietet auch fillMaxSize und fillMaxWidth:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.size(width = 400.dp, height = 100.dp)
    ) {
        Image(
            /*...*/
            modifier = Modifier.fillMaxHeight()
        )
        Column { /*...*/ }
    }
}
ModifierSnippets.kt

Wenn Sie allen Seiten eines Elements einen Abstand hinzufügen möchten, legen Sie einen padding-Modifikator fest.

Wenn Sie über einer Textgrundlinie einen bestimmten Abstand vom oberen Rand des Layouts zur Grundlinie hinzufügen möchten, verwenden Sie den Modifikator paddingFromBaseline:

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(
                text = artist.name,
                modifier = Modifier.paddingFromBaseline(top = 50.dp)
            )
            Text(artist.lastSeenOnline)
        }
    }
}
ModifierSnippets.kt

Offset

Wenn Sie ein Layout relativ zu seiner ursprünglichen Position positionieren möchten, fügen Sie den Modifikator offset hinzu und legen Sie den Versatz auf der x- und y-Achse fest. Abweichungen können sowohl positiv als auch negativ sein. Der Unterschied zwischen padding und offset besteht darin, dass die Messwerte eines Composeables durch das Hinzufügen eines offset nicht geändert werden:

@Composable
fun ArtistCard(artist: Artist) {
    Row(/*...*/) {
        Column {
            Text(artist.name)
            Text(
                text = artist.lastSeenOnline,
                modifier = Modifier.offset(x = 4.dp)
            )
        }
    }
}
ModifierSnippets.kt

Der Modifikator offset wird horizontal gemäß der Layoutrichtung angewendet. Bei einem linksläufigen Kontext wird das Element durch eine positive offset nach rechts verschoben, bei einem rechtsläufigen Kontext nach links. Wenn Sie einen Offset festlegen möchten, ohne die Layoutrichtung zu berücksichtigen, sehen Sie sich den Modifikator absoluteOffset an. Bei einem positiven Offsetwert wird das Element immer nach rechts verschoben.

Der Modifikator offset hat zwei Überladungen: offset, bei der die Abweichungen als Parameter übergeben werden, und offset, bei der ein Lambda übergeben wird. Weitere Informationen dazu, wann Sie welche dieser Methoden verwenden und wie Sie die Leistung optimieren können, finden Sie im Abschnitt Leistung beim Komponieren – Lesevorgänge so lange wie möglich verschieben.

Bereichssicherheit in Compose

In Compose gibt es Modifikatoren, die nur auf untergeordnete Elemente bestimmter Composeables angewendet werden können. Compose erzwingt dies mithilfe benutzerdefinierter Bereiche.

Wenn Sie beispielsweise ein untergeordnetes Element so groß wie das übergeordnete Element Box machen möchten, ohne die Größe von Box zu beeinflussen, verwenden Sie den Modifikator matchParentSize. matchParentSize ist nur in BoxScope verfügbar. Daher kann es nur auf ein untergeordnetes Element innerhalb eines übergeordneten Box-Elements angewendet werden.

Mit dem Bereichsschutz können Sie keine Modifikatoren hinzufügen, die in anderen Composeable-Objekten und Bereichen nicht funktionieren. Außerdem sparen Sie Zeit, da Sie nicht durch Ausprobieren herausfinden müssen, welche Modifikatoren funktionieren.

Hinweis: Im Android View-System gibt es keine Gültigkeitsbeschränkung. Entwickler müssen in der Regel verschiedene Layoutparameter ausprobieren, um herauszufinden, welche berücksichtigt werden und welche Bedeutung sie im Kontext eines bestimmten übergeordneten Elements haben.

Mithilfe von bereichsspezifischen Modifikatoren werden Eltern über bestimmte Informationen informiert, die sie über das Kind wissen sollten. Sie werden auch als Modifikatoren für übergeordnete Daten bezeichnet. Ihre internen Funktionen unterscheiden sich von den Modifikatoren für allgemeine Zwecke, aber aus Sicht der Verwendung spielen diese Unterschiede keine Rolle.

matchParentSize in Box

Wie bereits erwähnt, verwenden Sie den Modifikator matchParentSize, wenn ein untergeordnetes Layout dieselbe Größe wie ein übergeordnetes Box haben soll, ohne dass sich die Größe von Box ändert.

Hinweis: matchParentSize ist nur im Bereich Box verfügbar. Das bedeutet, dass es nur auf direkte untergeordnete Elemente von Box-Kompositen angewendet werden kann.

Im folgenden Beispiel übernimmt das untergeordnete Element Spacer seine Größe von seinem übergeordneten Element Box, das wiederum seine Größe von den größten untergeordneten Elementen übernimmt, in diesem Fall von ArtistCard.

@Composable
fun MatchParentSizeComposable() {
    Box {
        Spacer(
            Modifier
                .matchParentSize()
                .background(Color.LightGray)
        )
        ArtistCard()
    }
}
ModifierSnippets.kt

Wenn anstelle von matchParentSize fillMaxSize verwendet würde, würde Spacer den gesamten für das übergeordnete Element verfügbaren Platz einnehmen, wodurch sich das übergeordnete Element ausdehnt und den gesamten verfügbaren Platz einnimmt.

weight in Row und Column

Wie Sie im vorherigen Abschnitt zu Abstand und Größe gesehen haben, wird die Größe eines Elements standardmäßig durch den Inhalt definiert, der umgebrochen wird. Mit dem weight-Modifikator, der nur in RowScope und ColumnScope verfügbar ist, können Sie die Größe eines Elements im übergeordneten Element flexibel festlegen.

Nehmen wir als Beispiel eine Row mit zwei Box-Kompositionen. Das erste Feld hat doppelt so viel weight wie das zweite, also doppelt so viel Breite. Da die Row 210.dp breit ist, ist die erste Box 140.dp breit und die zweite 70.dp:

@Composable
fun ArtistCard(/*...*/) {
    Row(
        modifier = Modifier.fillMaxWidth()
    ) {
        Image(
            /*...*/
            modifier = Modifier.weight(2f)
        )
        Column(
            modifier = Modifier.weight(1f)
        ) {
            /*...*/
        }
    }
}
ModifierSnippets.kt

Modifikatoren extrahieren und wiederverwenden

Mehrere Modifikatoren können miteinander verknüpft werden, um ein Composeable zu verzieren oder zu ergänzen. Diese Kette wird über die Modifier-Schnittstelle erstellt, die eine sortierte, unveränderliche Liste einzelner Modifier.Elements darstellt.

Jedes Modifier.Element steht für ein individuelles Verhalten, z. B. für das Layout, das Zeichnen und die Grafik, alle gestenbezogenen, Fokus- und semantischen Verhaltensweisen sowie Geräteeingabeereignisse. Die Reihenfolge ist wichtig: Modifizierelemente, die zuerst hinzugefügt werden, werden zuerst angewendet.

Manchmal kann es vorteilhaft sein, dieselben Modifikatorketteninstanzen in mehreren Composeable-Objekten wiederzuverwenden. Dazu werden sie in Variablen extrahiert und in einen höheren Gültigkeitsbereich verschoben. Dies kann aus mehreren Gründen dazu beitragen, die Lesbarkeit des Codes oder die Leistung Ihrer App zu verbessern:

• Die Neuzuweisung der Modifikatoren wird nicht wiederholt, wenn für Composables, in denen sie verwendet werden, eine Neuzusammensetzung erfolgt.
• Modifikatorketten können potenziell sehr lang und komplex sein. Wenn Sie dieselbe Instanz einer Kette wiederverwenden, kann die Arbeitslast der Compose-Laufzeit beim Vergleichen verringert werden.
• Diese Extraktion trägt zu einem übersichtlicheren, einheitlicheren und wartungsfreundlicheren Code in der gesamten Codebasis bei.

Best Practices für die Wiederverwendung von Modifikatoren

Erstellen Sie eigene Modifier-Ketten und extrahieren Sie sie, um sie für mehrere zusammensetzbare Komponenten wiederzuverwenden. Es ist völlig in Ordnung, nur einen Modifikator zu speichern, da es sich um datengestützte Objekte handelt:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)
ModifierSnippets.kt

Modifikatoren bei häufig wechselndem Status extrahieren und wiederverwenden

Wenn sich die Status in Composables häufig ändern, z. B. Animationen oder scrollState, kann es zu einer erheblichen Anzahl von Neuzusammensetzungen kommen. In diesem Fall werden Ihre Modifier bei jeder Neuzusammensetzung und potenziell für jeden Frame zugewiesen:

@Composable
fun LoadingWheelAnimation() {
    val animatedState = animateFloatAsState(/*...*/)

    LoadingWheel(
        // Creation and allocation of this modifier will happen on every frame of the animation!
        modifier = Modifier
            .padding(12.dp)
            .background(Color.Gray),
        animatedState = animatedState
    )
}
ModifierSnippets.kt

Stattdessen können Sie dieselbe Instanz des Modifiers erstellen, extrahieren und wiederverwenden und sie so an das Composeable übergeben:

// Now, the allocation of the modifier happens here:
val reusableModifier = Modifier
    .padding(12.dp)
    .background(Color.Gray)

@Composable
fun LoadingWheelAnimation() {
    val animatedState = animateFloatAsState(/*...*/)

    LoadingWheel(
        // No allocation, as we're just reusing the same instance
        modifier = reusableModifier,
        animatedState = animatedState
    )
}
ModifierSnippets.kt

Modifikatoren ohne Bereich extrahieren und wiederverwenden

Modifikatoren können ohne oder mit Gültigkeitsbereich für ein bestimmtes Kompositionalobjekt festgelegt werden. Modifier ohne Bereich können Sie ganz einfach außerhalb von Composables als einfache Variablen extrahieren:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)

@Composable
fun AuthorField() {
    HeaderText(
        // ...
        modifier = reusableModifier
    )
    SubtitleText(
        // ...
        modifier = reusableModifier
    )
}
ModifierSnippets.kt

Das kann besonders vorteilhaft sein, wenn es mit Lazy-Layouts kombiniert wird. In den meisten Fällen sollten alle Ihre Artikel (die möglicherweise sehr zahlreich sind) genau dieselben Modifikatoren haben:

val reusableItemModifier = Modifier
    .padding(bottom = 12.dp)
    .size(216.dp)
    .clip(CircleShape)

@Composable
private fun AuthorList(authors: List<Author>) {
    LazyColumn {
        items(authors) {
            AsyncImage(
                // ...
                modifier = reusableItemModifier,
            )
        }
    }
}
ModifierSnippets.kt

Modifikatoren mit Bereich extrahieren und wiederverwenden

Wenn Sie mit Modifikatoren arbeiten, die auf bestimmte Composeables beschränkt sind, können Sie sie auf die höchstmögliche Ebene extrahieren und bei Bedarf wiederverwenden:

Column(/*...*/) {
    val reusableItemModifier = Modifier
        .padding(bottom = 12.dp)
        // Align Modifier.Element requires a ColumnScope
        .align(Alignment.CenterHorizontally)
        .weight(1f)
    Text1(
        modifier = reusableItemModifier,
        // ...
    )
    Text2(
        modifier = reusableItemModifier
        // ...
    )
    // ...
}
ModifierSnippets.kt

Die extrahierten, auf einen bestimmten Bereich bezogenen Modifikatoren sollten nur an die direkten untergeordneten Elemente mit demselben Bereich übergeben werden. Weitere Informationen dazu, warum das wichtig ist, finden Sie im Abschnitt Sicherheitsbereich in Compose:

Column(modifier = Modifier.fillMaxWidth()) {
    // Weight modifier is scoped to the Column composable
    val reusableItemModifier = Modifier.weight(1f)

    // Weight will be properly assigned here since this Text is a direct child of Column
    Text1(
        modifier = reusableItemModifier
        // ...
    )

    Box {
        Text2(
            // Weight won't do anything here since the Text composable is not a direct child of Column
            modifier = reusableItemModifier
            // ...
        )
    }
}
ModifierSnippets.kt

Weitere Verknüpfung der extrahierten Modifikatoren

Sie können die extrahierten Modifikatorketten weiter verketten oder anhängen, indem Sie die Funktion .then() aufrufen:

val reusableModifier = Modifier
    .fillMaxWidth()
    .background(Color.Red)
    .padding(12.dp)

// Append to your reusableModifier
reusableModifier.clickable { /*...*/ }

// Append your reusableModifier
otherModifier.then(reusableModifier)
ModifierSnippets.kt

Denken Sie daran, dass die Reihenfolge der Modifikatoren wichtig ist.

Weitere Informationen

Eine vollständige Liste der Modifikatoren mit ihren Parametern und Bereichen finden Sie in diesem Hilfeartikel.

Weitere Übungen zur Verwendung von Modifikatoren finden Sie im Codelab zu grundlegenden Layouts in Compose oder im Repository „Jetzt in Android“.

Weitere Informationen zu benutzerdefinierten Modifikatoren und deren Erstellung finden Sie in der Dokumentation unter Benutzerdefinierte Layouts – Layout-Modifikator verwenden.