VerticalStackLayout

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

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

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

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

В следующем XAML показано, как создать объект 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">
        <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>

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

Примечание.

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

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

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

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

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

Совет

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

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

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

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

Совет

Не устанавливайте HorizontalOptions свойство, VerticalStackLayout если вам не нужно. Значение LayoutOptions.Fill по умолчанию обеспечивает оптимальную оптимизацию макета. Изменение этого свойства имеет затраты и потребляет память, даже если он возвращает значение по умолчанию.

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

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

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

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

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

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

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

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

Важно!

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