指定视图大小

设计在各种设备上一致的用户界面非常困难，因为设备具有不同大小和不同的像素密度。 试想不同的可用设备：手机、平板电脑、桌面设备等。 如何创建在每个设备上看起来相似的用户界面？

.NET Multi-platform App UI (MAUI) 提供有助于生成一致的用户界面的版式面板。 布局面板负责调整其子级视图的大小和位置。 在本单元中，你将了解布局系统如何在 .NET MAUI 中运作。 具体而言，我们将了解默认情况下视图的大小调整方式，以及如何在运行时请求视图的特定大小和位置。

什么是版式面板？

版式面板是一种 .NET MAUI 容器，包含子视图的集合并决定子视图的大小和位置。 应用大小更改时，版式面板会自动进行重新计算；例如，用户旋转设备时。

.NET MAUI 具有可供选择的多个版式面板。 每个面板以不同的方式管理其子视图。 下图显示了一些最常见选项的概念性概述。

• StackLayout：将其子视图排列在单个行或列中。 除了 StackLayout 之外，在不需要更改方向时，还有经优化的 VerticalStackLayout 和 HorizontalStackLayout。
• AbsoluteLayout：使用 x 和 y 坐标排列其子视图。
• Grid：在从行和列的交集创建的单元格中排列其子视图。
• FlexLayout：像 StackLayout 一样排列其子视图，只不过在这些子视图不适合单个行或列时可以包装它们。

生成 .NET MAUI 页面的典型过程是创建版式面板，然后向其添加子视图。 将视图添加到布局时，操作者可影响其大小和位置。 但是，面板根据其内部布局算法具有最终设置权限。

在考虑如何请求视图的特定大小之前，让我们先看看默认情况下布局系统如何调整视图的大小。

视图的默认大小

如果未指定视图的大小，它将自动增加到足以容纳其内容的大小。 例如，请考虑此 Extensible Application Markup Language (XAML)：

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center" 
    FontSize="40"/>

本示例定义用于在银色背景上显示单词 Hello 的标签。 由于未指定大小，标签会自动调整大小以围绕单词 Hello。 下图显示了 Android 设备上呈现的标签：

指定视图大小

生成 UI 时，通常希望能控制视图的大小。 例如，假设要生成登录页面，并希望登录按钮正好是屏幕宽度的一半。 如果使用的是默认的视图大小调整方式，则按钮大小仅为文本“登录”的大小。 这个尺寸不够大，所以你需要自己指定尺寸。

View 基类定义影响视图大小的两个属性：WidthRequest 和 HeightRequest。 通过 WidthRequest 可指定宽度，通过 HeightRequest 可指定高度。 两个属性的类型都是 double。

以下示例显示如何通过 XAML 指定标签的宽度和高度：

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    WidthRequest="100"
    HeightRequest="300"
    FontSize="40"/>

结果类似以下形式：

值得注意的一点是这些属性的名称。 两个属性都包含“请求”一词。 这个词意味着版式面板在运行时可能不会遵循它们。 版式面板在大小调整计算期间读取这些值，并尝试满足这些请求（如果可以）。 如果没有足够的空间，版式面板可以忽略这些值。

尺寸单位

设置 WidthRequest 和 HeightRequest 时，使用类似于 100 的文本值。 在 .NET MAUI 级别，这些值没有单位。 它们不是点或像素。 它们只是 double 类型的值。 .NET MAUI 在运行时将这些值传递到基础操作系统。 操作系统提供确定数字含义所需的上下文：

• 在 iOS 上，这些值称为“点”。
• 在 Android 上，它们是“与密度无关的像素”。

所呈现的视图大小

因为是由版式面板确定视图的大小，所以无法使用 WidthRequest 和 HeightRequest 在运行时指示实际大小。 例如，假设为标签将 WidthRequest 设置为 100，但是面板没有足够的空间来满足该请求。 面板会为标签提供宽度 80。 此时，如果你查看 WidthRequest 属性值的话，你会看到 100，虽然呈现的值为 80。

若要解决此问题，View 基类需定义其他两个名为 Width 和 Height 的属性。 这些属性的类型是 double，表示所呈现的视图宽度和高度。 无论何时检索视图的大小，都使用 Width 和 Height 属性。

指定视图的位置

此外，还需要设置视图位置。 例如，回想一下，在登录页面示例中，你希望将登录按钮的大小调整为屏幕宽度的一半。 由于登录按钮的宽度不到屏幕的整个宽度，因此有其他剩余空间，可将其进行移动。 可以将其放置在屏幕左边、右边或中心。

View 基类具有用于设置视图位置的两个属性：VerticalOptions 和 HorizontalOptions。 这些设置会影响视图在版式面板为其分配的矩形内的位置。 可以将视图指定与矩形的四条边之一对齐。 或者，可以让视图占据整个矩形。

指定 VerticalOptions 或 HorizontalOptions 的值比设置大小更难，因为它们的类型是 LayoutOptions。

什么是 LayoutOptions 类型？

LayoutOptions 为 C# 类型，包含两个布局首选项：Alignment 和 Expands。 这两个属性与位置相关，但它们彼此不相关。 类型的定义如下所示：

public struct LayoutOptions
{
    public LayoutAlignment Alignment { get; set; }
    public bool Expands { get; set; }
    ...
}

接下来，我们更详细地了解 Alignment，因为它是最常用且最直观的布局选项。

什么是 LayoutAlignment 枚举？

LayoutAlignment 是包含四个值的枚举：Start、Center、End 和 Fill。 可以使用这些值来控制子视图在版式面板为其提供的矩形内的位置。 以下面的代码和 Android 屏幕截图为例：

<StackLayout>
    <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Silver" FontSize="40" />
    <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Silver"  FontSize="40" />
    <Label Text="End" HorizontalOptions="End" BackgroundColor="Silver"  FontSize="40"/>
    <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Silver"  FontSize="40"/>
</StackLayout>

该示例使用的是垂直 StackLayout，因此每个子视图都有一行。 HorizontalOptions 确定视图在其行内的位置。

什么是 Expands？

LayoutOptions 结构的第二个属性是 Expands。 Expands 属性是 bool，在 Xamarin.Forms 中使 StackLayout 中的视图能够请求额外的空间（如果有）。 此属性现已过时，.NET MAUI 中不再使用。 稍后，我们将了解如何在 Grid 布局的单元中实现相同类型的扩展。