MAUI Grid插入新行时丢失表头单元格问题求助

问题根源 #

你遇到的表头最后两个单元格丢失问题，核心原因是XAML中表头的最后两个BoxView错误设置了Grid.Row="1"。初始Grid仅定义了1行（Row 0），这些BoxView实际处于不存在的行中；当添加第一行数据后，Row 1被创建，这些BoxView会被渲染到数据行位置，导致表头最后两列失去背景，视觉上呈现“丢失”效果。

修复步骤 #

1. 修正XAML表头控件的Row属性 #

将XAML中错误设置Grid.Row="1"的两个BoxView的Row属性移除（或显式设置为0），确保所有表头控件都处于Row 0：

<Grid ColumnDefinitions="0.1*,0.4*,0.1*,0.25*" x:Name="gridData" Grid.Row="4" ColumnSpacing="1">
      <Grid.RowDefinitions> 
        <RowDefinition Height="50"/>
      </Grid.RowDefinitions>
      <BoxView Color="Red" />
      <Label Text="#" HorizontalOptions="Center" VerticalOptions="Center" />
      <BoxView Color="Red" Grid.Column="1"/>
      <Label Text="Descripción" Grid.Column="1" HorizontalOptions="Center" VerticalOptions="Center" />
      <!-- 移除Grid.Row="1" -->
      <BoxView Grid.Column="2" Color="Red"/>
      <Label Text="Cant." Grid.Column="2" HorizontalOptions="Center" VerticalOptions="Center" />
      <!-- 移除Grid.Row="1" -->
      <BoxView Grid.Column="3" Color="Red" />
      <Label Text="Total" Grid.Column="3" HorizontalOptions="Center" VerticalOptions="Center" />
</Grid>

2. 确保数据行添加逻辑正确 #

初始Grid已有1行（表头行），所以count_rows的初始值应设为1，这样添加的第一行数据会被放到Row 1的位置，不会覆盖表头：

// 初始化count_rows为1（表头已占用Row 0）
int count_rows = 1;

// 添加新行
RowDefinition row = new RowDefinition();
row.Height = 50;
gridData.AddRowDefinition(row);

// 第一列控件
gridData.Add(new BoxView { Color = color }, 0, count_rows);
gridData.Add(new Label
{
    Text = "2",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    TextColor = Colors.Black
}, 0, count_rows);

// 第二列控件
gridData.Add(new BoxView { Color = color }, 1, count_rows);
gridData.Add(new Label
{
    Text = "Desc 2",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    TextColor = Colors.Black
}, 1, count_rows);

// 第三列控件
gridData.Add(new BoxView { Color = color }, 2, count_rows);
gridData.Add(new Label
{
    Text = "1",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    TextColor = Colors.Black
}, 2, count_rows);

// 第四列控件
gridData.Add(new BoxView { Color = color }, 3, count_rows);
gridData.Add(new Label
{
    Text = "$ 132.40",
    HorizontalOptions = LayoutOptions.Center,
    VerticalOptions = LayoutOptions.Center,
    TextColor = Colors.Black
}, 3, count_rows);

count_rows++;

更优实现建议 #

手动向Grid添加控件的方式不利于维护，推荐使用CollectionView结合Grid布局实现产品列表：

• 表头单独用一个Grid或StackLayout实现
• 数据行用CollectionView的ItemTemplate定义Grid布局，绑定产品数据
  这种方式符合MVVM模式，无需手动管理行的添加/移除，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Roberto Oropeza