VerticalStackLayout

Wieloplatformowy interfejs użytkownika aplikacji platformy .NET (.NET MAUI) VerticalStackLayout organizuje widoki podrzędne w jednowymiarowym stosie pionowym i jest bardziej wydajną alternatywą dla elementu StackLayout. Ponadto VerticalStackLayout element może służyć jako układ nadrzędny zawierający inne układy podrzędne.

Definiuje VerticalStackLayout następujące właściwości:

• Spacing, typu double, wskazuje ilość miejsca między każdym widokiem podrzędnym. Wartość domyślna tej właściwości to 0.

Ta właściwość jest wspierana BindableProperty przez obiekt, co oznacza, że może być obiektem docelowym powiązań danych i stylizowanym.

Poniższy kod XAML pokazuje, jak utworzyć obiekt VerticalStackLayout zawierający różne widoki podrzędne:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

W tym przykładzie tworzony jest obiekt VerticalStackLayout zawierający Label i Rectangle . Domyślnie między widokami podrzędnym nie ma spacji:

Uwaga

Wartość Margin właściwości reprezentuje odległość między elementem a sąsiednimi elementami. Aby uzyskać więcej informacji, zobacz Kontrolki położenia.

Odstęp między widokami podrzędnym

Odstępy między widokami podrzędnym w obiekcie VerticalStackLayout można zmienić, ustawiając Spacing właściwość na double wartość:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="10">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

W tym przykładzie tworzony jest VerticalStackLayout obiekt zawierający Label i Rectangle zawierający dziesięć niezależnych od urządzenia jednostek przestrzeni między widokami podrzędnymi:

Napiwek

Właściwość Spacing można ustawić na wartości ujemne, aby widoki podrzędne nakładały się na siebie.

Położenie i rozmiar widoków podrzędnych

Rozmiar i położenie widoków podrzędnych w obiekcie VerticalStackLayout zależą od wartości właściwości i WidthRequest widoków HeightRequest podrzędnych oraz wartości ich HorizontalOptions właściwości. VerticalStackLayoutW programie widoki podrzędne rozszerzają się, aby wypełnić dostępną szerokość, gdy ich rozmiar nie jest jawnie ustawiony.

HorizontalOptions Właściwości VerticalStackLayoutobiektu i jego widoków podrzędnych można ustawić na pola z LayoutOptions struktury, która hermetyzuje preferencję układu wyrównania. Ta preferencja układu określa położenie i rozmiar widoku podrzędnego w układzie nadrzędnym.

Napiwek

Nie ustawiaj HorizontalOptions właściwości obiektu VerticalStackLayout , chyba że musisz. Wartość domyślna parametru LayoutOptions.Fill umożliwia najlepszą optymalizację układu. Zmiana tej właściwości ma koszt i zużywa pamięć nawet podczas ustawiania jej z powrotem na wartość domyślną.

Poniższy przykład XAML ustawia preferencje wyrównania dla każdego widoku podrzędnego w pliku VerticalStackLayout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
        <Label Text="Start"
               BackgroundColor="Gray"
               HorizontalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               HorizontalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               HorizontalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               HorizontalOptions="Fill" />
    </VerticalStackLayout>
</ContentPage>

W tym przykładzie preferencje wyrównania są ustawiane na Label obiektach, aby kontrolować ich położenie w obiekcie VerticalStackLayout. Pola Start, Center, Endi Fill służą do definiowania wyrównania Label obiektów w obiekcie nadrzędnym VerticalStackLayout:

Element VerticalStackLayout uwzględnia tylko preferencje wyrównania w widokach podrzędnych, które są w przeciwnym kierunku do orientacji układu. Label W związku z tym widoki podrzędne w ustawieniu VerticalStackLayout ich HorizontalOptions właściwości na jedno z pól wyrównania:

• Start, który umieszcza element Label po lewej stronie obiektu VerticalStackLayout.
• Center, które powoduje wyśrodkowanie obiektu Label w obiekcie VerticalStackLayout.
• End, który umieszcza element Label po prawej stronie obiektu VerticalStackLayout.
• Fill, które zapewnia, że obiekt Label wypełnia szerokość obiektu VerticalStackLayout.

Zagnieżdżanie obiektów VerticalStackLayout

Element VerticalStackLayout może służyć jako układ nadrzędny zawierający inne zagnieżdżone układy podrzędne.

Poniższy kod XAML przedstawia przykład zagnieżdżania HorizontalStackLayout obiektów w obiekcie VerticalStackLayout:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
       <Label Text="Primary colors" />
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
    </VerticalStackLayout>
</ContentPage>

W tym przykładzie obiekt nadrzędny VerticalStackLayout zawiera zagnieżdżone HorizontalStackLayout obiekty wewnątrz Frame obiektów:

Ważne

Im głębiej zagnieżdżasz obiekty układu, tym więcej obliczeń układu zostanie wykonanych, co może mieć wpływ na wydajność. Aby uzyskać więcej informacji, zobacz Wybieranie poprawnego układu.