Another Vue of NativeScript Webinar is now on YouTube
DockLayout

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

El contenedor <DockLayout> provee un mecanismo de acoplamiento para los elementos hijos que permite ubicarlos a los costados o en el centro del contenedor.

<DockLayout> se comporta de la siguiente forma:

  • Usa la propiedad dock para ubicar los elementos con los valores: left, right, top, bottom.
  • Permite acoplar un elemento hijo en el centro del contenedor. En ese caso, este deberá ser el último hijo del contenedor <DockLayout> y la propiedad de stretchLastChild (de <DockLayout>) deberá tener el valor true.
  • Fuerza restricciones de posicionamiento sobre los elementos hijos.
  • Redimensiona los elementos hijos en tiempo de ejecución, cuando estos cambian de tamaño.

Ejemplos

Acoplar a cada lado sin estirar el último elemento hijo

<DockLayout stretchLastChild="false" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
</DockLayout>

Acoplar a cada lado estirando el último elemento hijo

El siguiente ejemplo muestra como la propiedad stretchLastChild afecta la posición de los elementos hijos en un contenedor <DockLayout>. El último elemento (con la propiedad dock="bottom"), es estirado para que ocupe el resto del espacio disponible luego del posicionamiento de los primeros tres elementos.

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" backgroundColor="#1c6b48"/>
</DockLayout>

Acoplar a ambos lados y al centro

El siguiente ejemplo crea un contenedor <DockLayout> de cinco elementos. Los primeros cuatro elementos envuelven al elemento del centro en un cuadro.

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="top" dock="top" height="40" backgroundColor="#289062"/>
  <Label text="right" dock="right" width="40" backgroundColor="#43b883"/>
  <Label text="bottom" dock="bottom" height="40" backgroundColor="#289062"/>
  <Label text="center" backgroundColor="#1c6b48" />
</DockLayout>

Múltiples elementos hijos en el mismo lado

El siguiente ejemplo crea una sola línea de posicionamiento, con cuatro elementos que se estiran a lo largo y ancho de la pantalla.

<DockLayout stretchLastChild="true" backgroundColor="#3c495e">
  <Label text="left 1" dock="left" width="40" backgroundColor="#43b883"/>
  <Label text="left 2" dock="left" width="40" backgroundColor="#289062"/>
  <Label text="left 3" dock="left" width="40" backgroundColor="#1c6b48"/>
  <Label text="last child" backgroundColor="#43b883"/>
</DockLayout>

Propiedades

NombreTipoDescripción
stretchLastChildBooleanHabilita o deshabilita la posibilidad de que el último elemento hijo se estire para encajar en todo el espacio restante.

Propiedades de elementos hijos

Cuando un elemento es hijo directo de DockLayout, las siguientes propiedades pueden ser utilizadas en ese elemento hijo:

NombreTipoDescripción
dockStringEspecifica a que lado del contenedor DockLayout se va acoplar el elemento. Posibles valores: top, right, bottom, left.
Contributors