Another Vue of NativeScript 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.

El contenedor <StackLayout> apila los elementos hijos de forma vertical (comportamiento por defecto) u horizontal.

Ejemplos

Apilamiento vertical (valor por defecto)

El siguiente ejemplo crea una pila vertical de tres elementos equivalentes en tamaño. Los elementos son estirados para cubrir todo el alto de la pantalla. Los elementos se colocan en órden de declaración.

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

Apilamiento horizontal

El siguiente ejemplo crea una pila horizontal de tres elementos equivalentes en tamaño. Los elementos son estirados para cubrir todo el alto de la pantalla. Los elementos se colocan en órden de declaración.

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

Apilamiento vertical con elementos hijos alineados horizontalmente

El siguiente ejemplo crea una pila de elementos responsive de forma diagonal. Los elementos estan apilados verticalmente.

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

Apilamiento horizontal con elementos hijos alineados verticalmente

El siguiente ejemplo crea una pila de elementos responsive de forma diagonal. Los elementos estan apilados horizontalmente.

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

Propiedades

NombreTipoDescripción
orientationStringEspecifica la direccion de apilamiento. Posibles valores: vertical y horizontal.
Valor por defecto: vertical.

Propiedades de elementos hijos

No existen propiedades adicionales para los elementos hijos.

Contributors