NativeScript - Layout Containers

NativeScript fornece coleção de componentes de contêiner com o único propósito de preparar o componente de widget de IU. Os contêineres de layout atuam como o componente pai e podem ter um ou mais componentes filhos. Todos os componentes filho de um contêiner de layout podem ser organizados com base na técnica fornecida por seu contêiner de layout pai.

NativeScript oferece suporte a seis contêineres de layouts e são os seguintes -

  • Contêiner de layout absoluto

  • Contêiner de layout de doca

  • Contêiner de layout de grade

  • Contêiner de layout de pilha

  • Contêiner de layout de embalagem

  • Contêiner de layout FlexBox

Vamos aprender todos os conceitos de contêiner de layout em detalhes neste capítulo.

Layout absoluto

AbsoluteLayoutcontainer é o container de layout mais simples em NativeScript. AbsoluteLayout não impõe nenhuma restrição em seus filhos e os colocará dentro dele usando o sistema de coordenadas bidimensional com o canto superior esquerdo como origem.

AbsoluteLayout usa quatro propriedades de seus filhos para posicioná-los e eles são os seguintes -

top - Define o posicionamento da criança desde a origem movendo-se para baixo na direção y.

left - Define a colocação da criança desde a origem movendo-se lateralmente na direção x.

width - Define a largura da criança.

height - Define a altura da criança.

Vamos adicionar o contêiner AbsoluteLayout na página inicial do nosso aplicativo conforme abaixo -

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

Resultado

A saída do AbsoluteLayout é a fornecida abaixo -

DockLayout

DocklayoutO componente container permite que seus filhos se encaixem nele. Cada lado do contêiner (superior, inferior, esquerdo, direito) pode encaixar um componente filho. O contêiner DockLayout usa a propriedade dock de seus filhos para encaixá-los corretamente.

Os valores possíveis da propriedade dock são os seguintes -

top - O contêiner de layout encaixe o componente filho no canto superior.

bottom - O contêiner de layout acopla o componente filho no canto inferior.

left - O contêiner de layout acopla o componente filho no canto esquerdo.

right - O contêiner de layout acopla o componente filho no canto direito.

Por padrão, DockLayouto contêiner acopla seu último componente filho. Ele pode substituir definindo sua propriedade stretchLastChild como zero.

Vamos adicionar DockLayout container na página inicial de nosso aplicativo conforme abaixo -

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

Resultado

Abaixo está a saída para DockLayout -

GridLayout

O componente de contêiner GridLayout é um dos contêineres de layout complexos e organiza os elementos filho em formato tabular com linhas e colunas. Por padrão, ele possui uma linha e uma coluna. Possui as seguintes propriedades -

columns- Usado para representar a largura padrão de cada coluna separada por,. Os valores possíveis são número, * e palavra-chave automática.

Onde,

  • número indica uma largura de coluna absoluta.

  • indica a largura de uma coluna em relação a outras colunas. Pode ser precedido por um número para indicar quantas vezes a largura da coluna deve ser em relação a outra coluna. Por exemplo, 2 * indica que a largura da coluna deve ser 2 vezes a largura da menor coluna.

  • auto indica a largura da coluna tanto quanto seu filho mais largo.

Por exemplo, *, 2 * significa duas colunas e a segunda terá o dobro do tamanho da primeira coluna.

rows - Usado para representar a altura padrão de cada linha separada por,. A representação do valor é semelhante às colunas.

GridLayout usa as propriedades especificadas abaixo de seus filhos para fazer o layout -

row - número da linha

col - número da coluna

rowSpan - número total de linhas que o conteúdo filho abrange em um layout.

colSpan - número total de colunas que o conteúdo filho abrange em um layout.

Vamos adicionar o contêiner GridLayout na página inicial do nosso aplicativo como abaixo -

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

Resultado

Abaixo está a saída para GridLayout -

StackLayout

StackLayout organiza seus filhos em uma linha unidimensional horizontal ou verticalmente. Ele pode ser dimensionado com base no espaço no layout usando as opções de layout. Possui propriedade de orientação que pode ser usada para especificar a direção, horizontal ou vertical.

Vamos adicionar o contêiner StackLayout na página inicial do nosso aplicativo como abaixo -

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

Resultado

A saída para StackLayout é mostrada abaixo -

WrapLayout

WrapLayout é usado para envolver o conteúdo em novas linhas ou colunas.

Possui as três propriedades a seguir -

orientation - exibir horizontal ou verticalmente.

itemWidth - largura do layout para cada criança.

itemHeight - altura do layout para cada criança.

Vamos adicionar o contêiner WrapLayout na página inicial do nosso aplicativo como abaixo -

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

Resultado

Layout Flexbox

O componente de contêiner FlexboxLayout é um dos contêineres de layout avançado. Ele oferece a opção de renderizar layouts simples em layouts muito complexos e sofisticados. É baseado no CSS Flexbox.

O componente FlexboxLayout tem muitas propriedades e são as seguintes -

flexDirection

Ele representa a direção na qual os componentes filhos são organizados. Os valores possíveis de flexDirection são os seguintes -

row - Os componentes filhos são dispostos lado a lado.

row-reverse - Os componentes filhos são dispostos lado a lado, mas na direção inversa.

column - Os componentes filhos são organizados um abaixo do outro.

column-reverse - Os componentes filhos são organizados um abaixo do outro, mas na direção inversa.

Vamos adicionar o contêiner FlexLayout na página inicial do nosso aplicativo como abaixo -

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

Resultado

Abaixo está a saída de FlexLayout - Row -

Agora, vamos alterar o valor de flexDirection de linha para linha reversa e verificar como isso afeta o layout.

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

Resultado

Abaixo está a saída do Flex Layout - Row Reverse -

Vamos mudar o valor de flexDirection de linha reversa para coluna e verificar como isso afeta o layout.

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

Resultado

A saída para FlexLayout - coluna é fornecida abaixo -

Vamos mudar o valor de flexDirection de coluna para coluna reversa e verificar como isso afeta o layout.

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

Resultado

Abaixo está a saída do FlexLayout - coluna reversa -

flexWrap

Ele representa se os componentes filhos serão renderizados em uma única linha / coluna ou fluirão em várias linhas, agrupando na direção definida por flexDirection.

Os valores possíveis são os seguintes -

wrap - Envolve os componentes filhos, se nenhum espaço estiver disponível na direção fornecida (flexDirection).

wrap-reverse - O mesmo que embrulhar, exceto o fluxo do componente na direção oposta.

Vamos adicionar a propriedade flexWrap e definir seu valor como wrap. Adicione também mais três filhos conforme especificado abaixo -

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

Resultado

Abaixo está a saída para flexWrap -

JustifyContent

Ele representa como os componentes filhos são organizados em relação uns aos outros e à estrutura geral. Possui três propriedades conforme especificado abaixo -

flex-end - Empacota o componente filho em direção à linha final.

space-between - Embala o componente filho distribuindo uniformemente em linha.

space-around - Semelhante ao espaço entre, exceto que empacota o componente filho, distribuindo uniformemente em linha, bem como igual espaço ao redor deles.

Vamos adicionar justifyContent também e verificar como ele se comporta -

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

Resultado

Abaixo está a saída do Flex Layout - JustifyContent -

O contêiner FlexLayout fornece mais duas propriedades para seus filhos para especificar a ordem e a capacidade de redução. Eles são os seguintes -

order - Determina a ordem em que os filhos do contêiner FlexLayout serão renderizados.

flexShrink - Determina a capacidade das crianças de diminuir para o nível 0.