NativeScript-Vue 2.0: Back to the Vueture (Webinar) is now on YouTube
GridLayout

This is an overview of the most common usage of GridLayout. For more information about the available properties, methods, or events, head over to the complete API documentation for GridLayout.

<GridLayout> é um componenete de layout que organiza seus elementos filhos semelhante a uma tabela.

A grid consiste em linhas, colunas e células. Uma célula pode ocupar uma ou mais linhas e colunas. Pode conter múltiplos elementos filhos que podem ocupar múltiplas linhas e colunas, até uma sobrepor a outra.

Por padrão, o <GridLayout> tem uma coluna e uma linha. Você pode adicionar colunas e linhas configurando as propriedades columns e rows. Nessas propriedades, você precisa definir o número de colunas e linha, e a sua largura e altura. Você define o número de colunas e linhas, listando respectivamente suas larguras e alturas, separadas por vírgula.

Você pode definir um tamanho fixo para largura da coluna e a altura da linha, ou pode criá-los de maneira responsiva.

  • Um número absoluto: Indica um tamanho fixo.
  • auto: Deixa a coluna larga como o filho mais largo, ou deixa a linha alta como o filho mais alto.
  • *: Pega todo o espaço disponível depois de preencher todos os tamanhos automáticos e fixos das colunas ou linhas.

Veja Propriedades para mais informações.

Exemplos

Layout de Grid com tamanho fixo

O exemplo seguinte cria um simples grid 2 por 2 com larguras de colunas fixas e altura de linhas.

<GridLayout columns="115, 115" rows="115, 115">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Layout de Grid com tamanho proporcional

O exemplo seguinte cria um grid com design responsivo, onde o espaço é alocado proporcionalmente aos elementos filhos.

<GridLayout columns="*, 2*" rows="2*, 3*" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Layout de Grid com tamanho fixo e automático

<GridLayout columns="80, auto" rows="80, 80" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
</GridLayout>

Layout de Grid com mistura de tamanho e células mescladas

O exemplo seguinte cria um grid complexo com design responsivo, configurações de largura e altura diferentes, e algumas células mescladas.

<GridLayout columns="40, auto, *" rows="40, auto, *" backgroundColor="#3c495e">
  <Label text="0,0" row="0" col="0" backgroundColor="#43b883"/>
  <Label text="0,1" row="0" col="1" colSpan="2" backgroundColor="#1c6b48"/>
  <Label text="1,0" row="1" col="0" rowSpan="2" backgroundColor="#289062"/>
  <Label text="1,1" row="1" col="1" backgroundColor="#43b883"/>
  <Label text="1,2" row="1" col="2" backgroundColor="#289062"/>
  <Label text="2,1" row="2" col="1" backgroundColor="#1c6b48"/>
  <Label text="2,2" row="2" col="2" backgroundColor="#43b883"/>
</GridLayout>

Propriedades

nometipodescrição
columnsStringUm valor em texto representando as larguras das colunas delimitada por vírgula.
Valores válidos: um número absoluto, auto ou *.
Um número indica a largura absoluta da coluna. auto faz a coluna larga como o filho mais largo. * faz a coluna ocupar todo espaço disponível na horizontal. O espaço é proporcionalmente dividido com todas as colunas com asterisco. Você pode definir valores como 3* e 5* para indicar uma proporção de 3:5
rowsStringUm valor em texto representando as alturas das linhas delimitada por vírgula.
Valores válidos: um número absoluto, auto ou *.
Um número indica a altura absoluta da linha. auto faz a linha alta como o filho mais alto. * faz a linha ocupar todo espaço na vertical. O espaço é proporcionalmente dividido com todoas as linhas com asterisco. Você pode definir valores como 3* e 5* para indicar uma proporção de 3:5

Propriedades filhas adicionais

Quando um elemento é filho direto de um GridLayout, você pode trabalhar com as seguintes propriedades adicionais:

nometipodescrição
rowNumberEspecifica a linha para este elemento. Combinado com uma propriedade column, especifica a coordenada da célula do elemento.
A primeira linha é indicada por 0.
columnNumberEspecifica a coluna para o elemente. Combinado com uma propriedade row, especifica a coordenada da célula do elemento.
A primeira coluna é indica por 0.
rowSpanNumberEspecifica o número de linhas que o elemento ocupa.
colSpanNumberEspecifica o número de colunas que o elemento ocupa.
Contributors