Diese Seite wurde von der Cloud Translation API übersetzt.

Einschränkungen und Modifikatorreihenfolge

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:

Code für zusammensetzbare Funktionen und Modifikatoren sowie deren visuelle Darstellung als UI-Baum — **Abbildung 1**: Modifikatoren, die Layoutknoten in der Baumstruktur der Benutzeroberfläche zusammenfassen.

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.

Die Baumstruktur von vorher, aber jetzt ist jeder Knoten nur ein einfaches Layout mit vielen Modifikator-Wrapping-Knoten darum. — **Abbildung 2**: Dieselbe Baumstruktur wie in Abbildung 1, aber mit zusammensetzbaren Funktionen in der UI-Baum, dargestellt als Ketten von Modifikatoren.

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.

Begrenzte Einschränkungen verschiedener Größen innerhalb eines Containers. — **Abbildung 3.** Begrenzte Einschränkungen.

Unbegrenzt: Der Knoten ist auf keine Größe beschränkt. Die maximale Breite und Die Höhengrenzen sind auf unendlich gesetzt.

Unbegrenzte Einschränkungen, bei denen die Breite und Höhe auf unendlich gesetzt ist. Die Einschränkungen gehen über den Container hinaus. — **Abbildung 4**: Unbegrenzte Einschränkungen.

Exakt: Der Knoten muss eine genaue Größenanforderung erfüllen. Das Minimum und Höchstgrenzen sind auf denselben Wert festgelegt.

Genaue Einschränkungen, die einer genauen Größenanforderung innerhalb des Containers entsprechen. — **Abbildung 5.** Exakte Einschränkungen.

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.

Zwei Container, die Kombinationen aus begrenzten und unbegrenzten Einschränkungen sowie exakter Breite und Höhe anzeigen. — **Abbildung 6.** Kombinationen von begrenzten und unbegrenzten Beschränkungen und exakten Breiten und Unternehmenshöhe.

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:

Ein Teil einer UI-Struktur, in dem der Größenmodifikator einen Layoutknoten umschließt, und der
Darstellung der durch den Größenmodifikator in einem Container festgelegten begrenzten Einschränkungen. — **Abbildung 7**: Begrenzte Einschränkungen im UI-Baum und seine Darstellung in einem Container.

Der size-Modifikator passt eingehende Einschränkungen an den an ihn übergebenen Wert an. In diesem Beispiel ist der Wert 150dp:

Wie in Abbildung 7 dargestellt, mit dem Unterschied, dass der Größenmodifikator eingehende Einschränkungen an den übergebenen Wert anpasst. — **Abbildung 8**: Der `size`-Modifikator zum Anpassen der Beschränkungen auf `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:

Zwei UI-Baumstrukturen und ihre entsprechenden Darstellungen in Containern. In der ersten
Der Größenmodifikator akzeptiert die zunehmenden Einschränkungen. In der zweiten Anpassung passt sich der
Größenmodifikator an den
zu große Einschränkungen so genau wie möglich, was zu Beschränkungen führt, die den Container füllen. — **Abbildung 9**: Der `size`-Modifikator, der der übergebenen Einschränkung entspricht wie möglich.

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:

Eine Kette von zwei Größenmodifikatoren im UI-Baum und dessen Darstellung in einem Container
Dies ist das Ergebnis des ersten übergebenen Werts und nicht des zweiten Werts. — **Abbildung 10.** Eine Kette von zwei `size`-Modifikatoren, in der der zweite Wert übergeben wurde. in (`50dp`) überschreibt den ersten Wert (`100dp`) nicht.

`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:

Die in einem Benutzeroberflächenstruktur verkettete Modifikatorgröße für Größe und requiredSize sowie die entsprechenden
in einem Container dargestellt wird. Die Einschränkungen für requiredSize-Modifikatoren überschreiben den Größenmodifikator
Einschränkungen. — **Abbildung 11.** Der `requiredSize`-Modifikator, der eingehende Einschränkungen überschreibt aus den `size`-Modifikator.

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:

Zwei Benutzeroberflächenstrukturen, eine mit dem Modifikator für die Breite und die entsprechende Containerdarstellung und die andere
mit dem Höhenmodifikator und seiner Darstellung. — **Abbildung 12.** Der `width`-Modifikator und der `height`-Modifikator, die eine feste Breite festlegen und Höhe.

`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.

Ein UI-Baum mit dem Modifikator „sizeIn“, bei dem die minimale und maximale Breite und Höhe festgelegt sind,
und wie sie in einem Container dargestellt werden. — **Abbildung 13.** Der `sizeIn`-Modifikator mit `minWidth`, `maxWidth`, `minHeight` und `maxHeight` festgelegt.

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)
)ConstraintsModifiersSnippets.kt

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 und 200dp in die Höhe geschossen werden.
Auch wenn der size-Modifikator die Größe 50dp verwenden möchte, muss damit die geltenden Mindestbeschränkungen eingehalten werden. Der size-Modifikator wird also geben auch die genauen Einschränkungsgrenzen von 300 um 200 aus, Der Wert des size-Modifikator wird ignoriert.
Image folgt diesen Grenzen und meldet eine Größe von 300 bis 200, was bis zum Baum geleitet wird.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)ConstraintsModifiersSnippets.kt

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 und 200dp in Höhe.
Der wrapContentSize-Modifikator setzt die Mindestbeschränkungen zurück. Während fillMaxSize 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 von 50.
Image wird in eine Größe von 50 mal 50 aufgelöst und der size-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)
)ConstraintsModifiersSnippets.kt

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 auf 100dp.
- Image berücksichtigt diese Einschränkungen und meldet eine Größe von 100 durch 100dp
- Mit dem padding-Modifikator wird 10dp für alle Größen hinzugefügt, sodass der Bericht Breite und Höhe um 20dp.
- In der Zeichenphase wird der clip-Modifikator auf einem Canvas von 120 durch 120dp Daher wird eine Kreismaske dieser Größe erstellt.
- Der padding-Modifikator setzt dann seinen Inhalt für alle Größen um 10dp ein, sodass er verkleinert die Leinwandgröße um 100dp auf 100.
- In diesem Canvas wird Image gezeichnet. Das Bild wird basierend auf ursprünglicher Kreis von 120dp, sodass die Ausgabe ein nicht gerundetes Ergebnis ist.