HorizontalStackLayout

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

HorizontalStackLayout 定义以下属性：

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

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

注意

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

子视图之间的间距

可以通过将 Spacing 属性设置为 double 值，更改 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"
                           Spacing="10">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

此示例会创建包含 Rectangle 和 Label 对象的 HorizontalStackLayout，它们之间有 10 个与设备无关的空间单位：

提示

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

子视图的定位和大小调整

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

可以将 HorizontalStackLayout 的 VerticalOptions 属性及其子视图设置为 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 中的位置。 Start、Center、End 和 Fill 字段用于定义父级 HorizontalStackLayout 中 Label 对象的对齐方式：

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

• Start，它将 Label 置于 HorizontalStackLayout 的开头。
• Center，将 Label 垂直居中于 HorizontalStackLayout。
• End，它将 Label 置于 HorizontalStackLayout 的末尾。
• Fill，确保 Label 填充 HorizontalStackLayout 的高度。

有关对齐方式的详细信息，请参阅对齐和定位 .NET MAUI 控件。

嵌套 HorizontalStackLayout 对象

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

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

<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 对象：

重要

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