MAUI中Grid通过RowDefinitions和ColumnDefinitions定义行列尺寸策略:Auto自适应内容、固定值以dp为单位、星号*按比例分配;子控件用Grid.Row/Grid.Column定位,支持跨行跨列;代码中需手动调用Grid.SetRow等方法设置位置;未定义行列则默认1行1列,调试可启用ShowGridLines。

MAUI 中的 Grid 是最常用、最灵活的布局容器之一,设置行(RowDefinitions)和列(ColumnDefinitions)是它的核心用法。关键在于理解“定义”不是直接写宽高,而是用 GridLength 描述每行/列的**尺寸策略**。
怎么定义行和列
在 XAML 中,通过 Grid.RowDefinitions 和 Grid.ColumnDefinitions 集合来声明。每个 RowDefinition 或 ColumnDefinition 指定一行或一列的行为:
- Auto:该行/列高度/宽度刚好容纳其子元素(内容自适应)
-
固定值(如
100):单位为设备独立像素(dp),固定大小 -
星号(*):按比例分配剩余空间,
*= 等分,2*= 占两份
示例:
怎么把子控件放进指定行列
使用附加属性 Grid.Row、Grid.Column(从 0 开始计数)定位控件位置:
-
Grid.Row="1"表示放在第 2 行(索引为 1) -
Grid.Column="0"表示放在第 1 列(索引为 0) - 可跨行/列:
Grid.RowSpan="2"或Grid.ColumnSpan="3"
例如让一个按钮占满第 0 行全部三列:
代码中动态添加行列(C# 方式)
适合运行时根据数据调整布局:
var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
grid.RowDefinitions.Add(new RowDefinition { Height = new GridLength(2, GridUnitType.Star) });
grid.ColumnDefinitions.Add(new ColumnDefinition { Width = new GridLength(100) });
// 添加子元素并设置位置
var label = new Label { Text = "动态添加" };
Grid.SetRow(label, 1);
Grid.SetColumn(label, 0);
grid.Add(label);
注意:Grid.Add(child) 默认加到第 0 行第 0 列;必须手动调用 Grid.SetRow() 等方法才能准确定位。
常见坑和提示
实际开发中容易忽略的细节:
- 没定义
RowDefinitions或ColumnDefinitions?默认只有 1 行 1 列,所有子控件会堆叠在左上角 -
Auto行/列里放了VerticalOptions="Fill"的控件?它不会撑开 Auto 行——Auto 只看内容自身所需尺寸 - 想让某列“尽量小但不为零”?用
Auto;想“至少 80 宽,有剩余再扩展”?目前 MAUI 不支持 MinWidth,需用GridLength.Star+ 内部嵌套 StackLayout 控制最小尺寸 - 调试时开启网格线:
Grid.ShowGridLines="True"(仅 Debug 模式有效,XAML 中加即可)
基本上就这些。Grid 看似简单,但行列表达式组合起来能实现绝大多数界面结构,熟练掌握 Auto、*、数字 三种模式,就能稳住大部分布局需求。










