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.RowDefinitionsGrid.ColumnDefinitions 集合来声明。每个 RowDefinitionColumnDefinition 指定一行或一列的行为:

  • Auto:该行/列高度/宽度刚好容纳其子元素(内容自适应)
  • 固定值(如 100):单位为设备独立像素(dp),固定大小
  • 星号(*):按比例分配剩余空间,* = 等分,2* = 占两份

示例:


    
        
        
        
        
    
    
        
        
        
    

怎么把子控件放进指定行列

使用附加属性 Grid.RowGrid.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() 等方法才能准确定位。

常见坑和提示

实际开发中容易忽略的细节:

  • 没定义 RowDefinitionsColumnDefinitions?默认只有 1 行 1 列,所有子控件会堆叠在左上角
  • Auto 行/列里放了 VerticalOptions="Fill" 的控件?它不会撑开 Auto 行——Auto 只看内容自身所需尺寸
  • 想让某列“尽量小但不为零”?用 Auto;想“至少 80 宽,有剩余再扩展”?目前 MAUI 不支持 MinWidth,需用 GridLength.Star + 内部嵌套 StackLayout 控制最小尺寸
  • 调试时开启网格线:Grid.ShowGridLines="True"(仅 Debug 模式有效,XAML 中加即可)

基本上就这些。Grid 看似简单,但行列表达式组合起来能实现绝大多数界面结构,熟练掌握 Auto*数字 三种模式,就能稳住大部分布局需求。