Krótka odpowiedź
Start
, Center
, End
I Fill
określić widoku za wyrównanie w jego przestrzeni .
Expand
określa, czy zajmuje więcej miejsca, jeśli jest dostępne.
Teoria
Struktura LayoutOptions
kontroluje dwa różne zachowania:
Wyrównanie: w jaki sposób widok jest wyrównany w widoku nadrzędnym?
Start
: W przypadku wyrównania w pionie widok jest przenoszony na górę. W przypadku wyrównania poziomego jest to zwykle lewa strona. (Pamiętaj jednak, że na urządzeniach z ustawieniem języka od prawej do lewej jest odwrotnie, tj. Wyrównanie do prawej).
Center
: Widok jest wyśrodkowany.
End
: Zwykle widok jest wyrównany do dołu lub do prawej. (Oczywiście w językach zapisywanych od prawej do lewej z wyrównaniem do lewej).
Fill
: To wyrównanie jest nieco inne. Widok rozciąga się na cały rozmiar widoku macierzystego.
Jeśli jednak rodzic nie jest większy niż jego dzieci, nie zauważysz żadnej różnicy między tymi wyrównaniami. Wyrównanie ma znaczenie tylko w przypadku widoków nadrzędnych z dostępną dodatkową przestrzenią.
Rozszerzenie: czy element zajmie więcej miejsca, jeśli będzie dostępny?
- Przyrostek
Expand
: jeśli widok nadrzędny jest większy niż łączny rozmiar wszystkich jego elementów podrzędnych, tj. Dostępna jest dodatkowa przestrzeń, wówczas przestrzeń jest proporcjonalna do widoków potomnych z tym przyrostkiem. Te dzieci „zajmą” swoją przestrzeń, ale niekoniecznie ją „wypełnią”. Przyjrzymy się temu zachowaniu w poniższym przykładzie.
- Bez przyrostka: dzieci bez
Expand
przyrostka nie otrzymają dodatkowej przestrzeni, nawet jeśli jest więcej miejsca.
Ponownie, jeśli widok nadrzędny nie jest większy niż jego dzieci, przyrostek rozwinięcia również nie robi żadnej różnicy.
Przykład
Spójrzmy na poniższy przykład, aby zobaczyć różnicę między wszystkimi ośmioma opcjami układu.
Aplikacja zawiera ciemnoszary StackLayout
z ośmioma zagnieżdżonymi białymi przyciskami, z których każdy jest oznaczony opcją układu pionowego. Po kliknięciu jednego z przycisków przypisuje opcję układu pionowego do układu stosu. W ten sposób możemy łatwo przetestować interakcję widoków z rodzicami, zarówno z różnymi opcjami układu.
(W ostatnich kilku wierszach kodu pojawiają się dodatkowe żółte pola. Wrócimy do tego za chwilę).
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,
});
}
}
Poniższe zrzuty ekranu pokazują wynik po kliknięciu każdego z ośmiu przycisków. Dokonujemy następujących obserwacji:
- Dopóki rodzic
stackLayout
jest ciasny (nie ma Fill
strony), opcja układu pionowego każdego z nich Button
jest pomijalna.
- Opcja układu pionowego ma znaczenie tylko wtedy, gdy
stackLayout
jest większy (np. Przez Fill
wyrównanie), a poszczególne przyciski mają Expand
sufiks.
- Dodatkowa przestrzeń jest wyraźnie proporcjonalna wśród wszystkich przycisków z
Expand
przyrostkiem. Aby to lepiej zobaczyć, dodaliśmy żółte poziome linie między każdymi dwoma sąsiednimi przyciskami.
- Przyciski z większą przestrzenią niż żądana wysokość niekoniecznie ją „wypełniają”. W tym przypadku faktyczne zachowanie jest kontrolowane przez ich wyrównanie. Np. Są wyrównane na górze, na środku lub na przycisku swojej przestrzeni lub całkowicie ją wypełniają.
- Wszystkie przyciski obejmują całą szerokość układu, ponieważ modyfikujemy tylko
VerticalOptions
.
Tutaj znajdziesz odpowiednie zrzuty ekranu w wysokiej rozdzielczości.