Sdílet prostřednictvím

VerticalStackLayout

  • Článek

Uživatelské rozhraní .NET Multi-Platform App UI (.NET MAUI) VerticalStackLayout organizuje podřízená zobrazení v jednorozměrném svislém zásobníku a je výkonnější alternativou StackLayoutk . Kromě toho VerticalStackLayout lze použít jako nadřazené rozložení, které obsahuje jiná podřízená rozložení.

Definuje VerticalStackLayout následující vlastnosti:

  • Spacing, typu doubleoznačuje velikost mezery mezi každým podřízeným zobrazením. Výchozí hodnota této vlastnosti je 0.

Tato vlastnost je podporována objektem BindableProperty , což znamená, že může být cílem datových vazeb a styl.

Následující XAML ukazuje, jak vytvořit VerticalStackLayout , která obsahuje různá podřízená zobrazení:

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

Tento příklad vytvoří VerticalStackLayout obsahující Label objekty a Rectangle objekty. Ve výchozím nastavení není mezi podřízenými zobrazeními mezera:

VerticalStackLayout displaying different child views screenshot.

Poznámka:

Hodnota Margin vlastnosti představuje vzdálenost mezi elementem a jeho sousedními prvky. Další informace naleznete v tématu Ovládací prvky pozice.

Mezera mezi podřízenými zobrazeními

Mezery mezi podřízenými zobrazeními v objektu VerticalStackLayout lze změnit nastavením Spacing vlastnosti na double hodnotu:

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

Tento příklad vytvoří VerticalStackLayout obsahující objekty Rectangle Label, které mají deset jednotek nezávislých na zařízení mezi podřízenými zobrazeními:

VerticalStackLayout displaying different child views with spacing screenshot.

Tip

Vlastnost Spacing lze nastavit na záporné hodnoty, aby se podřízená zobrazení překrývala.

Umístění a velikost podřízených zobrazení

Velikost a umístění podřízených zobrazení v rámci závisí VerticalStackLayout na hodnotách podřízených zobrazení HeightRequest a WidthRequest vlastností a na hodnotách jejich HorizontalOptions vlastností. V podřízenýchzobrazeních VerticalStackLayout

Vlastnosti HorizontalOptions objektu VerticalStackLayouta jeho podřízených zobrazení lze nastavit na pole ze LayoutOptions struktury, která zapouzdřuje předvolbu rozložení zarovnání . Tato předvolba rozložení určuje umístění a velikost podřízeného zobrazení v rámci nadřazeného rozložení.

Tip

Nenastavujte HorizontalOptions vlastnost vlastnosti, VerticalStackLayout pokud ji nepotřebujete. Výchozí hodnota LayoutOptions.Fill umožňuje nejlepší optimalizaci rozložení. Změna této vlastnosti má náklady a spotřebovává paměť, i když ji nastavíte zpět na výchozí hodnotu.

Následující příklad XAML nastaví předvolby zarovnání pro každé podřízené zobrazení v :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>

V tomto příkladu jsou předvolby zarovnání nastaveny na Label objekty pro řízení jejich umístění v rámci VerticalStackLayout. Pole Start, , EndCentera Fill jsou použity k definování zarovnání Label objektů v rámci nadřazeného VerticalStackLayoutobjektu :

VerticalStackLayout displaying aligned child views screenshot.

Respektuje VerticalStackLayout pouze předvolby zarovnání u podřízených zobrazení, která jsou v opačném směru než orientace rozložení. Podřízená Label zobrazení v rámci VerticalStackLayout sady jejich HorizontalOptions vlastností proto na jedno z polí zarovnání:

Nest VerticalStackLayout – objekty

Lze VerticalStackLayout použít jako nadřazené rozložení, které obsahuje jiná vnořená podřízená rozložení.

Následující XAML ukazuje příklad vnoření HorizontalStackLayout objektů v 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>

V tomto příkladu nadřazený VerticalStackLayout objekt obsahuje vnořené HorizontalStackLayout objekty uvnitř Frame objektů:

VerticalStackLayout displaying nested HorizontalStackLayout objects screenshot.

Důležité

Čím hlouběji vnořujete objekty rozložení, tím více výpočtů rozložení se provede, což může mít vliv na výkon. Další informace najdete v tématu Volba správného rozložení.