MAUI 中的
Grid是最常用、最灵活的布局容器之一,设置行(
RowDefinitions)和列(
ColumnDefinitions)是它的核心用法。关键在于理解“定义”不是直接写宽高,而是用
GridLength描述每行/列的**尺寸策略**。
怎么定义行和列
在 XAML 中,通过
Grid.RowDefinitions和
Grid.ColumnDefinitions集合来声明。每个
RowDefinition或
ColumnDefinition指定一行或一列的行为: Auto:该行/列高度/宽度刚好容纳其子元素(内容自适应) 固定值(如
100):单位为设备独立像素(dp),固定大小 星号(*):按比例分配剩余空间,
*= 等分,
2*= 占两份
示例:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="100" />
<RowDefinition Height="2*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
</Grid>怎么把子控件放进指定行列
使用附加属性
Grid.Row、
Grid.Column(从 0 开始计数)定位控件位置:
Grid.Row="1"表示放在第 2 行(索引为 1)
Grid.Column="0"表示放在第 1 列(索引为 0) 可跨行/列:
Grid.RowSpan="2"或
Grid.ColumnSpan="3"
例如让一个按钮占满第 0 行全部三列:
<Button Text="全宽按钮" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" />
代码中动态添加行列(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) });
<p>// 添加子元素并设置位置
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、
*、
数字三种模式,就能稳住大部分布局需求。
