-
Notifications
You must be signed in to change notification settings - Fork 409
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
104 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
30 changes: 30 additions & 0 deletions
30
SwiftPamphletApp/Resource/Guide/SwiftUI/数据集合组件/Table表格/Table-contextMenu(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State private var selection: Set<UUID> = [] | ||
| var body: some View { | ||
| Table(Fruit.simpleData(), selection: $selection) { | ||
| ... | ||
| } | ||
| .contextMenu(forSelectionType: Fruit.ID.self) { selection in | ||
| if selection.isEmpty { | ||
| Button("添加") { | ||
| // ... | ||
| } | ||
| } else if selection.count == 1 { | ||
| Button("收藏") { | ||
| // ... | ||
| } | ||
| } else { | ||
| Button("收藏多个") { | ||
| // ... | ||
| } | ||
| } | ||
| } primaryAction: { items in | ||
| // 双击某一行时 | ||
| debugPrint(items) | ||
| } | ||
| } | ||
| ... | ||
| } | ||
| ``` |
61 changes: 60 additions & 1 deletion
61
SwiftPamphletApp/Resource/Guide/SwiftUI/数据集合组件/Table表格/Table-多属性排序(ap).md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,61 @@ | ||
| # <#Title#> | ||
|
|
||
| 你可以使用 `Table` 视图的 `sortOrder` 参数来实现多属性排序。`sortOrder` 参数接受一个绑定到一个 `SortDescriptor` 数组的变量，这个数组定义了排序的顺序和方式。 | ||
|
|
||
| 以下是一个使用 `Table` 视图实现多属性排序的例子： | ||
|
|
||
| ```swift | ||
| struct ContentView: View { | ||
| @State private var sortOrder: [KeyPathComparator<Fruit>] = [.init(\.name, order: .reverse)] | ||
|
|
||
| @State var data = [ | ||
| Fruit(name: "Apple", color: "Red"), | ||
| Fruit(name: "Banana", color: "Yellow"), | ||
| Fruit(name: "Cherry", color: "Red"), | ||
| Fruit(name: "Date", color: "Brown"), | ||
| Fruit(name: "Elderberry", color: "Purple") | ||
| ] | ||
|
|
||
| var body: some View { | ||
| sortKeyPathView() // 排序状态 | ||
| Table(data, sortOrder: $sortOrder) { | ||
| TableColumn("Fruit", value: \.name) | ||
| TableColumn("Color", value: \.color) | ||
| // 不含 value 参数的不支持排序 | ||
| TableColumn("ColorNoOrder") { | ||
| Text("\($0.color)") | ||
| .font(.footnote) | ||
| .foregroundStyle(.mint) | ||
| } | ||
| } | ||
| .task { | ||
| data.sort(using: sortOrder) | ||
| } | ||
| .onChange(of: sortOrder) { oldValue, newValue in | ||
| data.sort(using: newValue) | ||
| } | ||
| .padding() | ||
| } | ||
|
|
||
| @ViewBuilder | ||
| func sortKeyPathView() -> some View { | ||
| HStack { | ||
| ForEach(sortOrder, id: \.self) { order in | ||
| Text(order.keyPath == \Fruit.name ? "名字" : "颜色") | ||
| Image(systemName: order.order == .reverse ? "chevron.down" : "chevron.up") | ||
| } | ||
| } | ||
| .padding(.top) | ||
| } | ||
| } | ||
|
|
||
| struct Fruit: Identifiable { | ||
| let id = UUID() | ||
| let name: String | ||
| let color: String | ||
| } | ||
| ``` | ||
|
|
||
| 在这个例子中，我们首先定义了一个 `@State` 变量 `sortOrder`，它是一个 `SortDescriptor` 数组，定义了排序的顺序和方式。然后，我们将这个变量绑定到 `Table` 视图的 `sortOrder` 参数。 | ||
|
|
||
| 现在，当用户点击表头来排序一个列时，`sortOrder` 变量就会被更新。你可以使用这个变量来实现多属性排序，或者实现其他的交互功能。 | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters