セクション 104

List ビューを更新

LandmarkRow と同様に、LandmarkList はすでに macOS で機能していますが、改善点を使用することもできます。たとえば、お気に入りのみを表示するためのトグルスイッチをツールバーのメニューに移動すると、このメニューには、追加のフィルタリングコントロールを結合できます。

行う変更は macOS と iOS の両方で機能しますが、watchOS で対応するのは困難です。幸い、前のセクションでは、リストを watchOS 用の別のファイルに分割しました。

ステップ 1

MacLandmarks スキームに戻り、iOS と macOS をターゲットとする LandmarkList ファイルで、新しい toolbar 修飾子内に Menu を含む ToolbarItem を追加します。

アプリを実行するまで、toolbar の更新を確認することはできません。

プレビューその 1

LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. @EnvironmentObject var modelData: ModelData
5. @State private var showFavoritesOnly = false
7. var filteredLandmarks: [Landmark] {
8. modelData.landmarks.filter { landmark in
9. (!showFavoritesOnly || landmark.isFavorite)
10. }
11. }
13. var body: some View {
14. NavigationView {
15. List {
16. Toggle(isOn: $showFavoritesOnly) {
17. Text("Favorites only")
18. }
20. ForEach(filteredLandmarks) { landmark in
21. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
22. LandmarkRow(landmark: landmark)
23. }
24. }
25. }
26. .navigationTitle("Landmarks")
27. .frame(minWidth: 300)
.toolbar {
ToolbarItem {
Menu {
} label: {
Label("Filter", systemImage: "slider.horizontal.3")
}
}
}
28. }
29. }
30. }
32. struct LandmarkList_Previews: PreviewProvider {
33. static var previews: some View {
34. LandmarkList()
35. .environmentObject(ModelData())
36. }
37. }

ステップ 2

お気に入りの Toggle を Menu の中に移動します。

これにより、プラットフォーム固有の方法で toggle がツールバーの中に移動します。これには、ランドマークのリストがどれだけ長くなるか、またはユーザがどれだけ下にスクロールしてもアクセスできるようにするという追加の利点があります。

プレビューその 2

LandmarkList.swift

14. NavigationView {
15. List {
16. ForEach(filteredLandmarks) { landmark in
17. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
18. LandmarkRow(landmark: landmark)
19. }
20. }
21. }
22. .navigationTitle("Landmarks")
23. .frame(minWidth: 300)
24. .toolbar {
25. ToolbarItem {
26. Menu {
Toggle(isOn: $showFavoritesOnly) {
Label("Favorites only", systemImage: "star.fill")
}
27. } label: {
28. Label("Filter", systemImage: "slider.horizontal.3")
29. }
30. }
31. }

利用可能なスペースが増えたら、landmarks のリストをカテゴリでフィルタリングするための新しいコントロールを追加しましょう。

ステップ 3

FilterCategory 列挙体を追加して、フィルターの状態を記述します。

case 文字列をランドマーク構造体内の Category 列挙型と一致させて比較できるようにして、すべての case を含めてフィルタリングをオフにします。

LandmarkList.swift

5. @State private var showFavoritesOnly = false
enum FilterCategory: String, CaseIterable, Identifiable {
case all = "All"
case lakes = "Lakes"
case rivers = "Rivers"
case mountains = "Mountains"
var id: FilterCategory { self }
}
7. var filteredLandmarks: [Landmark] {
8. modelData.landmarks.filter { landmark in

ステップ 4

filter 状態変数を追加しますが、デフォルトではすべての case です。

フィルタの状態をリストビュー内に保存することで、ユーザはそれぞれ独自のフィルタ設定を持つ複数のリストビューウィンドウを開いて、さまざまな方法でデータを表示できます。

LandmarkList.swift

4. @EnvironmentObject var modelData: ModelData
5. @State private var showFavoritesOnly = false
@State private var filter = FilterCategory.all
7. enum FilterCategory: String, CaseIterable, Identifiable {

ステップ 5

特定の landmark のカテゴリと組み合わせて、新しい filter 設定を考慮に入れるように filteredLandmarks を更新します。

LandmarkList.swift

17. var filteredLandmarks: [Landmark] {
18. modelData.landmarks.filter { landmark in
19. (!showFavoritesOnly || landmark.isFavorite)
&& (filter == .all || filter.rawValue == landmark.category.rawValue)
20. }
21. }

ステップ 6

メニューに Picker を追加して、フィルタカテゴリを設定します。

フィルタには数個のアイテムしかないため、InlinePickerStyle を使用して、それらをすべて一緒に表示します。

LandmarkList.swift

36. ToolbarItem {
37. Menu {
Picker("Category", selection: $filter) {
ForEach(FilterCategory.allCases) { category in
Text(category.rawValue).tag(category)
}
}
.pickerStyle(InlinePickerStyle())
38. Toggle(isOn: $showFavoritesOnly) {
39. Label("Favorites only", systemImage: "star.fill")
40. }
41. } label: {
42. Label("Filter", systemImage: "slider.horizontal.3")
43. }

ステップ 7

filter の状態に一致するように navigation title (ナビゲーションタイトル) を更新します。

この変更は、iOS アプリで役立ちます。

LandmarkList.swift

20. && (filter == .all || filter.rawValue == landmark.category.rawValue)
21. }
22. }
var title: String {
let title = filter == .all ? "Landmarks" : filter.rawValue
return showFavoritesOnly ? "Favorite \(title)" : title
}
24. var body: some View {
25. NavigationView {
26. List {
27. ForEach(filteredLandmarks) { landmark in
28. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
29. LandmarkRow(landmark: landmark)
30. }
31. }
32. }
.navigationTitle(title)
33. .frame(minWidth: 300)
34. .toolbar {
35. ToolbarItem {
36. Menu {

ステップ 8

広いレイアウト内の 2 番目のビューのプレースホルダーとして 2 番目の子供ビューを NavigationView に追加します。

2 番目の子供ビューを追加すると、サイドバーリストスタイルを使用するようにリストが自動的に変換されます。

プレビューその 3

LandmarkList.swift

50. Toggle(isOn: $showFavoritesOnly) {
51. Label("Favorites only", systemImage: "star.fill")
52. }
53. } label: {
54. Label("Filter", systemImage: "slider.horizontal.3")
55. }
56. }
57. }
Text("Select a Landmark")
58. }
59. }
60. }
62. struct LandmarkList_Previews: PreviewProvider {




ステップ 9

macOS ターゲットを実行し、メニューがどのように動作するかを確認します。








ステップ 10

Landmarks ビルドターゲットを選択し、ライブプレビューを使用して、新しいフィルタリングが iOS でも適切に機能することを確認します。




---




iOS でもサイドバーリストスタイルが使用されていることに注意してください。















セクション 1	セクション 2	セクション 3	セクション 4
セクション 5	セクション 6	セクション 7
セクション 101	セクション 102	セクション 103	セクション 104
セクション 105	セクション 106	セクション 107