SwiftUI表格Table

SwiftUI 在 macOS 12（SwiftUI 3）中引入了 Table，用于构建类似 AppKit NSTableView 的多列数据表格。它是 SwiftUI 中唯一原生支持“列状数据展示”的高级组件，专用于 macOS 平台。

基本用法

Table(data) {
    TableColumn("名称", value: \.name)
    TableColumn("年龄") { item in
        Text("\(item.age)")
    }
}

data 是 RandomAccessCollection（如 [Model]）。

每个 TableColumn 定义一列。

可以用 key path 绑定，或手动构建单元格内容。

使用场景

1、基础的Table

struct Item: Identifiable {
    let id = UUID()
    let name: String
    let age: Int
}

struct TableView: View {
    let items: [Item] = [
        .init(name: "Alice", age: 24),
        .init(name: "Bob", age: 30),
    ]

    var body: some View {
        Table(items) {
            TableColumn("姓名", value: \.name)
            TableColumn("年龄") { item in
                Text("\(item.age) 岁")
            }
        }
        .frame(width: 400, height: 200)
    }
}

2、添加排序功能

struct TableView: View {
    @State private var sortOrder = [KeyPathComparator(\Item.age)]
    @State private var items: [Item] = [
        .init(name: "Alice", age: 24),
        .init(name: "Bob", age: 30),
    ]

    var body: some View {
        Table(items,sortOrder: $sortOrder) {
            TableColumn("姓名", value: \.name)
            TableColumn("年龄", value: \.age) { item in
                Text("\(item.age) 岁")
            }
        }
        .onChange(of: sortOrder) { newOrder in
            items.sort(using: newOrder)
        }
        .frame(width: 400, height: 200)
    }
}

3、多选功能

@State private var selection = Set<Item.ID>()

Table(items, selection: $selection) {
    TableColumn("名称", value: \.name)
}

应用场景

1、macOS文件管理器、项目列表。

2、后台管理系统（如用户、订单、日志）。

3、列表详情展示（无复杂交互）。

总结

Table为原生多列支持，提供排序、选择、多列宽自动处理。

UI 风格一致，适合管理界面、数据后台、开发者工具等 macOS 应用。

但是，不支持iOS/iPadOS，仅适用于macOS，不支持滑动删除、编辑等功能。

如果需要支持输入控件，推荐使用Form替代Table。