NativeScript - kontenery układu

NativeScript udostępnia kolekcję składników kontenera wyłącznie w celu rozmieszczenia składnika widgetu interfejsu użytkownika. Kontenery układu działają jak komponent nadrzędny i mogą mieć jeden lub więcej komponentów podrzędnych. Wszystkie komponenty podrzędne kontenera układu można rozmieścić na podstawie techniki dostarczonej przez jego kontener nadrzędny układu.

NativeScript obsługuje sześć kontenerów układów i są one następujące -

Kontener układu bezwzględnego
Kontener układu dokowania
Kontener układu siatki
Kontener układu stosu
Kontener układu opakowania
Kontener układu FlexBox

W tym rozdziale szczegółowo poznajmy wszystkie koncepcje kontenerów układu.

Układ absolutny

AbsoluteLayoutContainer to najprostszy kontener układu w języku NativeScript. AbsoluteLayout nie wymusza żadnych ograniczeń na swoich elementach podrzędnych i umieści swoje elementy podrzędne w nim przy użyciu dwuwymiarowego układu współrzędnych z lewym górnym rogiem jako początkiem.

AbsoluteLayout używa czterech właściwości swoich elementów podrzędnych do ich pozycjonowania i są one następujące:

top - Definiuje położenie dziecka od początku poruszającego się w dół w kierunku y.

left - Określa położenie dziecka od początku poruszającego się na boki w kierunku x.

width - Określa szerokość dziecka.

height - Określa wzrost dziecka.

Dodajmy kontener AbsoluteLayout na stronie głównej naszej aplikacji, jak poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 

<AbsoluteLayout width="200" height="300" backgroundColor="blue"> 
   <Label text="Top Left" left="0" top="0" width="100" height="150" backgroundColor="green">
   </Label> 
   <Label text="Top Right" left="100" top="0" width="100" height="150" backgroundColor="blue"></Label> 
   <Label text="Bottom Left" left="0" top="150" width="100" height="150" backgroundColor="orange">
   </Label>
   <Label text="Bottom Right" left="100" top="150" width="100" height="150" backgroundColor="red"></Label> 
</AbsoluteLayout>

Wynik

Dane wyjściowe AbsoluteLayout są takie, jak podano poniżej -

DockLayout

Docklayoutkomponent kontenera umożliwia jego elementom potomnym zadokowanie w nim. Każda strona kontenera (góra, dół, lewa, prawa) może zadokować komponent podrzędny. Kontener DockLayout używa właściwości dock swoich elementów podrzędnych, aby poprawnie je zadokować.

Możliwe wartości właściwości doku są następujące -

top - Kontener układu zadokuj komponent podrzędny w górnym rogu.

bottom - Kontener układu zadokuj komponent podrzędny w dolnym rogu.

left - Kontener układu zadokuj komponent potomny w lewym rogu.

right - Kontener układu zadokuj komponent potomny w prawym rogu.

Domyślnie, DockLayoutContainer dokuje ostatni składnik podrzędny. Może przesłonić, ustawiając jego właściwość stretchLastChild na zero.

Dodajmy DockLayout kontener na stronie głównej naszej aplikacji, jak poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<DockLayout width="250" height="300" backgroundColor="blue" stretchLastChild="false"> 
   <Label text="left" dock="left" width="50" backgroundColor="green"></Label> 
   <Label text="top" dock="top" height="50" backgroundColor="orange"></Label> 
   <Label text="right" dock="right" width="50" backgroundColor="red"></Label< 
   <Label text="bottom" dock="bottom" height="50" 
   backgroundColor="orange"></Label> 
</DockLayout>

Wynik

Poniżej znajduje się dane wyjściowe dla DockLayout -

GridLayout

Składnik kontenera GridLayout jest jednym z kontenerów złożonego układu i rozmieszcza elementy podrzędne w formacie tabelarycznym z wierszami i kolumnami. Domyślnie ma jeden wiersz i jedną kolumnę. Ma następujące właściwości -

columns- Służy do reprezentowania domyślnej szerokości każdej kolumny oddzielonej znakiem,. Możliwe wartości to liczba, * i słowo kluczowe auto.

Gdzie,

liczba wskazuje bezwzględną szerokość kolumny.
wskazuje szerokość kolumny w stosunku do innych kolumn. Można go poprzedzić liczbą, aby wskazać, ile razy szerokość kolumny powinna odnosić się do innej kolumny. Na przykład 2 * oznacza szerokość kolumny, która powinna być 2 razy większa od szerokości najmniejszej kolumny.
auto wskazuje szerokość kolumny tak szeroką, jak jej najszerszy element podrzędny.

Na przykład *, 2 * oznacza dwie kolumny, a druga będzie dwukrotnie większa od pierwszej.

rows - Używany do reprezentowania domyślnej wysokości każdego wiersza oddzielonego znakiem,. Reprezentacja wartości jest podobna do kolumn.

GridLayout używa poniższych właściwości swoich elementów podrzędnych do ich układu -

row - Numer rzędu

kolumna - numer kolumny

rowSpan - całkowita liczba wierszy, które obejmuje zawartość podrzędna w układzie.

colSpan - całkowita liczba kolumn, które obejmuje treść podrzędna w układzie.

Dodajmy kontener GridLayout na stronie głównej naszej aplikacji, jak poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<GridLayout columns="50, auto, *" rows="50, auto, *" width="210" height="210"
   backgroundColor="blue"> 
   <Label text="Row: 0; Column 0" row="0" col="0" backgroundColor="green"></Label> 
   <Label text="Row: 0; Column 1" row="0" col="1" colSpan="1" backgroundColor="brown"></Label> 
   <Label text="Row: 1; Column 0" row="1" col="0" rowSpan="1" backgroundColor="red"></Label> 
   <Label text="Row: 1; Column 1" row="1" col="1" backgroundColor="orange"></Label> 
</GridLayout>

Wynik

Poniżej znajduje się dane wyjściowe dla GridLayout -

StackLayout

StackLayout organizuje swoje elementy podrzędne w jednowymiarowej linii w poziomie lub w pionie. Można go zwymiarować na podstawie przestrzeni w układzie przy użyciu opcji układu. Ma właściwość orientacji, której można użyć do określenia kierunku, poziomego lub pionowego.

Dodajmy kontener StackLayout na stronie głównej naszej aplikacji, jak poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<StackLayout orientation="vertical" width="200" height="200" backgroundColor="blue"> 
   <Label text="Label1" width="50" height="50" backgroundColor="green"></Label> 
   <Label text="Label2" width="50" height="50" backgroundColor="brown"></Label> 
   <Label text="Label3" width="50" height="50" backgroundColor="red"></Label> 
   <Label text="Label4" width="50" height="50" backgroundColor="orange"></Label> 
</StackLayout>

Wynik

Dane wyjściowe dla StackLayout są pokazane poniżej -

WrapLayout

WrapLayout służy do zawijania zawartości w nowych wierszach lub kolumnach.

Ma następujące trzy właściwości -

orientation - wyświetlać poziomo lub pionowo.

itemWidth - szerokość układu dla każdego dziecka.

itemHeight - wysokość układu dla każdego dziecka.

Dodajmy kontener WrapLayout na stronie głównej naszej aplikacji, jak poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <WrapLayout orientation="horizontal" width="200" height="200" backgroundColor="blue">
   <Label text="Label1" width="70" height="70" backgroundColor="green"></Label> 
   <Label text="Label2" width="70" height="70" backgroundColor="brown"></Label 
   <Label text="Label3" width="70" height="70" backgroundColor="red"></Label> 
   <Label text="Label4" width="70" height="70" backgroundColor="orange"></Label> 
</WrapLayout>

Wynik

Układ Flexbox

Komponent kontenera FlexboxLayout jest jednym z zaawansowanych kontenerów układu. Zapewnia opcję renderowania prostego układu do bardzo złożonych i wyrafinowanych układów. Opiera się na CSS Flexbox.

Komponent FlexboxLayout ma wiele właściwości i są one następujące -

flexDirection

Reprezentuje kierunek, w którym rozmieszczone są komponenty potomne. Możliwe wartości flexDirection są następujące -

row - Komponenty podrzędne są ułożone obok siebie.

row-reverse - Komponenty podrzędne są ułożone obok siebie, ale w odwrotnym kierunku.

column - Komponenty potomne są ułożone jeden pod drugim.

column-reverse - Elementy potomne są ułożone jeden pod drugim, ale w odwrotnym kierunku.

Dodajmy kontener FlexLayout na stronie głównej naszej aplikacji, jak poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="row"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Wynik

Poniżej znajduje się wynik działania FlexLayout - Row -

Teraz zmieńmy wartość flexDirection z row na row-reverse i sprawdźmy, jak wpływa na układ.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> <FlexboxLayout flexDirection="row-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Wynik

Poniżej znajduje się wynik działania Flex Layout - Row Reverse -

Zmieńmy wartość flexDirection z row-reverse na column i sprawdźmy, jak wpływa na układ.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Wynik

Dane wyjściowe dla FlexLayout - Kolumna podano poniżej -

Zmieńmy wartość flexDirection z column na column-reverse i sprawdźmy, jak to wpływa na układ.

<ActionBar> 
   <Label text="Home"></Label> 
</ActionBar> 
<FlexboxLayout flexDirection="column-reverse"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
</FlexboxLayout>

Wynik

Poniżej znajduje się wynik działania FlexLayout - Odwrócenie kolumn -

flexWrap

Reprezentuje, czy komponenty potomne będą renderowane w jednym wierszu / kolumnie, czy też przepływają do wielu wierszy poprzez zawijanie w kierunku określonym przez flexDirection.

Możliwe wartości są następujące -

wrap - Zawija komponenty potomne, jeśli nie ma miejsca w podanym kierunku (flexDirection).

wrap-reverse - Tak samo jak owijanie, z wyjątkiem przepływu elementu w przeciwnym kierunku.

Dodajmy właściwość flexWrap, a następnie ustawmy jej wartość jako wrap. Dodaj także troje kolejnych elementów podrzędnych, jak określono poniżej -

<ActionBar> 
   <Label text="Home"></Label> 
&tl;/ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label>
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Wynik

Poniżej znajduje się wyjście dla flexWrap -

JustifyContent

Przedstawia sposób ułożenia komponentów potomnych względem siebie i całej struktury. Ma trzy właściwości, jak określono poniżej -

flex-end - Pakuje element podrzędny w kierunku linii końcowej.

space-between - Pakuje element podrzędny, równomiernie rozprowadzając go w linii.

space-around - Podobny do odstępu między, ale pakuje komponent podrzędny przez równomierne rozmieszczenie w linii, a także równą przestrzeń wokół nich.

Dodajmy również justifyContent i sprawdźmy, jak się zachowuje -

<ActionBar> 
   <Label text="Home"></Label>
</ActionBar> 
<FlexboxLayout flexDirection="row" flexWrap="wrap" justifyContent="space-around"> 
   <Label text="First Item" backgroundColor="red"></Label> 
   <Label text="Second Item" backgroundColor="green"></Label> 
   <Label text="Third Item" backgroundColor="red"></Label> 
   <Label text="Fourth Item" backgroundColor="green"></Label> 
   <Label text="Fifth Item" backgroundColor="red"></Label> 
   <Label text="Sixth Item" backgroundColor="green"></Label> 
   <Label text="Seventh Item" backgroundColor="red"></Label> 
   <Label text="Eighth Item" backgroundColor="green"></Label> 
</FlexboxLayout>

Wynik

Poniżej znajduje się wynik działania Flex Layout - JustifyContent -

Kontener FlexLayout udostępnia dwie dodatkowe właściwości dla swoich elementów podrzędnych w celu określenia kolejności i możliwości zmniejszania. Są następujące -

order - Określa kolejność, w jakiej elementy podrzędne kontenera FlexLayout będą renderowane.

flexShrink - Określa zdolność dzieci do obniżenia się do poziomu 0.