HorizontalStackLayout

Многоплатформенный пользовательский интерфейс приложения .NET (.NET MAUI) HorizontalStackLayout упорядочивает дочерние представления в одномерном горизонтальном стеке и является более производительной альтернативой StackLayout. Кроме того, HorizontalStackLayout можно использовать в качестве родительского макета, содержащего другие дочерние макеты.

Определяет HorizontalStackLayout следующие свойства:

• SpacingdoubleТип , указывает объем пространства между каждым дочерним представлением. Значение этого свойства по умолчанию равно 0.

Это свойство поддерживается BindableProperty объектом, что означает, что он может быть целевым объектом привязки данных и стилем.

В следующем XAML показано, как создать объект 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">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

В этом примере создается HorizontalStackLayout содержащий Rectangle объект и Label объект. По умолчанию между дочерними представлениями нет места:

Примечание.

Значение Margin свойства представляет расстояние между элементом и его смежными элементами. Дополнительные сведения см. в разделе "Элементы управления положением".

Пространство между дочерними представлениями

Интервал между дочерними представлениями HorizontalStackLayout можно изменить, задав Spacing свойству double значение:

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

В этом примере создается HorizontalStackLayout содержащий Rectangle объект и Label объект, у которых между ними десять единиц пространства, независимых от устройства:

Совет

Свойство Spacing можно задать для отрицательных значений, чтобы сделать дочерние представления перекрывающимися.

Положение и размер дочерних представлений

Размер и положение дочерних представлений в пределах объекта HorizontalStackLayout зависит от значений дочерних представлений HeightRequest и WidthRequest свойств, а также значений их VerticalOptions свойств. HorizontalStackLayoutВ дочерних представлениях развернитесь, чтобы заполнить доступную высоту, если их размер не задан явным образом.

Свойства VerticalOptions дочерних HorizontalStackLayoutпредставлений можно задать в поля из LayoutOptions структуры, которые инкапсулируют предпочтения макета выравнивания . Этот параметр макета определяет положение и размер дочернего представления в родительском макете.

В следующем примере XAML задаются параметры выравнивания для каждого дочернего 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>

В этом примере параметры выравнивания задаются объектами Label для управления их положением в пределах HorizontalStackLayoutобъекта. Поля , и Fill поля используются для определения выравнивания Label объектов в родительском элементеHorizontalStackLayout:StartCenterEnd

Учитывается HorizontalStackLayout только параметры выравнивания для дочерних представлений, которые находятся в противоположном направлении от ориентации макета. Таким образом, дочерние Label представления в HorizontalStackLayout наборе свойств VerticalOptions задаются в одном из полей выравнивания:

• Start, который позиционирует Label в начале HorizontalStackLayout.
• Center, который по вертикали центров Label в HorizontalStackLayout.
• End, который позиционирует Label в конце HorizontalStackLayout.
• Fill, что гарантирует, что Label заполняет высоту HorizontalStackLayoutэлемента .

Дополнительные сведения о выравнивании см. в разделе "Выравнивание и размещение элементов управления .NET MAUI".

Вложенные объекты HorizontalStackLayout

Можно HorizontalStackLayout использовать в качестве родительского макета, содержащего другие вложенные дочерние макеты.

В следующем КОДе XAML показан пример вложенных VerticalStackLayout объектов в следующем коде 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>

В этом примере родительский HorizontalStackLayout объект содержит два вложенных VerticalStackLayout объекта:

Важно!

Чем глубже вы вложены объекты макета, тем больше вычислений макета будут выполняться, что может повлиять на производительность. Дополнительные сведения см. в разделе "Выбор правильного макета".