XCode 12.4 日本語化計画：Swift Tutorials

セクション 2

リストビューをフィルタリングする




リストビューをカスタマイズして、すべてのランドマーク、またはユーザのお気に入りだけを表示することができます。これを行うには、LandmarkList 型に状態を少しだけ追加する必要があります。




状態は、時間の経過とともに変化する可能性があり、ビューの動作、コンテンツ、またはレイアウトに影響を与える値または値のセットです。@State 属性を持つプロパティを使用して、ビューに状態を追加します。
















ステップ 1

プロジェクトナビゲータで LandmarkList.swift を選択して、プレビューを元に戻し、リストの 1 つのバージョンのみを表示します。




















































ステップ 2

初期値を false に設定して showFavoritesOnly という @State プロパティを追加します。




状態プロパティを使用して、ビューとそのサブビューに固有の情報を保持するため、常に状態を private として作成して下さい。









ステップ 3

[Resume(再開)] をクリックして、キャンバスを更新します。




---




プロパティの追加や変更など、ビューの構造体に変更を加える場合は、キャンバスを手動で更新する必要があります。



















ステップ 4

showFavoritesOnly プロパティと各 landmark.isFavorite 値を確認して、ランドマークリストのフィルタリングされたバージョンを計算します。





















































ステップ 5

List 内のランドマークのリストのフィルタリングされたバージョンを使用します。


























ステップ 6

showFavoritesOnly の初期値を true に変更して、リストがどのように反応するかを確認しましょう。

    LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. var body: some View {
5. NavigationView {
6. List(landmarks) { landmark in
7. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
8. LandmarkRow(landmark: landmark)
9. }
10. }
11. .navigationTitle("Landmarks")
12. }
13. }
14. }
16. struct LandmarkList_Previews: PreviewProvider {
17. static var previews: some View {
LandmarkList()
18. }
19. }

上記のリストの 4 行目に以下のように書き足します。

3. struct LandmarkList: View {
@State private var showFavoritesOnly = false
4. var body: some View {

上記のリストの 6 行目に以下のように書き足します。

4. struct LandmarkList: View {
5. @State private var showFavoritesOnly = false
var filteredLandmarks: [Landmark] {
landmarks.filter { landmark in
(!showFavoritesOnly || landmark.isFavorite)
}
}

    LandmarkList.swift

1. import SwiftUI
3. struct LandmarkList: View {
4. @State private var showFavoritesOnly = false
6. var filteredLandmarks: [Landmark] {
7. landmarks.filter { landmark in
8. (!showFavoritesOnly || landmark.isFavorite)
9. }
10. }
12. var body: some View {
13. NavigationView {
List(filteredLandmarks) { landmark in
14. NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
15. LandmarkRow(landmark: landmark)
16. }
17. }
18. .navigationTitle("Landmarks")
19. }
20. }
21. }
23. struct LandmarkList_Previews: PreviewProvider {
24. static var previews: some View {
25. LandmarkList()
26. }
27. }

上記のリストの 4 行目を、以下のように書き換えます。

3. struct LandmarkList: View {
@State private var showFavoritesOnly = true