MAUI Grid列未横向排列而是堆叠的问题排查

核心问题原因 #

• 缺少对应数量的列定义：如果后台没有为Grid创建足够的ColumnDefinition，即使指定了Grid.Column属性，元素也会被挤到已有的列中，导致堆叠显示
• 未设置子元素的Grid.Column附加属性：所有子元素默认都会放在第0列，自然垂直堆叠
• Grid布局约束不足：比如Grid的HorizontalOptions设为非Fill值，导致Grid本身宽度不够，列无法横向排列

代码修正示例 #

错误代码（常见问题） #

var grid = new Grid();
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
// 未添加足够的列定义
// grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
// grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });

foreach (var item in dataSet)
{
    var stack = new VerticalStackLayout();
    stack.Children.Add(new Image { Source = item.ImageSource });
    stack.Children.Add(new Label { Text = item.Text });
    stack.Children.Add(new Button { Text = "点击" });
    
    // 未设置Grid.Column，默认都在第0列
    grid.Children.Add(stack);
}

修正后的正确代码 #

var grid = new Grid
{
    HorizontalOptions = LayoutOptions.Fill, // 确保Grid占满可用宽度
    ColumnSpacing = 10 // 可选：设置列间距
};

// 添加1行定义
grid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
// 根据数据集数量添加对应列定义（这里数据集有2项，所以创建2列）
foreach (var _ in dataSet)
{
    grid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Star });
}

for (int i = 0; i < dataSet.Count; i++)
{
    var item = dataSet[i];
    var stack = new VerticalStackLayout
    {
        HorizontalOptions = LayoutOptions.Center,
        VerticalOptions = LayoutOptions.Center
    };
    
    stack.Children.Add(new Image { Source = item.ImageSource, HeightRequest = 80 });
    stack.Children.Add(new Label { Text = item.Text, HorizontalTextAlignment = TextAlignment.Center });
    stack.Children.Add(new Button { Text = "操作", WidthRequest = 100 });
    
    // 关键：指定子元素所在的列
    Grid.SetColumn(stack, i);
    Grid.SetRow(stack, 0); // 只有1行，可省略，但显式设置更清晰
    
    grid.Children.Add(stack);
}

// 将Grid设置为页面内容
Content = grid;

额外验证点 #

1. 确认ColumnDefinition的数量与数据集元素数量一致
2. 检查子元素的Grid.Column值是否从0开始依次递增
3. 确保Grid的宽度足够容纳所有列，避免因空间不足导致列换行堆叠

内容的提问来源于stack exchange，提问作者Prescott Chartier