SwiftUI/BuildingListsAndNavigation の履歴(No.2)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• SwiftUI/BuildingListsAndNavigation へ行く。
  • 1 (2021-07-29 (木) 14:02:43)
  • 2 (2021-07-29 (木) 16:21:19)

Tag: SwiftUI/BuildingListsAndNavigation

目次†

関連ページ†

参考情報†

• Building Lists and Navigation — SwiftUI Tutorials | Apple Developer Documentation
• CreatingAndCombiningViewsの最後のLandmarkプロジェクトをコピーして使用。
• Resourcesフォルダはダウンロードした奴を上書きしたほうが良いかも。

Create a Landmark Model†

• データを保持するためのモデルを作成する。
• landmarkData.jsonをプロジェクトのResourcesフォルダ以下にコピー。
• New > FileでLandmark.swiftを追加。
• 以下のように定義する。

  struct Landmark: Hashable, Codable {
      var id: Int
      var name: String
      var park: String
      var state: String
      var description: String
  }
  

• 画像の関連付け

  struct Landmark: Hashable, Codable {
      var id: Int
      var name: String
      var park: String
      var state: String
      var description: String
  
      private var imageName: String
      var image: Image {
          Image(imageName)
      }
  }
  

• coordinatesを追加。最終的に以下のように。

  struct Landmark: Hashable, Codable {
      var id: Int
      var name: String
      var park: String
      var state: String
      var description: String
  
      private var imageName: String
      var image: Image {
          Image(imageName)
      }
      
      private var coordinates: Coordinates
      
      var locationCoordinate: CLLocationCoordinate2D {
          CLLocationCoordinate2D(
              latitude: coordinates.latitude,
              longitude: coordinates.longitude)
      }
  
  
      struct Coordinates: Hashable, Codable {
          var latitude: Double
          var longitude: Double
      }
  }
  
  

• ModelData.swiftを追加。load関数を作成する。

  var landmarks: [Landmark] = load("landmarkData.json")
  
  func load<T: Decodable>(_ filename: String) -> T {
      let data: Data
  
      guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
      else {
          fatalError("Couldn't find \(filename) in main bundle.")
      }
  
      do {
          data = try Data(contentsOf: file)
      } catch {
          fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
      }
  
      do {
          let decoder = JSONDecoder()
          return try decoder.decode(T.self, from: data)
      } catch {
          fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
      }
  
  

• ViewsグループにContentView.swift、CircleImage.swift、MapView.swiftを追加。ResourcesグループにlandmarkData.jsonを追加。ModelグループにLandmark.swiftとModelData.swiftを追加。

Create the Row View†

• LandmarkRow.swiftを追加。以下のように作成。

  struct LandmarkRow: View {
      var landmark: Landmark
      
      var body: some View {
          HStack {
              landmark.image
                  .resizable()
                  .frame(width: 50, height: 50)
              Text(landmark.name)
  
              Spacer()
          }
  
      }
  }
  
  struct LandmarkRow_Previews: PreviewProvider {
      static var previews: some View {
          LandmarkRow(landmark: landmarks[0]);
      }
  }
  
  

Customize the Row Preview†

• プレビューの変更

  struct LandmarkRow_Previews: PreviewProvider {
      static var previews: some View {
          LandmarkRow(landmark: landmarks[1]).previewLayout(.fixed(width: 300, height: 70))
      }
  }
  
  

• 二つ表示

         Group {
              LandmarkRow(landmark: landmarks[0])
                  .previewLayout(.fixed(width: 300, height: 70))
              LandmarkRow(landmark: landmarks[1])
                  .previewLayout(.fixed(width: 300, height: 70))
          }
  
  

Create the List of Landmarks†

リストビューを実装する。

• SwiftUIファイルのLandmarkList.swiftを作成。

  struct LandmarkList: View {
      var body: some View {
          List {
              LandmarkRow(landmark: landmarks[0])
              LandmarkRow(landmark: landmarks[1])
          }
      }
  }
  

Make the List Dynamic†

Listにコレクションを表示。

• LandmarkListを変更。

  struct LandmarkList: View {
      var body: some View {
          List(landmarks, id: \.id) { landmark in
              LandmarkRow(landmark: landmark)
          }
      }
  
  

• もしくはLandmarkを変更してIdentifiableを実装。これでプレビュー画面にリストが表示される。

Set Up Navigation Between List and Detail†

Pass Data into Child Views†

Generate Previews Dynamically†