SwiftUI表格样式的实用技巧

在开发iOS应用时，展示数据列表是常见的需求。SwiftUI提供了List和ForEach来呈现数据，但当需要更清晰的行列结构时，表格样式就显得尤为重要。虽然SwiftUI没有直接叫“Table”的组件，但通过一些布局技巧可以实现类似效果。

用LazyVGrid实现基础表格

想要做出表格效果，可以用LazyVGrid搭配固定列宽。比如要显示商品名称和价格，两列并排，每行对齐整齐：

struct PriceListView: View {
    private let columns = [
        GridItem(.flexible()),
        GridItem(.fixed(80))
    ]

    var body: some View {
        LazyVGrid(columns: columns, spacing: 8) {
            ForEach(items, id: \ .id) { item in
                Text(item.name)
                Text("$\(item.price)")
                    .frame(alignment: .trailing)
            }
        }
        .padding()
    }
}

添加表头提升可读性

纯数据看起来容易混淆，加个表头能帮助用户快速理解内容。可以在Grid顶部手动插入标题文字：

LazyVGrid(columns: columns, spacing: 8) {
    Text("商品")
        .fontWeight(.bold)
    Text("价格")
        .fontWeight(.bold)

    ForEach(items, id: \ .id) { item in
        Text(item.name)
        Text("$\(item.price)")
    }
}

用ZStack模拟单元格边框

如果希望每个格子都有边线，可以结合ZStack和Rectangle绘制细线。例如给价格项加个浅灰色底框：

Text("$\(item.price)")
    .frame(maxWidth: .infinity, alignment: .trailing)
    .padding(6)
    .background(
        RoundedRectangle(cornerRadius: 4)
            .stroke(Color.gray.opacity(0.3), lineWidth: 1)
    )

适配不同屏幕尺寸

在iPhone上两列刚刚好，但在iPad上可能想显示更多内容。利用GeometryReader获取宽度动态调整列数：

GeometryReader { geometry in
    let columnCount = geometry.size.width > 400 ? 3 : 2
    let columns = Array(repeating: GridItem(.flexible()), count: columnCount)

    LazyVGrid(columns: columns) {
        // 数据项
    }
}

这种做法让界面更灵活，横屏竖屏都能正常显示。实际开发中，像记账App、课程表这类信息密集的应用特别适合这种布局方式。不需要引入复杂第三方库，原生SwiftUI就能搞定大部分表格需求。