Risposta breve
Start, Center, EndE Filldefinire della visualizzazione allineamento nel suo spazio .
Expanddefinisce se occupa più spazio se disponibile.
Teoria
La struttura LayoutOptionscontrolla due comportamenti distinti:
Allineamento: come viene allineata la vista all'interno della vista principale?
Start: Per l'allineamento verticale la vista viene spostata verso l'alto. Per l'allineamento orizzontale questo è generalmente il lato sinistro. (Si noti, tuttavia, che sui dispositivi con impostazione della lingua da destra a sinistra è il contrario, ovvero allineato a destra.)Center: La vista è centrata.End: Di solito la vista è allineata in basso o a destra. (Nelle lingue da destra a sinistra, ovviamente, allineato a sinistra.)Fill: Questo allineamento è leggermente diverso. La vista si estenderà per l'intera dimensione della vista padre.
Se il genitore, tuttavia, non è più grande dei suoi figli, non noterai alcuna differenza tra questi allineamenti. L'allineamento è importante solo per le viste principali con spazio aggiuntivo disponibile.
Espansione: l'elemento occuperà più spazio se disponibile?
- Suffisso
Expand: se la vista padre è più grande della dimensione combinata di tutti i suoi figli, ovvero è disponibile spazio aggiuntivo, allora lo spazio viene proporzionato tra le viste figlio con quel suffisso. Quei bambini "occuperanno" il loro spazio, ma non necessariamente lo "riempiranno". Daremo un'occhiata a questo comportamento nell'esempio seguente.
- Nessun suffisso: i bambini senza
Expandsuffisso non avranno spazio aggiuntivo, anche se è disponibile più spazio.
Ancora una volta, se la vista padre non è più grande dei suoi figli, anche il suffisso di espansione non fa alcuna differenza.
Esempio
Diamo un'occhiata al seguente esempio per vedere la differenza tra tutte e otto le opzioni di layout.
L'app contiene un grigio scuro StackLayoutcon otto pulsanti bianchi nidificati, ognuno dei quali è etichettato con la sua opzione di layout verticale. Facendo clic su uno dei pulsanti, assegna la sua opzione di layout verticale al layout dello stack. In questo modo possiamo facilmente testare l'interazione delle viste con i genitori, entrambe con diverse opzioni di layout.
(Le ultime righe di codice aggiungono ulteriori caselle gialle. Torneremo su questo tra un momento.)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
Le seguenti schermate mostrano il risultato quando si fa clic su ciascuno degli otto pulsanti. Facciamo le seguenti osservazioni:
- Finché il genitore
stackLayoutè stretto (non Fillla pagina), l'opzione di layout verticale di ciascuno Buttonè trascurabile.
- L'opzione di layout verticale è importante solo se
stackLayoutè più grande (ad es. Tramite Fillallineamento) e i singoli pulsanti hanno il Expandsuffisso.
- Lo spazio aggiuntivo viene eventualmente proporzionato tra tutti i pulsanti con
Expandsuffisso. Per vederlo più chiaramente, abbiamo aggiunto delle linee orizzontali gialle tra ogni due pulsanti vicini.
- I pulsanti con più spazio rispetto all'altezza richiesta non necessariamente lo "riempiono". In questo caso il comportamento effettivo è controllato dal loro allineamento. Ad esempio, sono allineati in alto, al centro o al pulsante del loro spazio o lo riempiono completamente.
- Tutti i pulsanti si estendono su tutta la larghezza del layout, poiché modifichiamo solo
VerticalOptions.
Qui trovi gli screenshot ad alta risoluzione corrispondenti.
