セクション 106

カスタムメニューコマンドを追加

以前のセクションでは、組み込みのメニューコマンドセットを追加しました。このセクションでは、現在選択されているランドマークのお気に入りのステータスを切り替えるためのカスタムコマンドを追加します。現在選択されているランドマークがどれかを知るには、フォーカスされた結合を使用して下さい。

ステップ 1

LandmarkCommands 内で、SelectedLandmarkKey と呼ばれるカスタムキーを使用して、FocusedValues 構造体を selectedLandmark の値で拡張します。

フォーカスされた値を定義するためのパターンは、新しい Environment の値を定義するためのパターンに似ています。秘密鍵を使用して、システム定義の FocusedValues 構造体のカスタムプロパティを読み書きします。

LandmarkCommands.swift

1. import SwiftUI
3. struct LandmarkCommands: Commands {
4. var body: some Commands {
5. SidebarCommands()
6. }
7. }
private struct SelectedLandmarkKey: FocusedValueKey {
typealias Value = Binding<.<Landmark>
}
extension FocusedValues {
var selectedLandmark: Binding<Landmark>? {
get { self[SelectedLandmarkKey.self] }
set { self[SelectedLandmarkKey.self] = newValue }
}
}

ステップ 2

@FocusedBinding プロパティラッパーを使用して現在選択されているランドマークを追跡する MenuContent ビューを作成します。

ここで値を読みましょう。後でリストビュー内で設定し、ユーザが選択します。

LandmarkCommands.swift

1. import SwiftUI
3. struct LandmarkCommands: Commands {
private struct MenuContent: View {
@FocusedBinding(\.selectedLandmark) var selectedLandmark
var body: some View {
}
}
4. var body: some Commands {
5. SidebarCommands()

ステップ 3

選択したランドマークのお気に入りのステータスを切り替えるボタンをビューに追加します。このボタンは、現在選択されているランドマークとその状態に応じて外観が変わります。

LandmarkCommands.swift

4. private struct MenuContent: View {
5. @FocusedBinding(\.selectedLandmark) var selectedLandmark
7. var body: some View {
Button("\(selectedLandmark?.isFavorite == true ? "Remove" : "Mark") as Favorite") {
selectedLandmark?.isFavorite.toggle()
}
.disabled(selectedLandmark == nil)
8. }
9. }

ステップ 4

keyboardShortcut(_:modifiers:) 修飾子を使用してメニュー項目のキーボードショートカットを追加します。

SwiftUI は、メニュー内にキーボードショートカットを自動的に表示します。

LandmarkCommands.swift

8. Button("\(selectedLandmark?.isFavorite == true ? "Remove" : "Mark") as Favorite") {
9. selectedLandmark?.isFavorite.toggle()
10. }
.keyboardShortcut("f", modifiers: [.shift, .option])
11. .disabled(selectedLandmark == nil)
12. }
13. }

ステップ 5

定義したメニューコンテンツを使用する Landmarks と呼ばれるコマンドに新しい CommandMenu を追加します。

LandmarkCommands.swift

16. var body: some Commands {
17. SidebarCommands()
CommandMenu("Landmark") {
MenuContent()
}
18. }
19. }

これでメニューに新しいコマンドが含まれますが、それを機能させるには、selectedLandmark をフォーカスバインディングされたように設定する必要があります。

ステップ 6

LandmarkList.swift 内で、選択したランドマークの状態変数と、選択したランドマークのインデックスを示す計算されたプロパティを追加します。

LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. @EnvironmentObject var modelData: ModelData
5. @State private var showFavoritesOnly = false
6. @State private var filter = FilterCategory.all
@State private var selectedLandmark: Landmark?
8. enum FilterCategory: String, CaseIterable, Identifiable {
9. case all = "All"
10. case lakes = "Lakes"
11. case rivers = "Rivers"
12. case mountains = "Mountains"
14. var id: FilterCategory { self }
15. }
17. var filteredLandmarks: [Landmark] {
18. modelData.landmarks.filter { landmark in
19. (!showFavoritesOnly || landmark.isFavorite)
20. && (filter == .all || filter.rawValue == landmark.category.rawValue)
21. }
22. }
24. var title: String {
25. let title = filter == .all ? "Landmarks" : filter.rawValue
26. return showFavoritesOnly ? "Favorite \(title)" : title
27. }
var index: Int? {
modelData.landmarks.firstIndex(where: { $0.id == selectedLandmark?.id })
}
29. var body: some View {
30. NavigationView {
31. List {
32. ForEach(filteredLandmarks) { landmark in
33. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
34. LandmarkRow(landmark: landmark)
35. }
36. }
37. }
38. .navigationTitle(title)
39. .frame(minWidth: 300)
40. .toolbar {
41. ToolbarItem {
42. Menu {
43. Picker("Category", selection: $filter) {
44. ForEach(FilterCategory.allCases) { category in
45. Text(category.rawValue).tag(category)
46. }
47. }
48. .pickerStyle(InlinePickerStyle())
50. Toggle(isOn: $showFavoritesOnly) {
51. Label("Favorites only", systemImage: "star.fill")
52. }
53. } label: {
54. Label("Filter", systemImage: "slider.horizontal.3")
55. }
56. }
57. }
59. Text("Select a Landmark")
60. }
61. }
62. }
64. struct LandmarkList_Previews: PreviewProvider {
65. static var previews: some View {
66. LandmarkList()
67. .environmentObject(ModelData())
68. }
69. }

ステップ 7

選択した値に結束して List を初期化し、ナビゲーションリンクにタグを追加します。

タグは、特定のランドマークを ForEach 内の与えられた項目に関連付け、それは選択を促進します。

LandmarkList.swift

34. var body: some View {
35. NavigationView {
List(selection: $selectedLandmark) {
36. ForEach(filteredLandmarks) { landmark in
37. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
38. LandmarkRow(landmark: landmark)
39. }
.tag(landmark)
40. }
41. }
42. .navigationTitle(title)

ステップ 8

landmarks 配列からの値の結束を提供するために、focusedValue(_:_:) 修飾子を NavigationView に追加します。

ここでルックアップを実行して、コピーではなく、モデルに保存されているランドマークを変更していることを確認します。

LandmarkList.swift

65. Text("Select a Landmark")
66. }
.focusedValue(\.selectedLandmark, $modelData.landmarks[index ?? 0])
67. }
68. }
70. struct LandmarkList_Previews: PreviewProvider {

ステップ 9

macOS アプリを実行して、新しいメニュー項目を試してください。