Einschränkungen und Modifikatorreihenfolge

In Compose können Sie mehrere Modifikatoren verketten, um Aussehen und 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 im UI-Baum

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. Weitere Informationen finden Sie im Abschnitt Zusammensetzung.

Im UI-Baum können Sie Modifikatoren als Wrapper-Knoten für die Layoutknoten darstellen:

Abbildung 1: Modifikatoren, die Layoutknoten in der Baumstruktur der Benutzeroberfläche zusammenfassen.

Wenn du einem Composeable mehrere Modifikatoren hinzufügst, 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, umschließt der clip-Modifikatorknoten den size-Modifikatorknoten das dann den Layoutknoten Image umschließt.

In der Layout-Phase bleibt der Algorithmus, der den Baum fortsetzt, gleich, aber wird jeder Modifikatorknoten ebenfalls besucht. So kann ein Modifikator die Größenanforderungen und die Platzierung des Modifikators oder Layoutknotens ändern, um den Text einzufügen.

Wie in Abbildung 2 dargestellt, besteht die Implementierung der Image- und Text-Kompositen aus einer Kette von Modifikatoren, die einen einzelnen Layoutknoten umschließen. Die Implementierungen von Row und Column sind einfach Layoutknoten, die beschreiben, wie ihre untergeordneten Elemente angeordnet werden.

Abbildung 2: Die gleiche Struktur wie in Abbildung 1, aber mit Kompositionen im UI-Baum, die als Ketten von Modifikatoren dargestellt werden.

Zusammenfassung:

• Modifikatoren umschließen einen einzelnen Modifikator- oder Layoutknoten.
• Layoutknoten können aus mehreren untergeordneten Knoten bestehen.

In den folgenden Abschnitten wird beschrieben, wie Sie mit diesem Gedankenmodell und wie sich diese auf die Größe der zusammensetzbaren Funktionen auswirkt.

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:

1. Untergeordnete Elemente messen: Ein Knoten misst seine untergeordneten Elemente, falls vorhanden.
2. Eigene Größe festlegen: Auf der Grundlage dieser Messungen entscheidet ein Knoten für sich allein. Größe.
3. Untergeordnete Elemente platzieren: Jeder untergeordnete Knoten wird relativ zur Position eines Knotens platziert.

Constraints helfen, die richtigen Größen für die Knoten in den ersten beiden Schritten des Algorithmus zu finden. Mit Einschränkungen werden die Mindest- und Höchstwerte für die Breite und Höhe eines Knotens definiert. Wenn der Knoten über seine Größe entscheidet, sollte in diesen Größenbereich fallen.

Arten von Einschränkungen

Eine Einschränkung kann eine der folgenden sein:

• Begrenzt: Der Knoten hat eine maximale und eine minimale Breite und Höhe.

Abbildung 3: Begrenzte Einschränkungen.

• Unbegrenzt: Die Größe des Knotens ist nicht begrenzt. Die maximalen Werte für Breite und Höhe sind auf unendlich festgelegt.

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.

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.

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 untergeordnetes Element übergeben werden.

So werden Einschränkungen von übergeordneten auf untergeordnete Elemente ü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.

Der Algorithmus funktioniert im Groben so:

1. Um zu entscheiden, welche Größe er tatsächlich einnehmen möchte, misst seine untergeordneten Elemente und leitet dieselben Einschränkungen an sein erstes untergeordnetes Element weiter.
2. 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 unverändert an die Modifikatorkette übergeben, es sei denn, ein Modifikator wird erreicht, der sich auf die Analyse auswirkt. Die Einschränkungen werden dann entsprechend neu skaliert.
3. 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.
4. 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.
5. Sobald alle untergeordneten Elemente eines übergeordneten Elements gemessen wurden, entscheidet der übergeordnete Knoten über seine eigene Größe und teilt dies seinem übergeordneten Element mit.
6. So wird der gesamte Baum zuerst von oben nach unten durchlaufen. Schließlich haben sich alle Knoten für ihre Größe entschieden und der Messschritt ist abgeschlossen.

Ein ausführliches Beispiel finden Sie im Video Einschränkungen und Reihenfolge der Modifikatoren.

Modifikatoren, die sich auf Einschränkungen auswirken

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

Mit dem Modifikator size wird die bevorzugte Größe der Inhalte angegeben.

Beispielsweise sollte der folgende UI-Baum in einem Container mit 300dp × 200dp gerendert werden. Die Einschränkungen sind begrenzt, sodass Breiten zwischen 100dp und 300dp und Höhenangaben zwischen 100dp und 200dp:

Abbildung 7. Begrenzte Einschränkungen im UI-Baum und seine Darstellung in einem Container.

Mit dem Modifikator size werden eingehende Einschränkungen an den übergebenen Wert angepasst. In diesem Beispiel ist der Wert 150dp:

Abbildung 8. Der size-Modifikator, mit dem Einschränkungen an 150dp angepasst werden.

Wenn die Breite und Höhe kleiner als die kleinste Einschränkungsgrenze oder größer als die größte Einschränkungsgrenze sind, entspricht der Modifikator den übergebenen Einschränkungen so genau wie möglich, wobei die übergebenen Einschränkungen eingehalten werden:

Abbildung 9: Der size-Modifikator, der der übergebenen Einschränkung entspricht wie möglich.

Die Verknüpfung mehrerer size-Modifikatoren funktioniert nicht. Mit dem ersten size-Modifikator werden sowohl die Mindest- als auch die Höchsteinschränkungen auf einen festen Wert festgelegt. 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:

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 genaue Grenzen.

Wenn die Größe wieder an den Baum übergeben wird, wird der untergeordnete Knoten im verfügbarer Speicherplatz:

Abbildung 11. Der requiredSize-Modifikator überschreibt eingehende Einschränkungen vom size-Modifikator.

Modifizierer für width und height

Mit dem Modifizierer size werden sowohl die Breite als auch die Höhe der Einschränkungen angepasst. 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:

Abbildung 12. Der width-Modifikator und der height-Modifikator, die eine feste Breite festlegen und Höhe.

sizeIn-Modifikator

Mit dem Modifikator sizeIn können Sie genaue Mindest- und Höchstwerte für Breite und Höhe festlegen. Verwenden Sie den sizeIn-Modifikator, wenn Sie eine präzise Steuerung benötigen die Einschränkungen zu übertreffen.

Abbildung 13. Der sizeIn-Modifikator mit minWidth, maxWidth, minHeight und maxHeight festgelegt.

Beispiele

In diesem Abschnitt wird die Ausgabe mehrerer Code-Snippets mit verketteten Modifikatoren gezeigt und erläutert.

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

Dieses Snippet führt zur folgenden 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 Modifikator size gibt also auch die genauen Einschränkungsgrenzen von 300 × 200 aus und ignoriert dabei den im Modifikator size angegebenen Wert.
• 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 führt zur folgenden Ausgabe:

• Mit dem Modifikator fillMaxSize werden die Einschränkungen so angepasst, dass sowohl die Mindestbreite als auch die Mindesthöhe auf den Höchstwert festgelegt werden – 300dp in der Breite und 200dp in der Höhe.
• Der wrapContentSize-Modifikator setzt die Mindestbeschränkungen zurück. Während fillMaxSize zu festen Einschränkungen führte, setzt wrapContentSize sie zurück auf begrenzte Einschränkungen. 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 × 50 aufgelöst und der Modifikator size leitet diese weiter.
• Der wrapContentSize-Modifikator hat eine spezielle Eigenschaft. Das untergeordnete Element wird in die Mitte der verfügbaren Mindestgrenzen platziert, die ihm übergeben wurden. Die Größe, die an die übergeordneten Elemente gesendet wird, entspricht daher den Mindestgrenzwerten, die übergeben wurden.

Mit nur drei Modifikatoren können Sie eine Größe für das Composeable definieren und es im übergeordneten Element zentrieren.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .clip(CircleShape)
        .padding(10.dp)
        .size(100.dp)
)
ConstraintsModifiersSnippets.kt

Dieses Snippet führt zu folgender 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 Modifizierer padding verschiebt den Inhalt dann in allen Größen um 10dp, wodurch die Canvas-Größe um 100dp auf 100 verringert wird.
  • Die Image wird in diesem Canvas gezeichnet. Das Bild wird anhand des ursprünglichen Kreises von 120dp zugeschnitten, sodass das Ergebnis nicht rund ist.