Table组件是什么
一种容器,用于呈现按一列或多列排列的数据行,可选择提供选择一个或多个成员的能力。
struct Table<Value, Rows, Columns> where Value == Rows.TableRowValue, Rows : TableRowContent, Columns : TableColumnContent, Rows.TableRowValue == Columns.TableRowValue
使用方法
您通常从数据集合创建表。以下示例显示如何从Person符合的类型的数组创建一个简单的两列表Identifiable:
struct Person: Identifiable {
let givenName: String
let familyName: String
let id = UUID()
}
private var people = [
Person(givenName: "Juan", familyName: "Chavez"),
Person(givenName: "Mei", familyName: "Chen"),
Person(givenName: "Tom", familyName: "Clark"),
Person(givenName: "Gita", familyName: "Kumar"),
]
var body: some View {
Table(people) {
TableColumn("Given Name", value: \.givenName)
TableColumn("Family Name", value: \.familyName)
}
}
支持表格中的选择
要使表的行可选,请提供对选择变量的绑定。绑定到表数据类型的单个实例会创建一个单选表。绑定到 a创建一个支持多项选择的表。以下示例显示了如何将多选添加到上一个示例中。甲见下表视图显示当前选择的项目的数量。Identifiable.IDSetText
struct Person: Identifiable {
let givenName: String
let familyName: String
let id = UUID()
}
private var people = [
Person(givenName: "Juan", familyName: "Chavez"),
Person(givenName: "Mei", familyName: "Chen"),
Person(givenName: "Tom", familyName: "Clark"),
Person(givenName: "Gita", familyName: "Kumar"),
]
@State private var selectedPeople = Set<Person.ID>()
var body: some View {
Table(people, selection: $selectedPeople) {
TableColumn("Given Name", value: \.givenName)
TableColumn("Family Name", value: \.familyName)
}
Text("\(multiSelection.count) people selected")
}
支持表格排序
要使表的列可排序,请提供对排序描述符数组的绑定。该表将通过其列标题反映排序状态,允许对具有键路径的任何列进行排序。排序描述符的更新应该反映在提供给表的数据集合中,因为表本身不执行排序操作。以下示例显示了如何向前一个示例添加排序功能:
struct Person: Identifiable {
let givenName: String
let familyName: String
let id = UUID()
}
@State private var people = [
Person(givenName: "Juan", familyName: "Chavez"),
Person(givenName: "Mei", familyName: "Chen"),
Person(givenName: "Tom", familyName: "Clark"),
Person(givenName: "Gita", familyName: "Kumar"),
]
@State private var sortOrder = [KeyPathComparator(\Person.givenName)]
var body: some View {
Table(people, sortOrder: $sortOrder) {
TableColumn("Given Name", value: \.givenName)
TableColumn("Family Name", value: \.familyName)
}
.onChange(of: sortOrder) {
people.sort(using: $0)
}
}