Xamarin iOS新手求助：如何创建3列动态行数表格

嘿，作为Xamarin iOS新手，要实现这种动态行数的3列表格其实有两种很实用的方案，我给你详细拆解下，适配你想要的样式需求～

UITableView本身是单行布局，但我们可以把每个单元格做成包含3个列项的容器，这样每一行就对应表格的一行，行数完全由API返回的数据量决定（如果数据总数不是3的倍数，最后一行可以补空占位或者调整布局）。

步骤1：创建自定义UITableViewCell #

新建一个继承自UITableViewCell的类，在里面添加3个用于展示列内容的控件（这里用UILabel举例，你可以换成其他控件），用AutoLayout确保三列宽度均等、布局合理：

public class ThreeColumnTableCell : UITableViewCell
{
    public UILabel Column1Label { get; private set; }
    public UILabel Column2Label { get; private set; }
    public UILabel Column3Label { get; private set; }

    public ThreeColumnTableCell(string reuseIdentifier) : base(UITableViewCellStyle.Default, reuseIdentifier)
    {
        // 初始化三个列标签
        Column1Label = new UILabel { Font = UIFont.SystemFontOfSize(14), TextAlignment = UITextAlignment.Left };
        Column2Label = new UILabel { Font = UIFont.SystemFontOfSize(14), TextAlignment = UITextAlignment.Center };
        Column3Label = new UILabel { Font = UIFont.SystemFontOfSize(14), TextAlignment = UITextAlignment.Right };

        // 用StackView管理三个列，实现均等分布
        var stackView = new UIStackView(new[] { Column1Label, Column2Label, Column3Label })
        {
            Axis = UILayoutConstraintAxis.Horizontal,
            Distribution = UIStackViewDistribution.FillEqually,
            Spacing = 8,
            TranslatesAutoresizingMaskIntoConstraints = false
        };

        ContentView.AddSubview(stackView);
        // 设置StackView的约束，确保和单元格内容边距合理
        NSLayoutConstraint.ActivateConstraints(new[]
        {
            stackView.LeadingAnchor.ConstraintEqualTo(ContentView.LeadingAnchor, 16),
            stackView.TrailingAnchor.ConstraintEqualTo(ContentView.TrailingAnchor, -16),
            stackView.TopAnchor.ConstraintEqualTo(ContentView.TopAnchor, 12),
            stackView.BottomAnchor.ConstraintEqualTo(ContentView.BottomAnchor, -12)
        });
    }
}

步骤2：对API数据进行分组处理 #

把API返回的一维数据转换成每3个一组的二维列表，这样每个组就对应表格的一行：

// 假设apiData是从API获取的数据列表，替换成你的实际数据模型
List<string> apiData = new List<string> { "数据1", "数据2", "数据3", "数据4", "数据5", "数据6", "数据7" };
List<List<string>> groupedData = new List<List<string>>();

for (int i = 0; i < apiData.Count; i += 3)
{
    // 每次取3个数据组成一行
    var rowData = apiData.Skip(i).Take(3).ToList();
    // 如果不足3个，补空字符串占位（也可以根据需求调整）
    while (rowData.Count < 3)
    {
        rowData.Add("");
    }
    groupedData.Add(rowData);
}

步骤3：配置UITableView并绑定数据 #

在你的ViewController中初始化UITableView，注册自定义单元格，实现数据源方法：

public class TableViewController : UIViewController
{
    private UITableView _tableView;
    private List<List<string>> _groupedData;

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        View.BackgroundColor = UIColor.White;

        // 这里替换成你的API异步请求逻辑，获取数据后赋值给_groupedData
        _groupedData = GetGroupedDataFromApi();

        // 初始化表格
        _tableView = new UITableView(View.Bounds);
        _tableView.RegisterClassForCellReuse(typeof(ThreeColumnTableCell), "ThreeColumnCell");
        _tableView.DataSource = this;
        // 自动计算行高
        _tableView.RowHeight = UITableView.AutomaticDimension;
        _tableView.EstimatedRowHeight = 44;
        View.AddSubview(_tableView);
    }

    // 模拟API数据获取，实际中替换成网络请求
    private List<List<string>> GetGroupedDataFromApi()
    {
        List<string> apiData = new List<string> { "数据1", "数据2", "数据3", "数据4", "数据5", "数据6", "数据7" };
        List<List<string>> groupedData = new List<List<string>>();
        
        for (int i = 0; i < apiData.Count; i += 3)
        {
            var rowData = apiData.Skip(i).Take(3).ToList();
            while (rowData.Count < 3)
            {
                rowData.Add("");
            }
            groupedData.Add(rowData);
        }
        return groupedData;
    }
}

// 实现UITableViewDataSource接口
public partial class TableViewController : UITableViewDataSource
{
    public nint RowsInSection(UITableView tableView, nint section)
    {
        // 返回分组后的行数
        return _groupedData.Count;
    }

    public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
    {
        var cell = tableView.DequeueReusableCell("ThreeColumnCell") as ThreeColumnTableCell;
        var rowData = _groupedData[indexPath.Row];
        // 给三个列赋值
        cell.Column1Label.Text = rowData[0];
        cell.Column2Label.Text = rowData[1];
        cell.Column3Label.Text = rowData[2];
        return cell;
    }
}

如果想要更灵活的网格布局（比如以后可能调整列数），UICollectionView是更好的选择，它天生支持网格排列，直接通过流式布局就能实现3列效果，行数自动由数据量决定。

步骤1：创建自定义UICollectionViewCell #

新建继承自UICollectionViewCell的类，添加展示内容的控件，还可以给单元格加边框模拟表格线：

public class GridCollectionViewCell : UICollectionViewCell
{
    public UILabel ContentLabel { get; private set; }

    public GridCollectionViewCell(IntPtr handle) : base(handle)
    {
        ContentLabel = new UILabel
        {
            Font = UIFont.SystemFontOfSize(14),
            TextAlignment = UITextAlignment.Center,
            TranslatesAutoresizingMaskIntoConstraints = false
        };
        ContentView.AddSubview(ContentLabel);

        // 设置标签的居中约束
        NSLayoutConstraint.ActivateConstraints(new[]
        {
            ContentLabel.CenterXAnchor.ConstraintEqualTo(ContentView.CenterXAnchor),
            ContentLabel.CenterYAnchor.ConstraintEqualTo(ContentView.CenterYAnchor),
            ContentLabel.LeadingAnchor.ConstraintGreaterThanOrEqualTo(ContentView.LeadingAnchor, 8),
            ContentLabel.TrailingAnchor.ConstraintLessThanOrEqualTo(ContentView.TrailingAnchor, -8)
        });

        // 添加边框模拟表格线
        ContentView.Layer.BorderWidth = 1;
        ContentView.Layer.BorderColor = UIColor.LightGray.CGColor;
    }
}

步骤2：配置UICollectionView和流式布局 #

在ViewController中设置流式布局，指定3列，然后实现数据源方法：

public class CollectionViewController : UIViewController
{
    private UICollectionView _collectionView;
    private List<string> _apiData;

    public override void ViewDidLoad()
    {
        base.ViewDidLoad();
        View.BackgroundColor = UIColor.White;

        // 模拟API数据，实际替换成异步网络请求
        _apiData = new List<string> { "数据1", "数据2", "数据3", "数据4", "数据5", "数据6", "数据7" };

        // 初始化流式布局
        var layout = new UICollectionViewFlowLayout();
        int columnCount = 3;
        // 计算每个单元格的宽度：屏幕宽度减去间距，再均分3列
        var cellWidth = (View.Bounds.Width - (columnCount + 1) * 8) / columnCount;
        layout.ItemSize = new CGSize(cellWidth, 44); // 单元格大小，高度可根据内容调整
        layout.MinimumInteritemSpacing = 8; // 列间距
        layout.MinimumLineSpacing = 8; // 行间距
        layout.SectionInset = new UIEdgeInsets(8, 8, 8, 8); // 整体内边距

        // 初始化集合视图
        _collectionView = new UICollectionView(View.Bounds, layout);
        _collectionView.RegisterClassForCellReuse(typeof(GridCollectionViewCell), "GridCell");
        _collectionView.DataSource = this;
        _collectionView.BackgroundColor = UIColor.White;
        View.AddSubview(_collectionView);
    }
}

// 实现UICollectionViewDataSource接口
public partial class CollectionViewController : UICollectionViewDataSource
{
    public nint NumberOfSections(UICollectionView collectionView)
    {
        return 1;
    }

    public nint GetItemsCount(UICollectionView collectionView, nint section)
    {
        // 返回API数据的总数
        return _apiData.Count;
    }

    public UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
    {
        var cell = collectionView.DequeueReusableCell("GridCell", indexPath) as GridCollectionViewCell;
        cell.ContentLabel.Text = _apiData[indexPath.Row];
        return cell;
    }
}

一些实用小贴士 #

• 如果你的数据是复杂模型（比如包含多个字段的实体类），只需要把示例中的字符串替换成对应的模型属性即可
• 表格线效果：UITableView可以通过设置_tableView.SeparatorStyle = UITableViewCellSeparatorStyle.SingleLine;添加行分割线；UICollectionView可以通过单元格边框或者自定义布局来实现完整的表格线
• API请求必须放在异步线程，获取数据后要回到主线程刷新视图：InvokeOnMainThread(() => _tableView.ReloadData());（或_collectionView.ReloadData()）

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