NativeScript - Conteneurs de mise en page

NativeScript fournit une collection de composants de conteneur dans le seul but de disposer le composant de widget d'interface utilisateur. Les conteneurs de disposition agissent comme le composant parent et peuvent avoir un ou plusieurs composants enfants. Tous les composants enfants d'un conteneur de disposition peuvent être organisés en fonction de la technique fournie par son conteneur de disposition parent.

NativeScript prend en charge six conteneurs de dispositions et ils sont les suivants -

  • Conteneur de mise en page absolu

  • Conteneur de disposition de quai

  • Conteneur de disposition de grille

  • Conteneur de disposition de pile

  • Conteneur de mise en page Wrap

  • Conteneur de mise en page FlexBox

Apprenons en détail tous les concepts de conteneur de mise en page dans ce chapitre.

Disposition absolue

AbsoluteLayoutcontainer est le conteneur de mise en page le plus simple de NativeScript. AbsoluteLayout n'applique aucune contrainte sur ses enfants et placera ses enfants à l'intérieur en utilisant un système de coordonnées bidimensionnel avec le coin supérieur gauche comme origine.

AbsoluteLayout utilise quatre propriétés de ses enfants pour les positionner et elles sont les suivantes -

top - Définit le placement de l'enfant à partir de l'origine en descendant dans la direction y.

left - Définit le placement de l'enfant depuis l'origine en se déplaçant latéralement dans la direction x.

width - Définit la largeur de l'enfant.

height - Définit la hauteur de l'enfant.

Ajoutons le conteneur AbsoluteLayout dans la page d'accueil de notre application comme ci-dessous -

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

Production

La sortie d'AbsoluteLayout est comme donnée ci-dessous -

DockLayout

DocklayoutLe composant container permet à ses enfants de s'y ancrer. Chaque côté du conteneur (haut, bas, gauche, droite) peut ancrer un composant enfant. Le conteneur DockLayout utilise la propriété dock de ses enfants pour les ancrer correctement.

Les valeurs possibles de la propriété dock sont les suivantes -

top - Le conteneur de mise en page ancre le composant enfant dans le coin supérieur.

bottom - Le conteneur de mise en page ancre le composant enfant dans le coin inférieur.

left - Le conteneur de mise en page ancre le composant enfant dans le coin gauche.

right - Le conteneur de mise en page ancre le composant enfant dans le coin droit.

Par défaut, DockLayoutconteneur ancre son dernier composant enfant. Il peut remplacer en définissant sa propriété stretchLastChild sur zéro.

Ajoutons DockLayout conteneur dans la page d'accueil de notre application comme ci-dessous -

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

Production

Voici la sortie pour DockLayout -

Disposition de la grille

Le composant conteneur GridLayout est l'un des conteneurs de disposition complexes et organise les éléments enfants au format tabulaire avec des lignes et des colonnes. Par défaut, il comporte une ligne et une colonne. Il a les propriétés suivantes -

columns- Utilisé pour représenter la largeur par défaut de chaque colonne séparée par,. Les valeurs possibles sont number, * et auto keyword.

Où,

  • nombre indique une largeur de colonne absolue.

  • indique la largeur d'une colonne par rapport aux autres colonnes. Il peut être précédé d'un nombre pour indiquer combien de fois la largeur de la colonne doit être relative à une autre colonne. Par exemple, 2 * indique la largeur de la colonne doit être 2 fois la largeur de la plus petite colonne.

  • auto indique la largeur de la colonne aussi large que son enfant le plus large.

Par exemple, *, 2 * signifie deux colonnes et la seconde aura deux fois la taille de la première colonne.

rows - Utilisé pour représenter la hauteur par défaut de chaque ligne séparée par,. La représentation de la valeur est similaire aux colonnes.

GridLayout utilise les propriétés spécifiées ci-dessous de ses enfants pour les mettre en page -

row - Numéro de ligne

col - Numéro de colonne

rowSpan - nombre total de lignes que le contenu enfant couvre dans une mise en page.

colSpan - nombre total de colonnes que le contenu enfant couvre dans une mise en page.

Ajoutons le conteneur GridLayout dans la page d'accueil de notre application comme ci-dessous -

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

Production

Voici la sortie pour GridLayout -

StackLayout

StackLayout organise ses enfants dans une ligne unidimensionnelle horizontalement ou verticalement. Il peut être dimensionné en fonction de l'espace dans la mise en page à l'aide des options de mise en page. Il a une propriété d'orientation qui peut être utilisée pour spécifier la direction, horizontale ou verticale.

Ajoutons le conteneur StackLayout dans la page d'accueil de notre application comme ci-dessous -

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

Production

La sortie pour StackLayout est comme indiqué ci-dessous -

WrapLayout

WrapLayout est utilisé pour envelopper le contenu sur de nouvelles lignes ou colonnes.

Il a les trois propriétés suivantes -

orientation - afficher horizontalement ou verticalement.

itemWidth - largeur de mise en page pour chaque enfant.

itemHeight - hauteur de mise en page pour chaque enfant.

Ajoutons le conteneur WrapLayout dans la page d'accueil de notre application comme ci-dessous -

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

Production

Disposition Flexbox

Le composant conteneur FlexboxLayout est l'un des conteneurs de mise en page avancés. Il offre la possibilité de rendre une mise en page simple en mises en page très complexes et sophistiquées. Il est basé sur la CSS Flexbox.

Le composant FlexboxLayout a beaucoup de propriétés et elles sont les suivantes -

flexDirection

Il représente la direction dans laquelle les composants enfants sont disposés. Les valeurs possibles de flexDirection sont les suivantes -

row - Les composants enfants sont disposés côte à côte.

row-reverse - Les composants enfants sont disposés côte à côte mais en sens inverse.

column - Les composants enfants sont disposés les uns en dessous des autres.

column-reverse - Les composants enfants sont disposés les uns en dessous des autres mais en sens inverse.

Ajoutons le conteneur FlexLayout dans la page d'accueil de notre application comme ci-dessous -

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

Production

Voici la sortie de FlexLayout - Row -

Maintenant, changeons la valeur flexDirection de ligne en ligne inversée et vérifions comment cela affecte la disposition.

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

Production

Vous trouverez ci-dessous la sortie de Flex Layout - Row Reverse -

Modifions la valeur flexDirection de ligne inversée à colonne et vérifions comment cela affecte la mise en page.

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

Production

La sortie pour FlexLayout - Colonne est donnée ci-dessous -

Modifions la valeur flexDirection de colonne en colonne inversée et vérifions comment cela affecte la mise en page.

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

Production

Vous trouverez ci-dessous la sortie de FlexLayout - Column Reverse -

flexWrap

Il indique si les composants enfants seront rendus dans une seule ligne / colonne ou s'ils se répartissent sur plusieurs lignes en s'enroulant dans la direction définie par flexDirection.

Les valeurs possibles sont les suivantes -

wrap - Enveloppe les composants enfants, si aucun espace n'est disponible dans la direction donnée (flexDirection).

wrap-reverse - Identique à l'enroulement sauf que le composant s'écoule dans le sens opposé.

Ajoutons la propriété flexWrap, puis définissons sa valeur comme wrap. Ajoutez également trois autres enfants comme indiqué ci-dessous -

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

Production

Voici la sortie pour flexWrap -

Justifier le contenu

Il représente la manière dont les composants enfants sont organisés les uns par rapport aux autres et à la structure globale. Il a trois propriétés comme spécifié ci-dessous -

flex-end - Il emballe le composant enfant vers la ligne de fin.

space-between - Il emballe le composant enfant en le distribuant uniformément en ligne.

space-around - Similaire à l'espace-entre, sauf qu'il emballe le composant enfant en répartissant uniformément en ligne ainsi qu'un espace égal autour d'eux.

Ajoutons également justifyContent et vérifions comment il se comporte -

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

Production

Voici la sortie de Flex Layout - JustifyContent -

Le conteneur FlexLayout fournit deux autres propriétés à ses enfants pour spécifier l'ordre et la capacité de réduction. Ils sont les suivants -

order - Il détermine l'ordre dans lequel les enfants du conteneur FlexLayout seront rendus.

flexShrink - Il détermine la capacité des enfants à se réduire au niveau 0.