NativeScript - Contenitori di layout
NativeScript fornisce una raccolta di componenti contenitore al solo scopo di disporre il componente widget dell'interfaccia utente. I contenitori di layout fungono da componente padre e possono avere uno o più componenti figlio. Tutti i componenti figlio di un contenitore di layout possono essere disposti in base alla tecnica fornita dal contenitore di layout padre.
NativeScript supporta sei contenitori di layout e sono i seguenti:
Contenitore di layout assoluto
Contenitore layout dock
Contenitore layout griglia
Contenitore layout stack
Avvolgi il contenitore del layout
Contenitore layout FlexBox
Impariamo in dettaglio tutti i concetti del contenitore di layout in questo capitolo.
Layout assoluto
AbsoluteLayoutcontainer è il più semplice contenitore di layout in NativeScript. AbsoluteLayout non applica alcun vincolo ai suoi figli e posizionerà i suoi figli al suo interno usando il sistema di coordinate bidimensionale con l'angolo in alto a sinistra come origine.
AbsoluteLayout utilizza quattro proprietà dei suoi figli per posizionarli e sono i seguenti:
top - Definisce la posizione del bambino dall'origine spostandosi verso il basso in direzione y.
left - Definisce la posizione del bambino dall'origine spostandosi lateralmente in direzione x.
width - Definisce la larghezza del bambino.
height - Definisce l'altezza del bambino.
Aggiungiamo il contenitore AbsoluteLayout nella home page della nostra applicazione come di seguito:
<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>Produzione
L'output di AbsoluteLayout è il seguente:
DockLayout
DocklayoutIl componente contenitore consente ai suoi figli di agganciarsi al suo interno. Ogni lato del contenitore (superiore, inferiore, sinistro, destro) può ancorare un componente figlio. Il contenitore DockLayout usa la proprietà dock dei suoi figli per ancorarli correttamente.
I possibili valori della proprietà dock sono i seguenti:
top - Il contenitore layout aggancia il componente figlio nell'angolo superiore.
bottom - Il contenitore layout aggancia il componente figlio nell'angolo inferiore.
left - Il contenitore del layout aggancia il componente figlio nell'angolo sinistro.
right - Il contenitore layout aggancia il componente figlio nell'angolo destro.
Per impostazione predefinita, DockLayoutcontainer aggancia il suo ultimo componente figlio. Può eseguire l'override impostando la sua proprietà stretchLastChild su zero.
Aggiungiamo DockLayout container nella home page della nostra applicazione come di seguito -
<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>Produzione
Di seguito è riportato l'output per DockLayout:
Layout della griglia
Il componente contenitore GridLayout è uno dei contenitori di layout complessi e dispone gli elementi figlio in formato tabulare con righe e colonne. Per impostazione predefinita, ha una riga e una colonna. Ha le seguenti proprietà:
columns- Utilizzato per rappresentare la larghezza predefinita di ogni colonna separata da,. I valori possibili sono numero, * e parola chiave automatica.
Dove,
numero indica una larghezza di colonna assoluta.
indica la larghezza di una colonna rispetto ad altre colonne. Può essere preceduto da un numero per indicare quante volte la larghezza della colonna dovrebbe essere relativa a un'altra colonna. Ad esempio, 2 * indica la larghezza della colonna dovrebbe essere 2 volte la larghezza della colonna più piccola.
auto indica la larghezza della colonna larga quanto il suo figlio più largo.
Ad esempio, *, 2 * significa due colonne e la seconda sarà il doppio della dimensione della prima colonna.
rows - Utilizzato per rappresentare l'altezza predefinita di ogni riga separata da,. La rappresentazione del valore è simile alle colonne.
GridLayout utilizza le proprietà specificate di seguito dei suoi figli per impaginarli -
row - Numero di riga
rowSpan - numero totale di righe su cui si estende il contenuto figlio all'interno di un layout.
colSpan - numero totale di colonne su cui si estende il contenuto figlio all'interno di un layout.
Aggiungiamo il contenitore GridLayout nella home page della nostra applicazione come di seguito -
<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>Produzione
Di seguito è riportato l'output per GridLayout -
StackLayout
StackLayout organizza i suoi figli in una linea unidimensionale orizzontalmente o verticalmente. Può essere ridimensionato in base allo spazio nel layout utilizzando le opzioni di layout. Ha proprietà di orientamento che possono essere utilizzate per specificare la direzione, orizzontale o verticale.
Aggiungiamo il contenitore StackLayout nella home page della nostra applicazione come di seguito:
<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>Produzione
L'output per StackLayout è come mostrato di seguito:
WrapLayout
WrapLayout viene utilizzato per disporre i contenuti su nuove righe o colonne.
Ha le seguenti tre proprietà:
orientation - visualizzare in orizzontale o in verticale.
itemWidth - larghezza del layout per ogni bambino.
itemHeight - altezza del layout per ogni bambino.
Aggiungiamo il contenitore WrapLayout nella home page della nostra applicazione come di seguito:
<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>Produzione
Layout Flexbox
Il componente contenitore FlexboxLayout è uno dei contenitori di layout avanzati. Fornisce l'opzione per rendere un layout semplice in layout molto complessi e sofisticati. Si basa sul CSS Flexbox.
Il componente FlexboxLayout ha molte proprietà e sono le seguenti:
flexDirection
Rappresenta la direzione in cui sono disposti i componenti figlio. I possibili valori di flexDirection sono i seguenti:
row - I componenti figlio sono disposti uno accanto all'altro.
row-reverse - I componenti del bambino sono disposti uno accanto all'altro ma in direzione inversa.
column - I componenti figlio sono disposti uno sotto l'altro.
column-reverse - I componenti figlio sono disposti uno sotto l'altro ma in direzione inversa.
Aggiungiamo il contenitore FlexLayout nella home page della nostra applicazione come di seguito:
<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>Produzione
Di seguito è riportato l'output di FlexLayout - Row -
Ora, cambiamo il valore flexDirection da riga a riga inversa e controlliamo come influisce sul layout.
<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>Produzione
Di seguito è riportato l'output di Flex Layout - Row Reverse -
Cambiamo il valore flexDirection da row-reverse a column e controlliamo come influisce sul layout.
<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>Produzione
L'output per FlexLayout - Colonna è fornito di seguito -
Cambiamo il valore flexDirection da column a column-reverse e controlliamo come influisce sul layout.
<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>Produzione
Di seguito è riportato l'output di FlexLayout - Column Reverse -
flexWrap
Rappresenta se il rendering dei componenti figlio verrà eseguito in una singola riga / colonna o se fluirà in più righe avvolgendo nella direzione impostata da flexDirection.
I valori possibili sono i seguenti:
wrap - Avvolge i componenti figli, se non è disponibile spazio nella direzione data (flexDirection).
wrap-reverse - Come avvolgere tranne il flusso del componente nella direzione opposta.
Aggiungiamo la proprietà flexWrap e quindi impostiamo il suo valore come wrap. Aggiungi anche altri tre figli come specificato di seguito:
<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>Produzione
Di seguito è riportato l'output per flexWrap -
JustifyContent
Rappresenta il modo in cui i componenti figlio sono disposti l'uno rispetto all'altro e alla struttura complessiva. Ha tre proprietà come specificato di seguito:
flex-end - Confeziona il componente figlio verso la linea di fine.
space-between - Confeziona il componente figlio distribuendolo uniformemente in linea.
space-around - Simile allo spazio tra, tranne che racchiude il componente figlio distribuendo uniformemente in linea così come lo spazio uguale attorno ad essi.
Aggiungiamo anche justifyContent e controlliamo come si 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>Produzione
Di seguito è riportato l'output di Flex Layout - JustifyContent -
Il contenitore FlexLayout fornisce altre due proprietà ai suoi figli per specificare l'ordine e la capacità di compattarsi. Sono i seguenti:
order - Determina l'ordine in cui verranno renderizzati i figli del contenitore FlexLayout.
flexShrink - Determina la capacità dei bambini di ridursi al livello 0.