在iOS端SwiftUI中实现首行为命名列的表格的最优方案是什么

版本适配优先判断 #

• 若最低支持iOS 16及以上版本：系统原生Table组件已支持iOS平台，并非macOS独占，完全满足首行命名列的需求，原生组件的性能、交互效果最优，是首选方案。
• 若需要兼容iOS 15及更低版本：根据数据量选择对应方案即可：
  • 数据量少于20行、无长列表滚动需求：用VStack嵌套HStack手动搭建成本最低，灵活度最高，可快速实现列宽自定义、对齐规则调整、表头样式区分的需求。
  • 数据量较大、需要长列表滚动：用LazyVGrid实现性能最优，提前配置GridItem定义每列的宽度规则，表头单独固定在顶部，数据行放在滚动区域内即可避免滚动卡顿问题。

参考实现代码（兼容iOS 13+，适配长列表场景） #

// 列宽规则配置
private let columns = [
    GridItem(.flexible(), alignment: .leading), // 第一列左对齐
    GridItem(.flexible(), alignment: .center), // 第二列居中
    GridItem(.flexible(), alignment: .trailing) // 第三列右对齐
]

struct DemoTableView: View {
    // 表头数据
    private let headers = ["产品名称", "库存", "售价"]
    // 表格内容数据
    private let rowData = [
        ["无线耳机", "128", "¥399"],
        ["快充头", "302", "¥89"],
        ["手机壳", "576", "¥39"]
    ]
    
    var body: some View {
        VStack(spacing: 0) {
            // 固定表头区域
            HStack(spacing: 0) {
                ForEach(headers, id: \.self) { header in
                    Text(header)
                        .fontWeight(.medium)
                        .padding(.vertical, 12)
                        .padding(.horizontal, 16)
                        .frame(maxWidth: .infinity, alignment: alignmentForHeader(header))
                        .background(Color(UIColor.systemGray5))
                }
            }
            // 可滚动内容区域
            ScrollView {
                LazyVGrid(columns: columns, spacing: 0) {
                    ForEach(rowData, id: \.self) { row in
                        ForEach(row, id: \.self) { cellContent in
                            Text(cellContent)
                                .padding(.vertical, 12)
                                .padding(.horizontal, 16)
                                .frame(maxHeight: .infinity)
                        }
                        // 可自行添加分割线、行选中效果等
                    }
                }
            }
        }
        .border(Color(UIColor.systemGray4), width: 0.5)
    }
    
    // 匹配表头和内容的对齐规则
    private func alignmentForHeader(_ header: String) -> Alignment {
        switch header {
        case "产品名称": return .leading
        case "库存": return .center
        case "售价": return .trailing
        default: return .leading
        }
    }
}

上述代码可以直接实现你示例图中的列对齐、固定表头的表格效果，如需调整列宽为固定值，把GridItem的参数修改为.fixed(宽度数值)即可。

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