Rozmieszczanie widoków za pomocą obiektu StackLayout

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.

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

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:

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>

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>