使用 StackLayout 排列视图

将视图堆叠在垂直或水平列表中是一种常见的用户界面设计方式。 想想应用程序中的一些常见页面。 示例包括登录、注册和设置页面。 这些页面通常都包含堆叠的内容。 在本单元中，将学习如何使用 StackLayout 以及优化的 StackLayout 控件 VerticalStackLayout 和 HorizontalStackLayout 在垂直或水平列表中排列视图。

什么是 StackLayout、VerticalStackLayout 和 HorizontalStackLayout？

StackLayout 是从左到右或从上到下组织其子视图的布局容器。 具体方向取决于其 Orientation 属性，默认值为从上到下。 下图显示了垂直 StackLayout 的概念视图。

• StackLayout 具有从其基类 Children 继承的 Layout<T> 的列表。 该列表可存储视图，这一点非常有用，因为你在 .NET 多平台应用 UI (MAUI) 中使用的大多数 UI 元素都派生自 View。 版式面板也派生自 View，这表示可以嵌套面板（如有需要）。

• VerticalStackLayout 和 HorizontalStackLayout 是确定方向不会改变时使用的首选布局，因为它们已针对性能进行了优化。

如何将视图添加到 StackLayout

在 .NET MAUI 中，可以将视图添加到 C# 代码或 Extensible Application Markup Language (XAML) 中的 StackLayout。 下面是使用代码添加的三个视图的示例：

<StackLayout x:Name="stack">
</StackLayout>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
        var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
        var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };

        stack.Children.Add(a);
        stack.Children.Add(b);
        stack.Children.Add(c);
    }
}

可以将视图添加到 Children 集合中，然后 StackLayout 会自动将视图放置在垂直列表中。 这是它在 Android 设备上的显示效果：

要在 XAML 中执行相同的操作，请将子级嵌套在 StackLayout 标记内。 XAML 分析器自动将嵌套的视图添加到 Children 集合，因为 Children 是所有版式面板的 ContentProperty。 下面是使用 XAML 添加到 StackLayout 的三个相同视图的示例：

<StackLayout>
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

视图在 StackLayout 中的排序方式

视图在 Children 集合中的排序决定它们在呈现时的布局顺序。 对于使用 XAML 添加的视图，则使用文本顺序。 对于通过代码添加的子级，调用 Add 方法的顺序决定了布局顺序。

如何更改 StackLayout 中视图之间的空间

通常会希望 StackLayout 的子级之间留出一些空间。 使用 StackLayout 可通过 Spacing 属性来控制每个子级之间的空间。 默认值为零个单位，但是可以将其设置为所需的任何值。 下面是将 Spacing 属性设置为使用 XAML 时的 30 的示例：

<StackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

以下屏幕截图显示了 UI 在 Android 上的呈现形式：

如何设置 StackLayout 的方向

通过 StackLayout 可以将子级排成列或行。 通过设置行为的 Orientation 属性来控制此行为。 目前为止，我们仅展示了垂直 StackLayout。

Vertical 是默认值。 你可以自己决定是否将 Orientation 显式设置为 Vertical。 一些程序员更喜欢显式设置，以使代码更加自文档化。

下面是使用 XAML 将 Orientation 设置为 Horizontal 的示例：

<StackLayout x:Name="stack" Orientation="Horizontal">
    <BoxView Color="Silver" WidthRequest="40"/>
    <BoxView Color="Blue" WidthRequest="40"/>
    <BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>

在 StackLayout 中设置视图的 LayoutOptions

每个视图都有一个 VerticalOptions 和 HorizontalOptions 属性。 可以使用这些属性在布局面板提供的矩形显示区域内设置视图的位置。

如前面所述，对于 StackLayout，LayoutOptions 属性的行为取决于 Orientation 的 StackLayout 属性。 StackLayout 使用 LayoutOptions 属性时的方向与其 Orientation 相反。 默认情况下，不会在堆积布局 Orientation 的同一方向上向堆积布局中的元素分配多余空间。 在此默认情况下，向上述方向分配一个位置不会改变元素的呈现效果。 但如果分配位置的同时进行扩张，就会改变呈现效果。

扩张是怎么样的？

回想一下之前的单元，LayoutOptions 结构包含名为 bool 的 Expands 属性，此属性在 .NET MAUI 中已过时。 设置 VerticalOptions 和 HorizontalOptions 时，你可能会注意到 LayoutOptions 有 StartAndExpand、CenterAndExpand、EndAndExpand 和 FillAndExpand。 如果将 LayoutOptions 设置为这些 AndExpand 选项之一，则会忽略该选项并使用 LayoutOptions 的第一部分，例如 Start、Center、End 或 Fill。 如果要从 Xamarin.Forms 迁移，则应从这些属性中移除所有 AndExpand。 稍后在模块中，我们将在了解 Grid 时了解如何实现类似的功能。

优化的 StackLayouts

前面提到过，VerticalStackLayout 和 HorizontalStackLayout 是优化的 StackLayout 控件，具有预定义方向。 建议尽可能使用这些控件，以获得最佳布局性能。 这些布局具有常规 LayoutOptions 所具有的 Spacing 和 StackLayout 功能。

<VerticalStackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>

<HorizontalStackLayout Spacing="30">
    <BoxView Color="Silver" WidthRequest="40" />
    <BoxView Color="Blue" WidthRequest="40" />
    <BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>