Lista i układy elastyczne

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

Pozycje UIListLayout brata GuiObjects w poziomych wierszach lub pionowych kolumnach wewnątrz pojemnika rodzica.Zawsze gdy dodasz lub usuniesz obiekt siostry, układ dostosowuje się odpowiednio.

Wypełnij kierunek

Właściwość FillDirection określa kierunek, w którym siostry układu listy będą renderowane.

UIListLayouts illustrating FillDirection of either horizontal or vertical.

Zamawianie jest określone przez właściwość layoutu , która może być albo rosnącą liczbową w oparciu o wartość liczbową każdego przedmiotlub alfanumeryczną w oparciu o wartość liczbową przedmiot.

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

Dostosowanie

Właściwości HorizontalAlignment i VerticalAlignment określają odpowiednią X i Y alineację zarówno braci listy względem siebie, jak i ogólne granice listy w jej obrębie kontenera.Na przykład, pionowo wypełniona lista z centruje siostry listy względem siebie i centruje listę pionowo w jej pojemniku.

List layout illustrating VerticalAlignment of Center.

Pakowanie

Sterowania Wraps prawne określają, 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.

Przepustka

Właściwość określa ilość pustej przestrzeni między każdym przedmiotlisty, ustawioną na skalę (procent wielkości kontenera w obecnym kierunku) lub odległość (statyczna wartość rozstawu podobna do rozmiaru piksela).

Flex układy

Integracja flex w jest potężnym sposobem na równomierne wypełnianie/dystrybucję listy przedmiotów lub dopasowanie/rozwijanie listy przedmiotów na całej linii lub przedmiotów elastycznych na przestrzeni zmiennej.

Równomierne wypełnienie lub dystrybucja

Gdy kierunek wypełnienia listy jest ustawiony na , właściwość określa, jak rozdzielić dodatkową pionową przestrzeń w pojemniku rodzicznym.Podobnie, gdy kierunek wypełnienia jest ustawiony na Vertical, właściwość VerticalFlex określa, jak rozdzielić dodatkową pionową przestrzeń.

UIListLayout examples showing how each HorizontalFlex option affects the size and spacing of sibling UI objects.

Jednym praktycznym zastosowaniem HorizontalFlex jest interfejs zakładek okiennych , w którym flex wypełnia pasek zakładek równo, niezależnie od liczby zakładek.Żaden podejście nie jest łatwiejszy niż flex w tym przypadku, ponieważ automatycznie oblicza szerokość każdej zakładki bez ustawień szerokości zdefiniowanych przez programistę i automatycznie dostosowuje się, jeśli zmienia się liczba zakładek.

Układ linii przedmiotu

Właściwość ItemLineAlignment określa krzyżowe ustawienie braci w linii, pozwalając na wyśrodkowanie obiektów o różnej szerokości/wysokości lub wypełnienie obiektów o mniejszej szerokości/wysokości całą linią.

Examples of options for ItemLineAlignment in a horizontal fill direction.

Jednym praktycznym przypadkiem użycia dla ItemLineAlignment jest rozciągnięcie serii niezgodnych rozmiarowo płytek, aby wypełnić cały rząd ( Stretch ), co czyni układ bardziej spójnym.

Płytki z różną wysokością zawartości dają nierówny i rozdzielony układ

Dostosuj pojedyncze przedmioty

Chociaż rozciąganie całego układu jest potężną użytkownością, niektóre układy są bardziej odpowiednie do indywidualnego rozciągania przedmiotów .W takich układach niektóre elementy na liście utrzymują swój rozmiar rdzenia, podczas gdy inne przedmioty dostosowują się do wypełnienia zmiennych przestrzeni.Jednym praktycznym użyciem jest widget paska przesuwania z równymi etykietami na obu końcach i elastycznym paskiem przesuwania, który wypełnia całą szerokość między.

Example of UIFlexItem applied to a specific GuiObject under control of a UIListLayout.

Aby ustawić jeden konkretny element listy jako elastyczny, włóż UIFlexItem jako dziecko elastycznego przedmiot, a następnie ustaw jego właściwość FlexMode na Fill , Grow , Shrink lub Custom.

Example hierarchy of a UIFlexItem parented to a GuiObject under control of a UIListLayout.