能否通过横竖屏切换触发调整Grid的每行元素显示数量？

我使用Xamarin.Forms开发，现有一个包含TableRoot和TableSection的TableView，TableSection通过C#从接口获取数据添加TextCell填充。现在需要实现设备横竖屏切换时，调整Grid中每行显示的元素数量：竖屏时每行1个，横屏时每行3个，但未找到类似MaxGridSize的属性。

现有代码 #

C# 代码 #

foreach (var reply in grpcReply.grpcResult)
{
    QuerySection.Add(new TextCell
    {
        Text = $"{reply.FieldOne} {reply.FieldTwo}",
        Detail = $"{reply.FieldThree} {reply.FieldFour}"
    });
}

XAML 代码 #

<TableView Intent="Menu"
    HorizontalOptions="Center"
    x:Name="QueryView">
    <TableRoot>
        <TableSection Title="Results" x:Name="QuerySection">
        </TableSection>
    </TableRoot>
</TableView>

期望效果 #

• 横屏（Landscape）：每行显示3个元素

  TC TC TC
  TC TC TC
  ...
  

• 竖屏（Portrait）：每行显示1个元素

  TC
  TC
  ...
  

尝试过的无效代码 #

以下代码实现的布局不符合预期，元素排列混乱：

int rowCounter = 0;
int columnCounter = 0;

foreach (var reply in grpcReply.grpcResult)
{
    if (rowCounter == 3)
    {
        rowCounter = 0;
        columnCounter++;
    }
    Label label = new Label
    {
        Text = $"{reply.fieldOne} {reply.fieldTwo}"
    };
    QueryGrid.SetColumn(label, columnCounter);
    QueryGrid.SetRow(label, rowCounter);
    QueryGrid.Children.Add(label);
    rowCounter++;
}

解决方案 #

1. 替换TableView为Grid布局 #

TableView是列表式布局，无法实现多列排列，因此需要将布局替换为Grid，并监听屏幕方向变化动态调整列数和元素位置。

2. 修改XAML布局 #

<Grid x:Name="QueryGrid"
      HorizontalOptions="Center"
      VerticalOptions="Start">
    <!-- 元素将通过C#动态添加 -->
</Grid>

3. 实现横竖屏切换逻辑 #

在页面的OnSizeAllocated方法中监听尺寸变化，重新计算Grid的列数和元素布局：

private int _currentColumns = 1; // 默认竖屏1列

protected override void OnSizeAllocated(double width, double height)
{
    base.OnSizeAllocated(width, height);
    
    // 根据宽高判断屏幕方向，设置列数
    int newColumns = width > height ? 3 : 1;
    
    if (newColumns != _currentColumns)
    {
        _currentColumns = newColumns;
        RefreshGridLayout(grpcReply.grpcResult); // 传入接口数据重新布局
    }
}

private void RefreshGridLayout(IEnumerable<YourReplyType> data)
{
    // 清空原有内容
    QueryGrid.Children.Clear();
    QueryGrid.ColumnDefinitions.Clear();
    QueryGrid.RowDefinitions.Clear();
    
    // 添加对应数量的列定义
    for (int i = 0; i < _currentColumns; i++)
    {
        QueryGrid.ColumnDefinitions.Add(new ColumnDefinition { Width = GridLength.Auto });
    }
    
    int totalItems = data.Count();
    // 计算所需总行数，向上取整确保所有元素都能显示
    int totalRows = (int)Math.Ceiling((double)totalItems / _currentColumns);
    
    // 添加行定义
    for (int i = 0; i < totalRows; i++)
    {
        QueryGrid.RowDefinitions.Add(new RowDefinition { Height = GridLength.Auto });
    }
    
    // 重新添加元素到Grid
    int index = 0;
    foreach (var reply in data)
    {
        var textCell = new TextCell
        {
            Text = $"{reply.FieldOne} {reply.FieldTwo}",
            Detail = $"{reply.FieldThree} {reply.FieldFour}"
        };
        
        // 计算当前元素所在的行和列
        int row = index / _currentColumns;
        int column = index % _currentColumns;
        
        Grid.SetRow(textCell, row);
        Grid.SetColumn(textCell, column);
        
        QueryGrid.Children.Add(textCell);
        index++;
    }
}

4. 初始化布局 #

在获取到接口数据后，调用RefreshGridLayout方法完成初始布局：

// 获取grpcReply数据后执行
RefreshGridLayout(grpcReply.grpcResult);

关键说明 #

• OnSizeAllocated是Xamarin.Forms页面中监听尺寸变化的原生方法，通过比较宽高值判断当前是横屏还是竖屏。
• 每次方向切换时，需要清空Grid的所有内容和定义，再根据新的列数重新构建布局，避免旧布局干扰。
• 使用Math.Ceiling计算总行数，确保元素数量无法被列数整除时，最后一行也能正确显示剩余元素。

内容的提问来源于stack exchange，提问作者John Harris