VerticalStackLayout

.NET Multi-platform App UI (.NET MAUI) VerticalStackLayout 在一维垂直堆栈中组织子视图，是一种比 StackLayout 性能更高的替代方法。 此外，还可以将 VerticalStackLayout 用作包含其他子布局的父布局。

VerticalStackLayout 定义以下属性：

• Spacing，类型为 double，指示每个子视图之间的间距。 此属性的默认值为 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>

此示例创建包含 Label 和 Rectangle 对象的 VerticalStackLayout。 默认情况下，子视图之间没有间距：

注意

Margin 属性的值表示元素与其相邻元素之间的距离。 有关详细信息，请参阅位置控件。

子视图之间的间距

可以通过将 Spacing 属性设置为 double 值来更改 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="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>

此示例会创建包含 Label 和 Rectangle 对象的 VerticalStackLayout，这些对象在子视图之间有 10 个与设备无关的空格：

提示

可以将 Spacing 属性设置为负值，以使子视图重叠。

子视图的定位和大小调整

VerticalStackLayout 中子视图的大小和位置取决于子视图的 HeightRequest 和 WidthRequest 属性的值，以及其 HorizontalOptions 属性的值。 在 VerticalStackLayout 中，子视图会在未显式设置其大小时展开，以填充可用宽度。

可以将 VerticalStackLayout 的 HorizontalOptions 属性及其子视图设置为 LayoutOptions 结构中的字段，该结构封装了对齐方式布局首选项。 此布局首选项可确定子视图在其父布局中的位置和大小。

提示

除非需要，否则不要设置 VerticalStackLayout 的 HorizontalOptions 属性。 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 中的位置。 Start、Center、End 和 Fill 字段用于定义父级 VerticalStackLayout 中 Label 对象的对齐方式：

VerticalStackLayout 仅遵循与布局方向相反的子视图上的对齐方式首选项。 因此，VerticalStackLayout 中的 Label 子视图将其 HorizontalOptions 属性设置为对齐字段中的其中一种：

• Start，它将 Label 置于 VerticalStackLayout 的左侧。
• Center，它将 Label 置于 VerticalStackLayout 中心。
• End，它将 Label 置于 VerticalStackLayout 的右侧。
• Fill，确保 Label 填充到 VerticalStackLayout 的宽度。

嵌套 VerticalStackLayout 对象

VerticalStackLayout 可用作包含其他嵌套子布局的父布局。

以下 XAML 展示了一个在 VerticalStackLayout 中嵌套 HorizontalStackLayout 对象的示例：

<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 在 Frame 对象中包含嵌套的 HorizontalStackLayout 对象。

重要

嵌套布局对象越深，将会执行的布局计算也就越多，这可能会影响性能。 有关详细信息，请参阅选择正确的布局。