XCode 12.4 日本語化計画：Swift Tutorials

セクション 2

カテゴリリストを作成




カテゴリビューには、閲覧しやすいように、すべてのカテゴリが縦の列に配置された個別の行に表示されます。これを行うには、垂直スタックと水平スタックを組み合わせ、リストにスクロールを追加します。







まず、landmarkData.json ファイルからカテゴリデータを読み取る事から始めます。






ステップ 1

Landmark.swift で、Category の列挙体と category プロパティを Landmark 構造体に追加します。




---




LandmarkData.json ファイルには、3 つの文字列値のいずれか 1 つを持つ各ランドマークの category 値がすでに含まれています。データファイル内の名前を照合することで、構造体の Codable 準拠に依存してデータをロードすることができます。
























ステップ 2

ModelData.swift で、カテゴリ名をキーとして、各キーに関連したランドマークの配列を使用して、計算された categories のディクショナリを追加します。



































ステップ 3

CategoryHome.swift で、modelData 環境オブジェクトを作成します。




---




今すぐカテゴリにアクセスする必要があります。また、後で他のランドマークデータにもアクセスする必要があります。
























ステップ 4

List を使用してランドマークのカテゴリを表示します。

---




Landmark.Category のケース名は、リスト内の各項目を識別します。これは列挙型であるため、他のカテゴリ間で一意でなければなりません。

    Landmark.swift

1. import Foundation
2. import SwiftUI
3. import CoreLocation
5. struct Landmark: Hashable, Codable, Identifiable {
6. var id: Int
7. var name: String
8. var park: String
9. var state: String
10. var description: String
11. var isFavorite: Bool
var category: Category
enum Category: String, CaseIterable, Codable {
case lakes = "Lakes"
case rivers = "Rivers"
case mountains = "Mountains"
}
14. private var imageName: String
15. var image: Image {
16. Image(imageName)
17. }
19. private var coordinates: Coordinates
20. var locationCoordinate: CLLocationCoordinate2D {
21. CLLocationCoordinate2D(
22. latitude: coordinates.latitude,
23. longitude: coordinates.longitude)
24. }
26. struct Coordinates: Hashable, Codable {
27. var latitude: Double
28. var longitude: Double
29. }
30. }

    ModelData.swift

1. import Foundation
2. import Combine
4. final class ModelData: ObservableObject {
5. @Published var landmarks: [Landmark] = load("landmarkData.json")
6. var hikes: [Hike] = load("hikeData.json")
var categories: [String: [Landmark]] {
Dictionary(
grouping: landmarks,
by: { $0.category.rawValue }
)
}
8. }
10. func load<T: Decodable>(_ filename: String) -> T {
11. let data: Data
13. guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
14. else {
15. fatalError("Couldn't find \(filename) in main bundle.")
16. }
18. do {
19. data = try Data(contentsOf: file)
20. } catch {
21. fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
22. }
24. do {
25. let decoder = JSONDecoder()
26. return try decoder.decode(T.self, from: data)
27. } catch {
28. fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
29. }
30. }

    CategoryHome.swift

1. import SwiftUI
3. struct CategoryHome: View {
@EnvironmentObject var modelData: ModelData
5. var body: some View {
6. NavigationView {
7. Text("Landmarks Content")
8. .navigationTitle("Featured")
9. }
10. }
11. }
13. struct CategoryHome_Previews: PreviewProvider {
14. static var previews: some View {
15. CategoryHome()
.environmentObject(ModelData())
16. }
17. }

上記のリストの 8 行目の後を以下のように修正します。

    CategoryHome.swift

6. var body: some View {
7. NavigationView {
List {
ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
Text(key)
}
}
.navigationTitle("Featured")
8. }
9. }

プレビュー