UIListLayout

Pokaż przestarzałe

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.

A UIListLayout pozycje siostrzane interfejsu użytkownika wierszy lub kolumn w ramach pojemnika UI rodzica, w oparciu o FillDirection.Właściwości i każdego brata są albo ignorowane, albo zastępowane przez układ listy, podczas gdy każdy brat zachowuje swoją zdefiniowaną właściwość, chyba że układ jest skonfigurowany do wykorzystania układu elastycznego.Zobacz Listę i układy elastyczne dla dalszych informacji.

UIListLayouts illustrating FillDirection of either horizontal or vertical.

Aby kontrolować kolejność układu rodzeństwa, ustaw SortOrder na Enum.SortOrder.Name lub Enum.SortOrder.LayoutOrder, a następnie zmień nazwę rodzeństwa w kolejności alfabetycznej lub ustaw ich wartość LayoutOrder, odpowiednio.UIListLayout automatycznie zmieni układ elementów, gdy elementy zostaną dodane/usunięte lub jeśli zmiany siostry Name lub LayoutOrder zmienią.

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

Przestrzeżenie między rodzeństwem jest kontrolowane za pomocą właściwości Padding i owijanie w granicach kontenera rodzica za pomocą właściwości Wraps.Ustawienie wyważenia braci w obrębie kontenera rodzica jest kontrolowane za pomocą HorizontalAlignment i VerticalAlignment chyba że układ jest skonfigurowany do wykorzystania układu elastycznego.

Zauważ, że istnieją implikacje wydajności związane z użyciem listy układu elastycznego, ponieważ potrzebne są dodatkowe obliczenia, aby obliczyć rozmiary baz flex, rozmiary skręcone i owijanie linii.Flex jest włączony na , gdy następujące właściwości są ustawiać, lub jeśli którykolwiek z rodzeństwa ma rodzica:

Podsumowanie

Właściwości

Właściwości odziedziczeni z: UIGridStyleLayout
Wyświetl wszystkie odziedziczone z: Instance
Wyświetl wszystkie odziedziczone z: Object

Właściwości

HorizontalFlex

Enum.UIFlexAlignment
Odczyt równoległy

Gdy układ listy FillDirection jest ustawiony na Enum.FillDirection.Horizontal, właściwość HorizontalFlex określa, jak rozdzielić dodatkową pionową przestrzeń w kontenerze rodzicznym.

<th>Zachowanie rodzeństwa</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.UIFlexAlignment.None|None</code></td>



    <td>Brak zachowania elastyczności; bracia utrzymują swoją zdefiniowaną szerokość.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Fill|Wypełnij</code></td>



    <td>Bracia i siostry przesuwają się poziomo, aby wypełnić cały kontener rodzic, zastępując ich zdefiniowaną szerokość.Liczba rodzeństwa w rzędzie pozostaje niezmieniona; na przykład, jeśli trzy rodzeństwa zmieszczą się pionowo w szerokości pojemnika za pomocą ustawienia <code>Enum.UIFlexAlignment.None|None</code>, te trzy rodzeństwa zmienią rozmiar, aby wypełnić całą szerokość.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>



    <td>Bracia utrzymują swoją zdefiniowaną szerokość. Równa odległość jest dodawana po obu stronach każdego brata.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>



    <td>Bracia utrzymują swoją zdefiniowaną szerokość.Równa odległość jest dodawana między rodzeństwem, ale nie dodaje się dodatkowej przestrzeni wokół rodzeństwa.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceRównomiernie|SpaceEvenly</code></td>



    <td>Bracia utrzymują swoją zdefiniowaną szerokość. Równa odległość jest dodawana zarówno między <b>pomiędzy</b> i <b>wokół</b> braćmi.</td>

  </tr>

</tbody>
Ustawienie
UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.
Zachowanie w kierunku krzyżowym

W pionowych listach układach ( FillDirection ustawiono na Enum.FillDirection.Vertical ), właściwość HorizontalFlex określa, jak rozdzielić rodzeństwo wzdłuż poziomego kierunku przecięcia .W takich układach ustawienie Enum.UIFlexAlignment.Fill wypełnia całą poziomą przestrzeń, podczas gdy przestrzeń pionowa przestrzega VerticalFlex.

Diagram showing how HorizontalFlex affects the horizontal size of sibling UI objects when the UIListLayout fill direction is set to vertical.
Interakcja z rozmiarem automatycznym

Jeśli GuiObject.AutomaticSize jest włączone dla dziecka UIListLayout w FillDirection, jest interpretowane jako "automatyczna baza elastyczna" i określa rozmiar GuiObject, z którego może rosnąć lub kurczyć się.

Jeśli GuiObject.AutomaticSize jest włączone dla dziecka UIListLayout w krzyżowym kierunku , jest interpretowane jako "automatyczny rozmiar krzyżowy" i określa minimalny rozmiar potrzebny do zawarcia całej zawartości dziecka w krzyżowym kierunku.

ItemLineAlignment

Enum.ItemLineAlignment
Odczyt równoległy

W układzie elastycznym określa układ krzyżowy braci w linii. Zobacz Enum.ItemLineAlignment dla przykładów wizualnych.

<th>Zachowanie rodzeństwa</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.ItemLineAlignment.Automatic|Automatyczny</code></td>



    <td>Dopasowuje siostry układu lub konkretną <code>Class.UIFlexItem</code> matkę do układu <code>Class.UIListLayout.HorizontalAlignment|HorizontalAlignment</code> lub <code>Class.UIListLayout.VerticalAlignment|VerticalAlignment</code>, w zależności od jej <code>Class.UIListLayout.FillDirection|FillDirection</code>.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Start|Startuj</code></td>



    <td>Dopasowuje siostry układu lub konkretną <code>Class.UIFlexItem</code> matkę do linii <b>góry</b> w poziomym wypełnieniu lub <b>lewej</b> linii w pionowym wypełnieniu.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Center|Center</code></td>



    <td>Dopasowuje siostry układu lub konkretną Class.UIFlexItem matkę do środka linii w pionowym lub poziomym wypełnieniu.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.End|Koniec</code></td>



    <td>Dopasowuje siostry układu lub konkretną Class.UIFlexItem matkę do dolnej linii wypełnienia poziomym wypełnieniem lub prawą linii wypełnienia w pionie.</td>

  </tr>



  <tr>

    <td><code>Enum.ItemLineAlignment.Stretch|Rozciągnij</code></td>



    <td>Rozciąga siostry układu lub konkretną klasę <code>Class.UIFlexItem</code> rodzica, aby wypełnić całą pionową lub poziomą linię wypełnieniem pionowym lub poziomym.</td>

  </tr>

</tbody>
Ustawienie
Examples of options for ItemLineAlignment in a horizontal fill direction.

Padding

UDim
Odczyt równoległy

Określa ilość wolnej przestrzeni między każdym elementem, ustawioną na skalę (procent wielkości rodzica w obecnym kierunku) lub odległość (statyczną wartość rozstawu podobną do rozmiaru piksela).

VerticalFlex

Enum.UIFlexAlignment
Odczyt równoległy

Gdy układ listy FillDirection jest ustawiony na Enum.FillDirection.Vertical, właściwość VerticalFlex określa, jak rozdzielić dodatkową pionową przestrzeń w pojemniku rodzica.

<th>Zachowanie rodzeństwa</th>

  </tr>

</thead>



<tbody>

  <tr>

    <td><code>Enum.UIFlexAlignment.None|None</code></td>



    <td>Brak elastycznego zachowania; bracia utrzymują określoną wysokość.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.Fill|Wypełnij</code></td>



    <td>Bracia i siostry przesuwają się w górę, aby wypełnić cały kontener rodzic, zastępując ich zdefiniowaną wysokość.Liczba rodzeństwa w kolumnie pozostaje niezmieniona; na przykład, jeśli trzy rodzeństwa zmieszczą się pionowo w wysokości pojemnika za pomocą ustawienia <code>Enum.UIFlexAlignment.None|None</code>, te trzy rodzeństwa zmienią rozmiar, aby wypełnić całą wysokość.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceAround|SpaceAround</code></td>



    <td>Bracia utrzymują swoją zdefiniowaną wysokość. Równa odległość jest dodawana po obu stronach każdego brata.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceBetween|SpaceBetween</code></td>



    <td>Bracia utrzymują swoją zdefiniowaną wysokość.Równa odległość jest dodawana między rodzeństwem, ale nie dodaje się dodatkowej przestrzeni wokół rodzeństwa.</td>

  </tr>



  <tr>

    <td><code>Enum.UIFlexAlignment.SpaceRównomiernie|SpaceEvenly</code></td>



    <td>Bracia utrzymują swoją zdefiniowaną wysokość. Równa odległość jest dodawana zarówno między <b>pomiędzy</b> i <b>wokół</b> braćmi.</td>

  </tr>

</tbody>
Ustawienie
UIListLayout examples showing how each VerticalFlex option affects the size and spacing of sibling UI objects.
Zachowanie w kierunku krzyżowym

W poziomych listach ( FillDirection ustawionych na Enum.FillDirection.Horizontal ), właściwość VerticalFlex określa, jak rozdzielić rodzeństwo wzdłuż pionowego kierunku przecięcia .W takich układach ustawienie Enum.UIFlexAlignment.Fill wypełnia całą pionową przestrzeń, podczas gdy przestrzeń pozioma przestrzega HorizontalFlex.

Diagram showing how VerticalFlex affects the vertical size of sibling UI objects when the UIListLayout fill direction is set to horizontal.
Interakcja z rozmiarem automatycznym

Jeśli GuiObject.AutomaticSize jest włączone dla dziecka UIListLayout w FillDirection, jest interpretowane jako "automatyczna baza elastyczna" i określa rozmiar GuiObject, z którego może rosnąć lub kurczyć się.

Jeśli GuiObject.AutomaticSize jest włączone dla dziecka UIListLayout w krzyżowym kierunku , jest interpretowane jako "automatyczny rozmiar krzyżowy" i określa minimalny rozmiar potrzebny do zawarcia całej zawartości dziecka w krzyżowym kierunku.

Wraps

boolean
Odczyt równoległy

Kontroluje, czy siostry w ramach kontenera rodzica owijają się inną linią, gdy ich domyślny rozmiar przekracza szerokość/wysokość granic kontenera.

Diagram showing how Wraps affects how siblings are distributed within the parent container's bounds.
Wyświetl wszystkie odziedziczone z: Instance
Wyświetl wszystkie odziedziczone z: Object

Metody

Wyświetl wszystkie odziedziczone z: Instance
Wyświetl wszystkie odziedziczone z: Object

Zdarzenia

Wyświetl wszystkie odziedziczone z: Instance
Wyświetl wszystkie odziedziczone z: Object