In Compose können Sie mehrere Modifikatoren verketten, um das Aussehen und die wie eine zusammensetzbare Funktion. Diese Modifikatorketten können sich auf die übergebenen Einschränkungen auswirken zu zusammensetzbaren Funktionen, die Breiten- und Höhengrenzen definieren.
Auf dieser Seite wird beschrieben, wie verkettete Modifikatoren Einschränkungen und die der Messung und Platzierung von zusammensetzbaren Funktionen.
Modifikatoren in der Struktur der Benutzeroberfläche
Um zu verstehen, wie sich Modifikatoren gegenseitig beeinflussen, ist es hilfreich, zu visualisieren, Sie erscheinen in der Benutzeroberfläche, die während der Erstellungsphase generiert wird. Für Weitere Informationen findest du im Abschnitt Komposition.
In der Benutzeroberfläche können Sie Modifikatoren als Wrapper-Knoten für das Layout visualisieren. Knoten:
<ph type="x-smartling-placeholder">Wenn Sie einer zusammensetzbaren Funktion mehr als einen Modifikator hinzufügen, entsteht eine Kette von Modifikatoren. Wann?
Wenn Sie mehrere Modifikatoren verketten, umschließt jeder Modifikatorknoten den Rest der Kette.
und den darin enthaltenen Layoutknoten. Wenn Sie beispielsweise clip
und ein
size
-Modifikatorknoten enthält der clip
-Modifikatorknoten den size
-Modifikatorknoten
das dann den Layoutknoten Image
umschließt.
In der Layout-Phase bleibt der Algorithmus, der den Baum durchführt, gleich, aber wird jeder Modifikatorknoten ebenfalls besucht. So kann ein Modifikator die Größe Anforderungen und die Platzierung des Modifikator- oder Layoutknotens, den er umschließt.
Wie in Abbildung 2 gezeigt, ist die Implementierung der zusammensetzbaren Funktionen Image
und Text
aus einer Kette von Modifikatoren bestehen, die einen einzelnen Layoutknoten umschließen. Die
Implementierungen von Row
und Column
sind einfache Layoutknoten, die beschreiben,
um ihre Kinder zu bestellen.
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 Gedankenmodell und wie sie die Größe zusammensetzbarer Funktionen beeinflusst.
Einschränkungen in der Layoutphase
In der Layoutphase wird ein dreistufiger Algorithmus verwendet, um die einzelnen Layouts zu finden. Breite, Höhe und X- und Y-Koordinate des Knotens:
- Untergeordnete Elemente messen: Ein Knoten misst seine untergeordneten Elemente, falls vorhanden.
- Eigene Größe festlegen: Auf der Grundlage dieser Messungen entscheidet ein Knoten für sich allein. Größe.
- Untergeordnete Knoten platzieren: Jeder untergeordnete Knoten wird relativ zum eigenen Knoten eines Knotens platziert. .
Constraints
helfen Ihnen dabei, die richtigen Größen für die Knoten in den ersten beiden zu finden.
Schritte des Algorithmus. Einschränkungen definieren die Mindest- und Höchstgrenzen für eine
die Breite und Höhe des Knotens. Wenn der Knoten über seine Größe entscheidet,
sollte 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 maximale Breite und Die Höhengrenzen sind auf unendlich gesetzt.
- Exakt: Der Knoten muss eine genaue Größenanforderung erfüllen. Das Minimum und Höchstgrenzen sind auf denselben Wert festgelegt.
- Kombination: Der Knoten folgt einer Kombination der oben genannten Einschränkungstypen. Eine Einschränkung könnte z. B. die Breite begrenzen und gleichzeitig ein unbegrenzte maximale Höhe festlegen 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 Kind.
So werden Einschränkungen von übergeordneten und untergeordneten Elementen übergeben
Im ersten Schritt des Algorithmus, der unter Einschränkungen im Layout beschrieben wird Phase werden Einschränkungen vom übergeordneten an das untergeordnete Element weitergegeben. in der Baumstruktur der Benutzeroberfläche.
Wenn ein übergeordneter Knoten seine untergeordneten Knoten misst, stellt er diese Einschränkungen für alle um ihnen mitzuteilen, wie groß oder klein sie sein dürfen. Wenn es dann bestimmt seine eigene Größe und hält sich auch an die vom ihren eigenen Eltern.
Auf übergeordneter Ebene funktioniert der Algorithmus so:
- Um die Größe zu bestimmen, enthält der Stammknoten im Baum misst seine untergeordneten Elemente und leitet dieselben Einschränkungen an sein erstes untergeordnetes Element weiter.
- Ist das untergeordnete Element ein Modifikator, der sich nicht auf die Messung auswirkt, leitet er den Parameter auf den nächsten Modifikator. Die Einschränkungen werden an den Modifizierer werden unverändert verkettet, es sei denn, ein Modifikator, der sich auf die Messung auswirkt, wird erreicht. Die Die Größe der Einschränkungen wird dann entsprechend angepasst.
- Sobald ein Knoten erreicht ist, der keine untergeordneten Elemente hat (als „Blatt Knoten") wird die Größe anhand der übergebenen Einschränkungen bestimmt. gibt diese aufgelöste Größe an das übergeordnete Element zurück.
- Das übergeordnete Element passt seine Einschränkungen basierend auf den Messungen dieses untergeordneten Elements an und das nächste untergeordnete Element mit diesen angepassten Einschränkungen aufruft.
- Sobald alle untergeordneten Elemente eines übergeordneten Knotens gemessen wurden, entscheidet der übergeordnete Knoten Größe und kommuniziert diese Information an das übergeordnete Element.
- Auf diese Weise wird der gesamte Baum zuerst tief durchquert. Schließlich wurden alle Knoten die sich für eine Größe entschieden haben, und der Schritt der Messung ist abgeschlossen.
Ein ausführliches Beispiel finden Sie unter Einschränkungen und Modifikatorreihenfolge. Video.
Modifikatoren, die Einschränkungen beeinflussen
Im vorherigen Abschnitt haben Sie gelernt, dass sich einige Modifikatoren auf die Einschränkung auswirken können. Größe. In den folgenden Abschnitten werden bestimmte Modifikatoren beschrieben, die sich auf Einschränkungen.
size
-Modifikator
Der size
-Modifikator gibt die bevorzugte Größe des Inhalts an.
Die folgende UI-Struktur sollte beispielsweise in einem Container von 300dp
gerendert werden.
von 200dp
Die Einschränkungen sind begrenzt, sodass Breiten zwischen 100dp
und
300dp
und Höhenangaben zwischen 100dp
und 200dp
:
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 Beschränkungsgrenze sind, oder größer als die größte Einschränkungsgrenze ist, entspricht der Modifikator der übergebenen so genau wie möglich unter Einhaltung der übergebenen in:
<ph type="x-smartling-placeholder">Die Verkettung mehrerer size
-Modifikatoren funktioniert nicht. Die ersten size
Modifikator legt sowohl die minimalen als auch die maximalen Beschränkungen auf einen festen Wert fest. Selbst wenn
wenn der zweite Größenmodifikator eine kleinere oder größere
Größe anfordert, muss dennoch
genau die übergebenen Grenzen einhalten, sodass diese Werte nicht überschrieben werden:
requiredSize
-Modifikator
Verwenden Sie den Modifikator requiredSize
anstelle von size
, wenn Sie
Knoten, um die eingehenden Einschränkungen zu überschreiben. 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ügbarer Speicherplatz:
<ph type="x-smartling-placeholder">Modifizierer für width
und height
Der size
-Modifikator passt sowohl die Breite als auch die Höhe der Einschränkungen an. Mit
width
-Modifikator verwenden, können Sie eine feste Breite festlegen, aber die Höhe unentschlossen lassen.
Ebenso können Sie mit dem height
-Modifikator eine feste Höhe festlegen,
Breite nicht entschieden:
sizeIn
-Modifikator
Mit dem sizeIn
-Modifikator können Sie exakte minimale und maximale Beschränkungen festlegen.
für Breite und Höhe. Verwenden Sie den sizeIn
-Modifikator, wenn Sie eine präzise Steuerung benötigen
die Einschränkungen zu übertreffen.
Beispiele
In diesem Abschnitt wird die Ausgabe verschiedener Code-Snippets mit verkettete Modifikatoren.
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 Mindestbreite und -höhe bis zum Maximalwert:300dp
in der Breite und200dp
in die Höhe geschossen werden. - Auch wenn der
size
-Modifikator die Größe50dp
verwenden möchte, muss damit die geltenden Mindestbeschränkungen eingehalten werden. Dersize
-Modifikator wird also geben auch die genauen Einschränkungsgrenzen von300
um200
aus, Der Wert dessize
-Modifikator wird ignoriert. Image
folgt diesen Grenzen und meldet eine Größe von300
bis200
, was bis zum Baum geleitet 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 Breite und Höhe bis zum Maximalwert:300dp
in Breite und200dp
in Höhe. - Der
wrapContentSize
-Modifikator setzt die Mindestbeschränkungen zurück. WährendfillMaxSize
führte zu festen Einschränkungen,wrapContentSize
setzt sie zurück Einschränkungen gelten. Der folgende Knoten kann jetzt den gesamten Speicherplatz belegen oder kleiner als die gesamte Fläche sein. - Der
size
-Modifikator setzt die Einschränkungen auf Mindest- und Höchstgrenzen von50
. Image
wird in eine Größe von50
mal50
aufgelöst und dersize
-Modifikator wird das leitet.- Der
wrapContentSize
-Modifikator hat eine spezielle Eigenschaft. Sie nimmt ihre und stellt es in die Mitte der verfügbaren Mindestgrenzen, übergeben wird. Die Größe, die es an seine übergeordneten Elemente kommuniziert, entspricht somit der Mindestgrenzen, die übergeben wurden.
Durch Kombinieren von nur drei Modifikatoren können Sie eine Größe für die zusammensetzbare Funktion und in der übergeordneten Ebene 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
durch100dp
- Mit dem
padding
-Modifikator wird10dp
für alle Größen hinzugefügt, sodass der Bericht Breite und Höhe um20dp
. - In der Zeichenphase wird der
clip
-Modifikator auf einem Canvas von120
durch120dp
Daher wird eine Kreismaske dieser Größe erstellt. - Der
padding
-Modifikator setzt dann seinen Inhalt für alle Größen um10dp
ein, sodass er verkleinert die Leinwandgröße um100dp
auf100
. - In diesem Canvas wird
Image
gezeichnet. Das Bild wird basierend auf ursprünglicher Kreis von120dp
, sodass die Ausgabe ein nicht gerundetes Ergebnis ist.
- Der