UIListLayout

Veraltete anzeigen

*Dieser Inhalt wurde mit KI (Beta) übersetzt und kann Fehler enthalten. Um diese Seite auf Englisch zu sehen, klicke hier.

Eine UIListLayout Positionen-Sibling-UI-Elemente in Zeilen oder Spalten innerhalb des übergeordneten UI-Containers, basierend auf der FillDirection.Die und Eigenschaften jedes Geschwisters werden entweder ignoriert oder durch das Listenlayout überschrieben, während jedes Geschwister seine definierte Eigenschaft behält, es sei denn, das Layout wird konfiguriert, um ein Flex-Layout zu verwenden.Siehe Liste und Flex-Layouts für weitere Informationen.

UIListLayouts illustrating FillDirection of either horizontal
or vertical.

Um die Anordnung der Geschwister zu steuern, stellen Sie SortOrder auf Enum.SortOrder.Name oder Enum.SortOrder.LayoutOrder ein, dann umbenennen Sie Geschwister in alphabetischer Reihenfolge oder legen ihren LayoutOrder Wert fest, jeweils entsprechend. UIListLayout wird automatisch Elemente neu anordnen, wenn Elemente hinzugefügt/entfernt werden oder wenn sich die Änderungen eines gleichgeordnetes Teilvon Name oder LayoutOrder ändern.

List layout examples illustrating numerical LayoutOrder
sorting or alphanumerical Name sorting.

Das Ausfüllen zwischen Geschwistern wird durch die EigenschaftenPadding gesteuert, und das Umfassen innerhalb der Grenzen des Elterncontainers durch die Eigenschaft Wraps boolean.Die Ausrichtung der Geschwister innerhalb des Elterncontainers wird durch HorizontalAlignment und VerticalAlignment gesteuert, es sei denn, die Anordnung wird konfiguriert, um ein flexibles Layout zu verwenden.

Beachten Sie, dass es Leistungseinschränkungen gibt, wenn eine flexibel aktivierte Listenlayout verwendet wird, da zusätzliche Berechnungen erforderlich sind, um Flex-Basisgrößen, flexierte Größen und Zeilenwickeln zu berechnen.Flex ist auf einer aktiviert, wenn die folgenden Eigenschaften festlegensind, oder wenn irgendein Bruder mit ihm verwandt ist:

Zusammenfassung

Eigenschaften

Eigenschaften von UIGridStyleLayout übernommen

Eigenschaften

HorizontalFlex

Parallel lesen

Wenn die Liste des Layouts FillDirection auf Enum.FillDirection.Horizontal gesetzt ist, gibt die Eigenschaft HorizontalFlex an, wie zusätzlicher horizontaler Raum im Eltern-Container verteilt werden soll.


<th>Verhalten von Geschwistern</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|Keine</code></td>
<td>Kein Flex-Verhalten; Geschwister behalten ihre definierte Breite.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>
<td>Brüder und Schwestern werden horizontal skaliert, um den gesamten übergeordneten Container zu füllen, und überschreiben ihre definierte Breite.Die Anzahl der Geschwister in einer Reihe bleibt unverändert; zum Beispiel, wenn drei Geschwister horizontal innerhalb der Breite des Containers unter der <code>Enum.UIFlexAlignment.None|None</code> Einstellung passen, werden diese drei Geschwister ihre Größe ändern, um die gesamte Breite zu füllen.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>
<td>Geschwister behalten ihre definierte Breite. Äquale Abstände werden auf beiden Seiten eines gleichgeordnetes Teilhinzugefügt.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>
<td>Brüder halten ihre definierte Breite bei.Gleiche Abstände werden <b>zwischen</b> Geschwistern hinzugefügt, aber kein zusätzlicher Raum wird <b>um</b> Geschwister ergänzt.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>
<td>Geschwister behalten ihre definierte Breite. Äquale Abstände werden sowohl <b>zwischen</b> und <b>um</b> Geschwistern hinzugefügt.</td>
</tr>
</tbody>
Einstellung
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Kreuzrichtungsverhalten

In vertikalen Listenlayouts (FillDirection auf Enum.FillDirection.Vertical festgelegt), gibt die HorizontalFlex Eigenschaft an, wie die Geschwister über die horizontale Querrichtung verteilt werden.In solchen Layouts füllt eine Einstellung von Enum.UIFlexAlignment.Fill den gesamten horizontalen Raum, während die vertikale Platzierung sich an VerticalFlex hält.

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
Automatische Größe Interaktion

Wenn GuiObject.AutomaticSize für ein Kind des UIListLayout in der FillDirection aktiviert ist, wird es als "automatische Flex-Basis" interpretiert und definiert die Größe des GuiObject, aus dem es wachsen oder schrumpfen kann.

Wenn GuiObject.AutomaticSize für ein Kind des UIListLayout in der Kreuzrichtung aktiviert ist, wird es als "automatische Kreuzgröße" interpretiert und definiert die minimale Größe, die alle Inhalte des Kindes in der Kreuzrichtung enthalten muss.

ItemLineAlignment

Parallel lesen

In einem flexiblen Layout legt es die quer direktionale Ausrichtung von Geschwistern innerhalb einer Linie fest. Siehe Enum.ItemLineAlignment für visuelle Beispiele.


<th>Verhalten von Geschwistern</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.ItemLineAlignment.Automatisch|Automatisch</code></td>
<td>Stellt die Geschwister des Layouts oder den spezifischen <code>Class.UIFlexItem</code> Eltern zum Layout <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> oder <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code> ab, abhängig von seiner <code>Class.UIListLayout.FillDirection|FillDirection</code>.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Start|Start</code></td>
<td>Stellt die Geschwister des Layouts oder die spezifische <code>Class.UIFlexItem</code> Eltern der Zeile auf die <b>obere Seite</b> in einer horizontalen Füllung oder die <b>linke Seite</b> in einer vertikalen Füllung der Zeile ein.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Center|Center</code></td>
<td>Verschmilzt die Geschwister des Layouts oder den spezifischen <code>Class.UIFlexItem</code> Eltern der Zeile in einer horizontalen oder vertikalen Füllung im <b>Mittelpunkt</b>.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.End|End</code></td>
<td>Verschmilzt die Geschwister des Layouts oder den spezifischen <code>Class.UIFlexItem</code> Eltern der Zeile mit dem <b>unteren Rand</b> in einer horizontalen Füllung oder dem <b>rechten Rand</b> in einer vertikalen Füllung der Zeile.</td>
</tr>
<tr>
<td><code>Enum.ItemLineAlignment.Stretch|Strecken</code></td>
<td>Dehnt die Geschwister des Layouts oder den spezifischen <code>Class.UIFlexItem</code> Eltern, um die gesamte Querrichtung der Linie entweder mit einem horizontalen oder vertikalen Füllen zu füllen.</td>
</tr>
</tbody>
Einstellung
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

Parallel lesen

Bestimmt die Menge des freien Raums zwischen jedem Element, die auf eine Skala (Prozentanteil der Größe des übergeordnetes Teilin der aktuellen Richtung) oder einen Versatz (statische Abstandsoption ähnlich der Pixelform) festgelegt ist.

Parallel lesen

Wenn die Liste des Layouts FillDirection auf Enum.FillDirection.Vertical gesetzt ist, gibt die Eigenschaft VerticalFlex an, wie zusätzlicher vertikaler Raum im Eltern-Container verteilt werden soll.


<th>Verhalten von Geschwistern</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>Enum.UIFlexAlignment.None|Keine</code></td>
<td>Kein Flex-Verhalten; Geschwister behalten ihre definierte Höhe.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.Fill|Fill</code></td>
<td>Brüder und Schwestern skalieren vertikal, um den gesamten übergeordneten Container zu füllen, und überschreiben ihre definierte Höhe.Die Anzahl der Geschwister in einer Spalte bleibt unverändert; zum Beispiel, wenn drei Geschwister vertikal innerhalb der Höhe des Containers unter der Einstellung <code>Enum.UIFlexAlignment.None|None</code> passen, werden diese drei Geschwister ihre Größe ändern, um die gesamte Höhe zu füllen.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>
<td>Geschwister halten ihre definierte Höhe bei. Die gleiche Platzierung wird auf beiden Seiten eines gleichgeordnetes Teilhinzugefügt.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>
<td>Brüder halten ihre definierte Höhe bei.Gleiche Abstände werden <b>zwischen</b> Geschwistern hinzugefügt, aber kein zusätzlicher Raum wird <b>um</b> Geschwister ergänzt.</td>
</tr>
<tr>
<td><code>Enum.UIFlexAlignment.SpaceEvenly|SpaceEvenly</code></td>
<td>Brüder halten ihre definierte Höhe bei. Äquale Abstände werden sowohl <b>zwischen</b> und <b>um</b> Geschwistern hinzugefügt.</td>
</tr>
</tbody>
Einstellung
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Kreuzrichtungsverhalten

In horizontalen Listenlayouts (FillDirection auf Enum.FillDirection.Horizontal festgelegt), gibt die VerticalFlex Eigenschaft an, wie die Geschwister über die vertikale Querrichtung verteilt werden sollen.In solchen Layouts füllt eine Einstellung von Enum.UIFlexAlignment.Fill den gesamten vertikalen Raum, während horizontale Abstände sich an HorizontalFlex halten.

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
Automatische Größe Interaktion

Wenn GuiObject.AutomaticSize für ein Kind des UIListLayout in der FillDirection aktiviert ist, wird es als "automatische Flex-Basis" interpretiert und definiert die Größe des GuiObject, aus dem es wachsen oder schrumpfen kann.

Wenn GuiObject.AutomaticSize für ein Kind des UIListLayout in der Kreuzrichtung aktiviert ist, wird es als "automatische Kreuzgröße" interpretiert und definiert die minimale Größe, die alle Inhalte des Kindes in der Kreuzrichtung enthalten muss.

Wraps

Parallel lesen

Steuert, ob Geschwister innerhalb des Elterncontainers zu einer anderen Zeile umwickeln, wenn ihre Standardgröße die Breite/Höhe der Grenzen des Containers überschreitet.

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.

Methoden

Ereignisse