HorizontalStackLayout
Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) HorizontalStackLayout organizuje widoki podrzędne w jednowymiarowym stosie poziomym i jest bardziej wydajną alternatywą dla elementu StackLayout. Ponadto HorizontalStackLayout element może służyć jako układ nadrzędny zawierający inne układy podrzędne.
Definiuje HorizontalStackLayout następujące właściwości:
Spacing, typudouble, 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 HorizontalStackLayout 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.HorizontalStackLayoutPage">
<HorizontalStackLayout Margin="20">
<Rectangle Fill="Red"
HeightRequest="30"
WidthRequest="30" />
<Label Text="Red"
FontSize="18" />
</HorizontalStackLayout>
</ContentPage>
W tym przykładzie tworzony jest HorizontalStackLayout obiekt zawierający Rectangle obiekt i Label . 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 HorizontalStackLayout 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.HorizontalStackLayoutPage">
<HorizontalStackLayout Margin="20"
Spacing="10">
<Rectangle Fill="Red"
HeightRequest="30"
WidthRequest="30" />
<Label Text="Red"
FontSize="18" />
</HorizontalStackLayout>
</ContentPage>
W tym przykładzie tworzony jest HorizontalStackLayout obiekt zawierający Rectangle obiekt i Label zawierający dziesięć niezależnych od urządzenia jednostek przestrzeni między nimi:
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 HorizontalStackLayout zależą od wartości właściwości i WidthRequest widoków HeightRequest podrzędnych oraz wartości ich VerticalOptions właściwości. HorizontalStackLayoutW programie widoki podrzędne rozszerzają się, aby wypełnić dostępną wysokość, gdy ich rozmiar nie jest jawnie ustawiony.
VerticalOptions Właściwości HorizontalStackLayoutobiektu 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.
Poniższy przykład XAML ustawia preferencje wyrównania dla każdego widoku podrzędnego w pliku 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>
W tym przykładzie preferencje wyrównania są ustawiane na Label obiektach, aby kontrolować ich położenie w obiekcie HorizontalStackLayout. Pola Start, Center, Endi Fill służą do definiowania wyrównania Label obiektów w obiekcie nadrzędnym HorizontalStackLayout:
Element HorizontalStackLayout 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 HorizontalStackLayout ich VerticalOptions właściwości na jedno z pól wyrównania:
Start, który umieszcza element Label na początku .HorizontalStackLayoutCenter, który w pionie wyśrodkuje element Label w obiekcie HorizontalStackLayout.End, który umieszcza element Label na końcu elementu HorizontalStackLayout.Fill, co gwarantuje, że Label wypełnienie wysokości obiektu HorizontalStackLayout.
Aby uzyskać więcej informacji na temat wyrównania, zobacz Wyrównanie i położenie kontrolek .NET MAUI.
Zagnieżdżanie obiektów HorizontalStackLayout
Element HorizontalStackLayout 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 VerticalStackLayout obiektów w obiekcie 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>
W tym przykładzie obiekt nadrzędny HorizontalStackLayout zawiera dwa zagnieżdżone VerticalStackLayout obiekty:
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.
