HorizontalStackLayout

Uživatelské rozhraní aplikace .NET pro více platforem (.NET MAUI) HorizontalStackLayout organizuje podřízená zobrazení v jednorozměrném vodorovném zásobníku a je výkonnější alternativou k objektu StackLayout. Kromě toho HorizontalStackLayout lze použít jako nadřazené rozložení, které obsahuje jiná podřízená rozložení.

Definuje HorizontalStackLayout 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 HorizontalStackLayout , 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.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

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

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 HorizontalStackLayout 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.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           Spacing="10">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

Tento příklad vytvoří HorizontalStackLayout obsahující objekt Rectangle a Label objekt, který má mezi nimi deset jednotek nezávislých na zařízení:

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í HorizontalStackLayout na hodnotách podřízených zobrazení HeightRequest a WidthRequest vlastností a na hodnotách jejich VerticalOptions vlastností. V podřízených HorizontalStackLayoutzobrazeních se rozbalí, aby vyplnila dostupnou výšku, pokud není explicitně nastavená jejich velikost.

Vlastnosti VerticalOptions objektu HorizontalStackLayouta 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í.

Následující příklad XAML nastaví předvolby zarovnání pro každé podřízené zobrazení v :HorizontalStackLayout

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           HeightRequest="200">
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="Fill" />
    </HorizontalStackLayout>
</ContentPage>

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

Respektuje HorizontalStackLayout 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 HorizontalStackLayout sady jejich VerticalOptions vlastností proto na jedno z polí zarovnání:

• Start, které umístí Label na začátek HorizontalStackLayout.
• Center, které svisle zacentruje Label na střed .HorizontalStackLayout
• End, která umístí Label na konec HorizontalStackLayout.
• Fill, který zajišťuje, že Label vyplní výšku HorizontalStackLayout.

Další informace o zarovnání najdete v tématu Zarovnání a umístění ovládacích prvků .NET MAUI.

Nest HorizontalStackLayout – objekty

Lze HorizontalStackLayout 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í VerticalStackLayout objektů v HorizontalStackLayout:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           Spacing="6">
        <Label Text="Primary colors:" />
        <VerticalStackLayout Spacing="6">
            <Rectangle Fill="Red"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Yellow"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Blue"
                       WidthRequest="30"
                       HeightRequest="30" />
        </VerticalStackLayout>
        <Label Text="Secondary colors:" />
        <VerticalStackLayout Spacing="6">
            <Rectangle Fill="Green"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Orange"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Purple"
                       WidthRequest="30"
                       HeightRequest="30" />
        </VerticalStackLayout>
    </HorizontalStackLayout>
</ContentPage>

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

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