In Compose können Sie mehrere Modifikatoren miteinander verketten, um das Erscheinungsbild einer zusammensetzbaren Funktion zu ändern. Diese Modifikatorketten können die Einschränkungen beeinflussen, die an zusammensetzbare Funktionen übergeben werden und die Grenzen für Breite und Höhe definieren.
Auf dieser Seite wird beschrieben, wie verkettete Modifikatoren Einschränkungen und damit die Messung und Platzierung von zusammensetzbaren Funktionen beeinflussen.
Modifikatoren in der Struktur der Benutzeroberfläche
Damit Sie nachvollziehen können, wie sich Modifikatoren gegenseitig beeinflussen, sollten Sie sich ansehen, wie sie in der UI-Struktur angezeigt werden, die während der Erstellungsphase generiert wird. Weitere Informationen findest du im Abschnitt Komposition.
In der UI-Struktur können Sie Modifikatoren als Wrapper-Knoten für die Layoutknoten visualisieren:
Wenn Sie einer zusammensetzbaren Funktion mehr als einen Modifikator hinzufügen, entsteht eine Kette von Modifikatoren. Wenn Sie mehrere Modifikatoren verketten, umschließt jeder Modifikatorknoten den Rest der Kette und den Layoutknoten darin. Wenn Sie beispielsweise einen clip
- und einen size
-Modifikator verketten, umschließt der clip
-Modifikatorknoten den size
-Modifikatorknoten, der dann den Image
-Layoutknoten umschließt.
In der Layoutphase bleibt der Algorithmus, der den Baum durchsucht, gleich, aber jeder Modifikatorknoten wird ebenfalls besucht. Auf diese Weise kann ein Modifikator die Größenanforderungen und die Platzierung des Modifikator- oder Layoutknotens ändern, den er umschließt.
Wie in Abbildung 2 gezeigt, besteht die Implementierung der zusammensetzbaren Funktionen Image
und Text
selbst aus einer Kette von Modifikatoren, die einen einzelnen Layoutknoten umschließen. Die Implementierungen von Row
und Column
sind einfache Layoutknoten, die beschreiben, wie ihre untergeordneten Elemente angeordnet werden.
Zusammenfassung:
- Modifikatoren schließen einen einzelnen Modifikator oder Layoutknoten ein.
- Layoutknoten können aus mehreren untergeordneten Knoten bestehen.
In den folgenden Abschnitten wird beschrieben, wie Sie mit diesem mentalen Modell die Modifikatorverkettung beurteilen und die Größe von zusammensetzbaren Funktionen beeinflussen.
Einschränkungen in der Layoutphase
Die Layoutphase folgt einem dreistufigen Algorithmus, um die Breite, Höhe und x- und y-Koordinaten jedes Layoutknotens zu ermitteln:
- Untergeordnete Elemente messen: Ein Knoten misst seine untergeordneten Elemente, falls vorhanden.
- Eigene Größe festlegen: Ein Knoten entscheidet anhand dieser Messungen über seine eigene Größe.
- Untergeordnete Knoten platzieren: Jeder untergeordnete Knoten wird relativ zur eigenen Position des Knotens platziert.
Constraints
helfen Ihnen, in den ersten beiden Schritten des Algorithmus die richtigen Größen für die Knoten zu finden. Einschränkungen definieren die Mindest- und Höchstgrenzen für die Breite und Höhe eines Knotens. Wenn der Knoten über seine Größe entscheidet, sollte seine gemessene Größe in diesen Größenbereich fallen.
Arten von Einschränkungen
Eine Einschränkung kann Folgendes sein:
- Begrenzt: Der Knoten hat eine maximale und eine minimale Breite und Höhe.
- Unbegrenzt: Der Knoten ist auf keine Größe beschränkt. Die Grenzen für die maximale Breite und Höhe sind auf unendlich festgelegt.
- Exakt: Der Knoten muss eine genaue Größenanforderung erfüllen. Die Mindest- und Höchstgrenzen sind auf denselben Wert festgelegt.
- Kombination: Der Knoten folgt einer Kombination der oben genannten Einschränkungstypen. Eine Einschränkung könnte beispielsweise die Breite begrenzen und gleichzeitig eine unbegrenzte maximale Höhe zulassen oder eine genaue Breite festlegen, aber eine begrenzte Höhe angeben.
Im nächsten Abschnitt wird beschrieben, wie diese Einschränkungen von einem übergeordneten Element an ein untergeordnetes Element übergeben werden.
So werden Einschränkungen von übergeordneten und untergeordneten Elementen übergeben
Im ersten Schritt des unter Einschränkungen in der Layoutphase beschriebenen Algorithmus werden Einschränkungen im UI-Baum vom übergeordneten zum untergeordneten Element übergeben.
Wenn ein übergeordneter Knoten seine untergeordneten Knoten misst, stellt er diese Einschränkungen für jedes untergeordnete Element bereit, um es darüber zu informieren, wie groß oder klein sie sein dürfen. Wenn es dann seine eigene Größe entscheidet, hält es auch die Einschränkungen ein, die von seinen eigenen übergeordneten Elementen übergeben wurden.
Auf übergeordneter Ebene funktioniert der Algorithmus so:
- Um zu entscheiden, welche Größe er tatsächlich belegen möchte, misst der Stammknoten im UI-Baum seine untergeordneten Elemente und leitet dieselben Einschränkungen an das erste untergeordnete Element weiter.
- Wenn das untergeordnete Element ein Modifikator ist, der sich nicht auf die Messung auswirkt, werden die Einschränkungen an den nächsten Modifikator weitergeleitet. Die Einschränkungen werden unverändert an die Modifikatorkette übergeben, es sei denn, ein Modifikator, der sich auf die Messung auswirkt, wird erreicht. Die Größe der Einschränkungen wird dann entsprechend angepasst.
- Wenn ein Knoten erreicht ist, der keine untergeordneten Knoten hat (als „Blattknoten“ bezeichnet), wird seine Größe anhand der übergebenen Einschränkungen festgelegt und diese aufgelöste Größe an das übergeordnete Element zurückgegeben.
- Das übergeordnete Element passt seine Einschränkungen basierend auf den Messungen dieses untergeordneten Elements an und ruft das nächste untergeordnete Element mit diesen angepassten Einschränkungen auf.
- Sobald alle untergeordneten Elemente eines übergeordneten Knotens gemessen wurden, entscheidet der übergeordnete Knoten über seine eigene Größe und sendet dies an sein eigenes übergeordnetes Element.
- Auf diese Weise wird der gesamte Baum zuerst tief durchquert. Schließlich haben sich alle Knoten über ihre Größe entschieden und der Schritt zur Messung ist abgeschlossen.
Ein detailliertes Beispiel finden Sie im Video Einschränkungen und Modifikatorreihenfolge.
Modifikatoren, die Einschränkungen beeinflussen
Im vorherigen Abschnitt haben Sie gelernt, dass sich einige Modifikatoren auf die Größe der Einschränkung auswirken können. In den folgenden Abschnitten werden bestimmte Modifikatoren beschrieben, die sich auf Einschränkungen auswirken.
size
-Modifikator
Der size
-Modifikator gibt die bevorzugte Größe des Inhalts an.
Die folgende UI-Struktur sollte beispielsweise in einem Container mit 300dp
von 200dp
gerendert werden. Die Einschränkungen sind begrenzt, sodass Breiten zwischen 100dp
und 300dp
und Höhen zwischen 100dp
und 200dp
möglich sind:
Der size
-Modifikator passt eingehende Einschränkungen an den an ihn übergebenen Wert an.
In diesem Beispiel ist der Wert 150dp
:
Wenn Breite und Höhe kleiner als die kleinste Einschränkung oder größer als die größte Einschränkungsgrenze sind, entspricht der Modifikator den übergebenen Einschränkungen so genau wie möglich, während die übergebenen Einschränkungen weiterhin eingehalten werden:
Die Verkettung mehrerer size
-Modifikatoren funktioniert nicht. Der erste size
-Modifikator legt sowohl die minimale als auch die maximale Einschränkung auf einen festen Wert fest. Auch wenn der zweite Größenmodifikator eine kleinere oder größere Größe anfordert, muss er dennoch exakt die übergebenen Grenzen einhalten, sodass diese Werte nicht überschrieben werden:
requiredSize
-Modifikator
Verwenden Sie den Modifikator requiredSize
anstelle von size
, wenn Ihr Knoten die eingehenden Einschränkungen überschreiben soll. Der requiredSize
-Modifikator ersetzt die eingehenden Einschränkungen und übergibt die von Ihnen angegebene Größe als exakte Grenzen.
Wenn die Größe wieder an den Baum übergeben wird, wird der untergeordnete Knoten im verfügbaren Bereich zentriert:
Modifizierer für width
und height
Der size
-Modifikator passt sowohl die Breite als auch die Höhe der Einschränkungen an. Mit dem width
-Modifikator können Sie eine feste Breite festlegen, die Höhe aber unentschlossen lassen.
Ebenso können Sie mit dem height
-Modifikator eine feste Höhe festlegen, die Breite jedoch unentschlossen lassen:
sizeIn
-Modifikator
Mit dem sizeIn
-Modifikator können Sie exakte minimale und maximale Einschränkungen für Breite und Höhe festlegen. Verwenden Sie den Modifikator sizeIn
, wenn Sie die Einschränkungen genau steuern möchten.
Beispiele
In diesem Abschnitt wird die Ausgabe mehrerer Code-Snippets mit verketteten Modifikatoren erläutert.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Dieses Snippet erzeugt die folgende Ausgabe:
- Der Modifikator
fillMaxSize
ändert die Einschränkungen, um sowohl die minimale Breite als auch die minimale Höhe auf den Maximalwert zu setzen:300dp
in der Breite und200dp
in der Höhe. - Auch wenn der
size
-Modifikator die Größe50dp
verwenden möchte, muss er die eingehenden Mindesteinschränkungen einhalten. Dersize
-Modifikator gibt also auch die exakten Einschränkungsgrenzen von300
durch200
aus und ignoriert dabei den Wert, der imsize
-Modifikator angegeben ist. Image
folgt diesen Grenzen und meldet eine Größe von300
nach200
, die bis zum Ende der Baumstruktur übergeben wird.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Dieses Snippet erzeugt die folgende Ausgabe:
- Der
fillMaxSize
-Modifikator passt die Einschränkungen an, um sowohl die Mindestbreite als auch die minimale Höhe auf den Maximalwert zu setzen:300dp
in der Breite und200dp
in der Höhe. - Der
wrapContentSize
-Modifikator setzt die Mindestbeschränkungen zurück. WährendfillMaxSize
zu festen Einschränkungen führte, setztwrapContentSize
den Parameter wieder auf die begrenzten Einschränkungen zurück. Der folgende Knoten kann jetzt wieder den gesamten Speicherplatz einnehmen oder kleiner als den gesamten Bereich sein. - Der
size
-Modifikator legt die Einschränkungen auf die Mindest- und Höchstwerte von50
fest. Image
wird in eine Größe von50
mal50
aufgelöst und der Modifikatorsize
leitet diese weiter.- Der
wrapContentSize
-Modifikator hat eine spezielle Eigenschaft. Sie stellt es in die Mitte der verfügbaren Mindestgrenzen, die an das untergeordnete Element übergeben wurden. Die Größe, die er mit seinen übergeordneten Elementen kommuniziert, entspricht somit den Mindestgrenzen, die an die Ebene übergeben wurden.
Indem Sie nur drei Modifikatoren kombinieren, können Sie eine Größe für die zusammensetzbare Funktion definieren und sie auf das übergeordnete Element zentrieren.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Dieses Snippet erzeugt die folgende Ausgabe:
- Der
clip
-Modifikator ändert die Einschränkungen nicht.- Der
padding
-Modifikator senkt die maximalen Beschränkungen. - Der
size
-Modifikator setzt alle Einschränkungen auf100dp
. Image
berücksichtigt diese Einschränkungen und meldet eine Größe von100
zu100dp
.- Mit dem Modifikator
padding
wird10dp
für alle Größen hinzugefügt, sodass Breite und Höhe im Bericht um20dp
erhöht werden. - In der Zeichenphase wird der
clip
-Modifikator jetzt auf einem Canvas von120
nach120dp
angewendet. Daher wird eine Kreismaske dieser Größe erstellt. - Der
padding
-Modifikator setzt dann den Inhalt für alle Größen um10dp
ein, sodass die Canvasgröße um100dp
auf100
verringert wird. - In diesem Canvas wird
Image
gezeichnet. Das Bild wird basierend auf dem ursprünglichen Kreis von120dp
abgeschnitten, sodass die Ausgabe ein nicht rundes Ergebnis ist.
- Der