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

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

O StackLayout empilha os elementos filhos na vertical (padrão) ou na horizontal.

Exemplos

StackLayout padrão

<StackLayout backgroundColor="#3c495e">
  <Label text="first" height="70" backgroundColor="#43b883"/>
  <Label text="second" height="70" backgroundColor="#289062"/>
  <Label text="third" height="70" backgroundColor="#1c6b48"/>
</StackLayout>

StackLayout Horizontal

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="first" width="70" backgroundColor="#43b883"/>
  <Label text="second" width="70" backgroundColor="#289062"/>
  <Label text="third" width="70" backgroundColor="#1c6b48"/>
</StackLayout>

StackLayout com alinhamento dos filhos horizontalmente

<StackLayout backgroundColor="#3c495e">
  <Label text="left" horizontalAlignment="left"
         width="33%" height="70" backgroundColor="#43b883"/>
  <Label text="center" horizontalAlignment="center"
         width="33%" height="70" backgroundColor="#289062"/>
  <Label text="right" horizontalAlignment="right"
         width="33%" height="70" backgroundColor="#1c6b48"/>
  <Label text="stretch" horizontalAlignment="stretch"
         height="70" backgroundColor="#43b883"/>
</StackLayout>

StackLayout horizontal com filhos alinhados verticalmente

<StackLayout orientation="horizontal" backgroundColor="#3c495e">
  <Label text="top" verticalAlignment="top"
         width="70" height="33%" backgroundColor="#43b883"/>
  <Label text="center" verticalAlignment="center"
         width="70" height="33%" backgroundColor="#289062"/>
  <Label text="bottom" verticalAlignment="bottom"
         width="70" height="33%" backgroundColor="#1c6b48"/>
  <Label text="stretch" verticalAlignment="stretch"
         width="70" backgroundColor="#43b883"/>
</StackLayout>

Propriedades

nometipodescrição
orientationStringEspecifica a direção do empilhamento. Valores possíveis são vertical e horizontal. O valor padrão é vertical.

Propriedades filhas adicionais

Não existem propriedades adicionais para elementos filhos.

Contributors