NativeScript - Contenedores de diseño

NativeScript proporciona una colección de componentes de contenedor con el único propósito de diseñar el componente de widget de IU. Los contenedores de diseño actúan como el componente principal y pueden tener uno o más componentes secundarios. Todos los componentes secundarios de un contenedor de diseño se pueden organizar según la técnica proporcionada por su contenedor de diseño principal.

NativeScript admite seis contenedores de diseños y son los siguientes:

  • Contenedor de diseño absoluto

  • Contenedor de diseño de muelle

  • Contenedor de diseño de cuadrícula

  • Contenedor de diseño de pila

  • Envase contenedor de diseño

  • Contenedor de diseño FlexBox

Aprendamos todos los conceptos de contenedor de diseño en detalle en este capítulo.

Diseño absoluto

AbsoluteLayoutcontainer es el contenedor de diseño más simple en NativeScript. AbsoluteLayout no impone ninguna restricción a sus hijos y colocará a sus hijos dentro de él utilizando un sistema de coordenadas bidimensional con la esquina superior izquierda como origen.

AbsoluteLayout usa cuatro propiedades de sus hijos para posicionarlos y son las siguientes:

top - Define la ubicación del niño desde el origen moviéndose hacia abajo en la dirección y.

left - Define la ubicación del niño desde el origen moviéndose hacia los lados en la dirección x.

width - Define el ancho del niño.

height - Define la altura del niño.

Agreguemos el contenedor AbsoluteLayout en la página de inicio de nuestra aplicación como se muestra a continuación:

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

Salida

La salida de AbsoluteLayout es la siguiente:

DockLayout

DocklayoutEl componente contenedor permite a sus hijos acoplarse dentro de él. Cada lado del contenedor (superior, inferior, izquierdo, derecho) puede acoplar un componente secundario. El contenedor DockLayout usa la propiedad dock de sus hijos para acoplarlos correctamente.

Los posibles valores de la propiedad dock son los siguientes:

top - El contenedor de diseño acopla el componente secundario en la esquina superior.

bottom - El contenedor de diseño acople el componente secundario en la esquina inferior.

left - El contenedor de diseño acopla el componente secundario en la esquina izquierda.

right - El contenedor de diseño acople el componente secundario en la esquina derecha.

Por defecto, DockLayoutcontenedor acopla su último componente hijo. Puede anular estableciendo su propiedad stretchLastChild en cero.

Agreguemos DockLayout contenedor en la página de inicio de nuestra aplicación como se muestra a continuación:

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

Salida

A continuación se muestra el resultado de DockLayout:

Diseño de cuadrícula

El componente contenedor GridLayout es uno de los contenedores de diseño complejo y organiza los elementos secundarios en formato tabular con filas y columnas. Por defecto, tiene una fila y una columna. Tiene las siguientes propiedades:

columns- Se utiliza para representar el ancho predeterminado de cada columna separada por,. Los valores posibles son número, * y palabra clave auto.

Dónde,

  • número indica un ancho de columna absoluto.

  • indica el ancho de una columna en relación con otras columnas. Puede ir precedido de un número para indicar cuántas veces el ancho de la columna debe ser relativo a otra columna. Por ejemplo, 2 * indica el ancho de la columna debe ser 2 veces el ancho de la columna más pequeña.

  • auto indica el ancho de la columna tan ancho como su hijo más ancho.

Por ejemplo, *, 2 * significa dos columnas y la segunda tendrá el doble del tamaño de la primera columna.

rows - Se utiliza para representar la altura predeterminada de cada fila separada por,. La representación de valores es similar a las columnas.

GridLayout usa las propiedades especificadas a continuación de sus hijos para diseñarlos:

row - Número de fila

col - Número de columna

rowSpan - número total de filas que abarca el contenido secundario dentro de un diseño.

colSpan - número total de columnas que abarca el contenido secundario dentro de un diseño.

Agreguemos el contenedor GridLayout en la página de inicio de nuestra aplicación como se muestra a continuación:

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

Salida

A continuación se muestra el resultado de GridLayout:

StackLayout

StackLayout organiza sus elementos secundarios en una línea unidimensional, ya sea horizontal o verticalmente. Se puede dimensionar en función del espacio en el diseño utilizando las opciones de diseño. Tiene una propiedad de orientación que se puede utilizar para especificar la dirección, horizontal o vertical.

Agreguemos el contenedor StackLayout en la página de inicio de nuestra aplicación como se muestra a continuación:

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

Salida

La salida de StackLayout es la que se muestra a continuación:

WrapLayout

WrapLayout se usa para envolver contenido en nuevas filas o columnas.

Tiene las siguientes tres propiedades:

orientation - mostrar horizontal o verticalmente.

itemWidth - ancho de diseño para cada niño.

itemHeight - altura de diseño para cada niño.

Agreguemos el contenedor WrapLayout en la página de inicio de nuestra aplicación como se muestra a continuación:

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

Salida

Diseño de caja flexible

El componente contenedor FlexboxLayout es uno de los contenedores de diseño avanzado. Brinda la opción de renderizar un diseño simple en diseños muy complejos y sofisticados. Está basado en CSS Flexbox.

El componente FlexboxLayout tiene muchas propiedades y son las siguientes:

flexDirection

Representa la dirección en la que se organizan los componentes secundarios. Los posibles valores de flexDirection son los siguientes:

row - Los componentes del niño están dispuestos uno al lado del otro.

row-reverse - Los componentes secundarios están dispuestos uno al lado del otro pero en sentido inverso.

column - Los componentes secundarios están dispuestos uno debajo del otro.

column-reverse - Los componentes secundarios están dispuestos uno debajo del otro pero en sentido inverso.

Agreguemos el contenedor FlexLayout en la página de inicio de nuestra aplicación como se muestra a continuación:

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

Salida

A continuación se muestra la salida de FlexLayout - Row -

Ahora, cambiemos el valor de flexDirection de row a row-reverse y verifiquemos cómo afecta el diseño.

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

Salida

A continuación se muestra la salida de Flex Layout - Row Reverse -

Cambiemos el valor de flexDirection de row-reverse a column y verifiquemos cómo afecta el diseño.

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

Salida

La salida para FlexLayout - Column se da a continuación:

Cambiemos el valor de flexDirection de column a column-reverse y verifiquemos cómo afecta el diseño.

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

Salida

A continuación se muestra la salida de FlexLayout - Column Reverse -

flexWrap

Representa si los componentes secundarios se representarán en una sola fila / columna o fluirán en varias filas al ajustar en la dirección establecida por flexDirection.

Los valores posibles son los siguientes:

wrap - Envuelve los componentes secundarios, si no hay espacio disponible en la dirección dada (flexDirection).

wrap-reverse - Igual que la envoltura excepto que el componente fluye en dirección opuesta.

Agreguemos la propiedad flexWrap y luego establezcamos su valor como wrap. También agregue tres niños más como se especifica a continuación:

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

Salida

A continuación se muestra el resultado de flexWrap:

JustifyContent

Representa cómo se organizan los componentes secundarios entre sí y con la estructura general. Tiene tres propiedades como se especifica a continuación:

flex-end - Empaqueta el componente secundario hacia la línea final.

space-between - Empaqueta el componente secundario distribuyéndolo uniformemente en línea.

space-around - Similar a space-between, excepto que empaqueta el componente secundario distribuyéndolo uniformemente en línea y con el mismo espacio a su alrededor.

Agreguemos también justifyContent y verifiquemos cómo 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>

Salida

A continuación se muestra el resultado de Flex Layout - JustifyContent -

El contenedor FlexLayout proporciona dos propiedades más para que sus hijos especifiquen el orden y la capacidad de encoger. Son los siguientes:

order - Determina el orden en el que se procesarán los elementos secundarios del contenedor FlexLayout.

flexShrink - Determina la capacidad de los niños de encogerse al nivel 0.