C# MAUI中的Grid布局怎么设置行和列 MAUI Grid教程

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、*、数字 三种模式，就能稳住大部分布局需求。