浏览示例

.NET 多平台应用 UI (.NET MAUI) Grid是一种布局，它将子级组织成行和列，这些行和列可以有成比例或绝对大小。 默认情况下，Grid 包含一行和一列。 此外， Grid 可用作包含其他子布局的父布局。

Grid不应将 与表混淆，并且不用于显示表格数据。 与 HTML 表不同， 用于 Grid 布局内容。 若要显示表格数据，请考虑使用 ListView 或 CollectionView。

Grid 类定义了以下属性：

这些属性由 BindableProperty 对象提供支持，这意味着这些属性可以是数据绑定的目标和样式。

默认情况下， Grid 包含一行和一列：

在此示例中， Grid 包含自动定位在单个位置的单个子级 Label ：

的布局行为Grid可以使用 和 ColumnDefinitions 属性定义RowDefinitions，这些属性分别是 和 ColumnDefinition 对象的集合RowDefinition。 这些集合定义 的行和列特征，对于 中的Grid每一行应包含一个 GridRowDefinition 对象，以及 中每个列的Grid一个 ColumnDefinition 对象。

类 RowDefinition 定义 Height 类型的 GridLength属性，类 ColumnDefinition 定义 Width 类型的 GridLength属性。 结构 GridLength 根据枚举指定行高或列宽 GridUnitType ，该枚举具有三个成员：

Grid属性为 Height 的Auto行以与垂直 StackLayout相同的方式约束该行中视图的高度。 同样，属性为 Width 的 Auto 列的工作方式与水平 StackLayout非常相似。

注意

尝试确保将尽可能少的行和列设置为 Auto 大小。 每个自动调整大小的行或列都会导致布局引擎执行额外布局计算。 而是应在可能时使用固定大小的行和列。 或者，设置行和列，以占用与枚举值成比例的空间 GridUnitType.Star 量。

以下 XAML 演示如何创建 Grid 包含三行和两列的 ：

在此示例中， Grid 的总体高度是页面的高度。 知道 Grid 第三行的高度是 100 个与设备无关的单位。 它从自身高度中减去该高度，并根据星号前的数字，按比例在第一行和第二行之间分配剩余高度。 在此示例中，第一行的高度是第二行的两倍。

这两个 ColumnDefinition 对象都将 设置为 *Width ，这与 1*相同，这意味着屏幕宽度在两列下方平均划分。

重要

属性的 RowDefinition.Height 默认值为 *。 同样，属性的 ColumnDefinition.Width 默认值为 *。 因此，在可接受这些默认值的情况下，无需设置这些属性。

子视图可以定位在具有 Grid.Column 和 Grid.Row 附加属性的特定Grid单元格中。 此外，若要使子视图跨多个行和列，请使用 Grid.RowSpan 和 Grid.ColumnSpan 附加属性。

以下 XAML 显示了相同的 Grid 定义，并且还在特定 Grid 单元格中放置子视图：

注意

Grid.Row和 Grid.Column 属性都从 0 编制索引，因此Grid.Row="2"引用第三行，而Grid.Column="1"引用第二列。 此外，这两个属性的默认值均为 0，因此无需在占用 的第一行或第一 Grid列的子视图上设置。

在此示例中，所有三 Grid 行都由 BoxView 和 Label 视图占用。 第三行高 100 个与设备无关的单位，前两行占用剩余空间 (第一行是第二行) 的两倍。 这两列的宽度相等，将 除 Grid 以两半。 BoxView第三行中的 跨两列：

此外，中的 Grid 子视图可以共享单元格。 子项在 XAML 中的显示顺序是子项在 中 Grid放置的顺序。 在前面的示例中， Label 这些对象仅可见，因为它们是在对象之上呈现的 BoxView 。 Label如果对象呈现在BoxView对象之上，则这些对象将不可见。

等效 C# 代码如下：

在代码中，若要指定对象的高度 RowDefinition 和对象的宽度 ColumnDefinition ，请使用 结构的值 GridLength ，通常与 GridUnitType 枚举结合使用。

在 XAML 中，可以使用简化的语法指定 的 Grid 行和列特征，而无需为每个行和列定义 RowDefinition 和 ColumnDefinition 对象。 相反， RowDefinitions 和 ColumnDefinitions 属性可以设置为包含逗号分隔 GridUnitType 值的字符串，而 .NET MAUI 中内置的类型转换器将创建 RowDefinition 和 ColumnDefinition 对象：

在此示例中， Grid 有五行和四列。 第三行、第四行和第五行设置为绝对高度，第二行自动调整其内容的大小。 然后将剩余高度分配给第一行。

第四列设置为绝对宽度，第三列会自动调整其内容的大小。 剩余宽度根据星号前的数字在第一列和第二列之间按比例分配。 在此示例中，第二列的宽度是第一列 (的两倍，因为 * 与) 相同 1* 。

默认情况下， Grid 行和列之间没有空格。 这可以通过分别设置 RowSpacing 和 ColumnSpacing 属性来更改：

此示例创建一个 ， Grid 其行和列由 6 个与设备无关的空间单位分隔：

提示

RowSpacing和 ColumnSpacing 属性可以设置为负值，使单元格内容重叠。

等效 C# 代码如下：

中的 Grid 子视图可以由 HorizontalOptions 和 VerticalOptions 属性定位在其单元格内。 这些属性可以设置为结构中的以下字段 LayoutOptions ：

以下 XAML 创建具有九个 Grid 等大小单元格的 ，并在每个单元格中以不同的对齐方式放置 Label 一个 ：

在此示例中， Label 每行中的对象垂直对齐方式相同，但使用不同的水平对齐方式。 或者，这可以视为 Label 每列中的对象以相同的水平对齐方式，但使用不同的垂直对齐方式：

等效 C# 代码如下：

Grid可用作包含嵌套子Grid对象的父布局或其他子布局。 嵌套Grid对象时，Grid.Row、 Grid.ColumnGrid.RowSpan和 Grid.ColumnSpan 附加属性始终引用视图在其父 Grid中的位置。

以下 XAML 演示嵌套 Grid 对象的示例：

在此示例中，根 Grid 在其第一行中包含 ， BoxView 第二行中包含子 Grid 项。 子 Grid 项包含 Slider 操作 由 BoxView显示的颜色的对象，以及 Label 显示每个 Slider的值的对象：

重要

嵌套 Grid 对象和其他布局越深，嵌套布局对性能的影响就越大。

等效 C# 代码如下：