Rozmieszczanie widoków za pomocą obiektu StackLayout

10 min

Skumulowanie widoków na liście pionowej lub poziomej jest typowym projektem interfejsów użytkownika. Zastanów się nad niektórymi typowymi stronami w aplikacjach. Przykłady obejmują strony logowania, rejestrowania i ustawień. Wszystkie te strony zwykle zawierają skumulowaną zawartość. W tej lekcji dowiesz się, jak rozmieścić widoki na liście pionowej lub poziomej przy użyciu StackLayout oraz zoptymalizowanych kontrolek VerticalStackLayout StackLayout i HorizontalStackLayout.

Co to jest stackLayout, VerticalStackLayout i HorizontalStackLayout?

StackLayout to kontener układu, który organizuje widoki podrzędne od lewej do prawej lub od góry do dołu. Kierunek jest oparty na jego Orientation właściwości, a wartość domyślna to od góry do dołu. Poniższa ilustracja przedstawia koncepcyjny widok pionowy StackLayout.

Ilustracja przedstawiająca cztery bloki ułożone pionowo od góry do dołu ekranu.

StackLayoutzawiera listę, którą dziedziczy ze swojej klasy Childrenbazowej Layout<T> . Lista zawiera widoki, co jest przydatne, ponieważ większość elementów interfejsu użytkownika, z którymi pracujesz w interfejsie użytkownika aplikacji wieloplatformowej (MAUI) platformy .NET, pochodzi z .View Panele układu pochodzą również z Viewelementu , co oznacza, że można zagnieżdżać panele, jeśli zajdzie taka potrzeba.
VerticalStackLayout i HorizontalStackLayout są preferowanymi układami do użycia, gdy wiesz, że orientacja nie zostanie zmieniona, ponieważ są zoptymalizowane pod kątem wydajności.

Jak dodać widoki do obiektu StackLayout

W programie .NET MAUI można dodawać widoki do StackLayout kodu w języku C# lub w języku Extensible Application Markup Language (XAML). Oto przykład trzech widoków dodanych przy użyciu kodu:

<StackLayout x:Name="stack">
</StackLayout>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
        var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
        var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };

        stack.Children.Add(a);
        stack.Children.Add(b);
        stack.Children.Add(c);
    }
}

Widoki można dodawać do Children kolekcji i StackLayout automatycznie umieszczać widoki na liście pionowej. Oto jak wygląda na urządzeniu z systemem Android:

Zrzut ekranu przedstawiający trzy pola ułożone pionowo u góry ekranu na urządzeniu z systemem Android.

Aby wykonać to samo w języku XAML, zagnieżdż elementy podrzędne wewnątrz tagów StackLayout . Analizator XAML automatycznie dodaje zagnieżdżone widoki do Children kolekcji, ponieważ Children jest elementem ContentProperty dla wszystkich paneli układu. Oto przykład tych samych trzech widoków dodawanych do elementu StackLayout w języku XAML:

<StackLayout>
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

Jak widoki są uporządkowane w obiekcie StackLayout

Kolejność widoków w Children kolekcji określa ich kolejność układu podczas ich renderowania. W przypadku widoków dodanych w języku XAML jest używana kolejność tekstowa. W przypadku elementów podrzędnych dodanych w kodzie kolejność wywołania Add metody określa kolejność układu.

Jak zmienić odstęp między widokami w obiekcie StackLayout

Często warto chcieć przestrzeń między elementami podrzędnych obiektu StackLayout. StackLayout umożliwia kontrolowanie przestrzeni między poszczególnymi elementami podrzędnych przy użyciu Spacing właściwości . Wartość domyślna to zero jednostek, ale można ustawić ją na niezależnie od tego, co wygląda dobrze. Oto przykład ustawienia właściwości Spacing w języku 30 XAML:

<StackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

Poniższy zrzut ekranu przedstawia sposób renderowania interfejsu użytkownika w systemie Android:

Zrzut ekranu przedstawiający trzy pola ułożone pionowo na urządzeniu z systemem Android z 30 odstępami między poszczególnymi.

Jak ustawić orientację obiektu StackLayout

StackLayout Umożliwia rozmieszczenie elementów podrzędnych w kolumnie lub wierszu. To zachowanie można kontrolować, ustawiając jego Orientation właściwość. Do tej pory pokazaliśmy tylko pionowy StackLayoutelement .

Wartość domyślna to Vertical. Niezależnie od tego, czy jawnie ustawisz właściwość Orientation na Vertical wartość , jest dla Ciebie. Niektórzy programiści wolą jawne ustawienie, aby kod był bardziej dokumentujący samodzielnie.

Oto przykład ustawienia wartości na OrientationHorizontal w języku XAML:

<StackLayout x:Name="stack" Orientation="Horizontal">
    <BoxView Color="Silver" WidthRequest="40"/>
    <BoxView Color="Blue" WidthRequest="40"/>
    <BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>

Uwaga

Jak opisano w poprzednim ćwiczeniu, zmiana orientacji StackPanel powoduje, że ignoruje HeightRequest właściwości każdego BoxViewelementu . Zamiast tego należy ustawić wartość WidthRequest. Poniższy zrzut ekranu przedstawia sposób renderowania interfejsu użytkownika na urządzeniu z systemem Android:

Zrzut ekranu przedstawiający trzy pola rozciągające pełny ekran w pionie, z których każdy jest ułożone w poziomie od lewej do prawej.

Ustawianie opcji LayoutOptions widoku w obiekcie StackLayout

Każdy widok ma VerticalOptions właściwość i HorizontalOptions . Za pomocą tych właściwości można ustawić położenie widoku w prostokątnym obszarze wyświetlania udostępnionym przez panel układu.

Jak wspomniano wcześniej, zachowanie StackLayoutLayoutOptions właściwości zależy od Orientation właściwości StackLayout. StackLayout LayoutOptions używa właściwości w kierunku przeciwnym do właściwości Orientation. Domyślnie element w układzie stosu nie ma przydzielonego dodatkowego miejsca w tym samym kierunku co Orientation układ stosu. Przypisanie położenia dla tego kierunku w tym przypadku domyślnym nie powoduje zmiany renderowania elementu. Istnieje jednak zmiana renderowania, gdy pozycja jest połączona z rozszerzeniem.

A co z rozszerzeniem?

Przypomnij sobie z wcześniejszej lekcji, że LayoutOptions struktura zawiera bool właściwość o nazwie Expands , która jest teraz przestarzała w programie .NET MAUI. Po ustawieniu parametru VerticalOptions i HorizontalOptionsmożna zauważyć LayoutOptions wartości StartAndExpand, CenterAndExpand, EndAndExpandi FillAndExpand. Jeśli ustawisz LayoutOptions jedną z tych AndExpand opcji, opcja zostanie zignorowana, a pierwsza część LayoutOptions elementu zostanie użyta, na przykład Start, Center, Endlub Fill. Jeśli przeprowadzasz migrację z zestawu narzędzi Xamarin.Forms, usuń wszystkie AndExpand z tych właściwości. W dalszej części modułu zobaczymy, jak osiągnąć podobną funkcjonalność, gdy dowiemy się o Gridsystemie .

Zoptymalizowane stosy

Jak wspomniano wcześniej, kontrolki VerticalStackLayout i HorizontalStackLayout są zoptymalizowane StackLayout pod kątem wstępnie zdefiniowanych orientacji. Zalecamy, aby w miarę możliwości używać tych kontrolek, aby uzyskać najlepszą wydajność układu. Te układy mają funkcjonalność LayoutOptions i Spacing że jest to regularne StackLayout .

<VerticalStackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>

<HorizontalStackLayout Spacing="30">
    <BoxView Color="Silver" WidthRequest="40" />
    <BoxView Color="Blue" WidthRequest="40" />
    <BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>