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

来源:这里教程网 时间:2026-02-21 17:34:45 作者:

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

相关推荐