見出し画像

Swiftで行こう!--SwiftUIで行こう!3

Appleのチュートリアル"Building Lists and Navigation"をやっていきます。これはまずある程度できているものから、今回はリスト表示させて、詳細画面へ遷移するためのコード、ファイルを作っていきます。

まずこんな感じなものを作るみたいです。

新規ファイル作ていきますが、プレビューがある前提なため少しわかりにくいです。とりあえずコードを書くのみですね。

LandmarkRow.swiftです。

struct LandmarkRow : View {
   var landmark:Landmark
   var body: some View {
       HStack{
           landmark.image(forSize:50)
           Text(landmark.name)
       }
       
   }
}
#if DEBUG
struct LandmarkRow_Previews : PreviewProvider {
   static var previews: some View {
       Group {
           LandmarkRow(landmark: landmarkData[0])
           LandmarkRow(landmark: landmarkData[1])
           }
           .previewLayout(.fixed(width: 300, height: 70))
   }
}
#endif

LandmarkList.swiftです。

struct LandmarkList : View {
   var body: some View {
       List{
           LandmarkRow(landmark: landmarkData[0])
           LandmarkRow(landmark: landmarkData[1])
       }
   }
}
#if DEBUG
struct LandmarkList_Previews : PreviewProvider {
   static var previews: some View {
       LandmarkList()
   }
}
#endif

そして、イメージを確かなものにするためにプレビューが使えないため、rootViewを変更してRUNすることで表示させます。

触るファイルは"SceneDelegate"です。

window.rootViewController = UIHostingController(rootView: LandmarkList())

としてやるとRUNすることでSimulatorで表示できます。変更前は

LandmarkList()がLandmarkDetail()となっていました。

2列出てますね。LandmarkRowで指定した

LandmarkRow(landmark: landmarkData[0])
LandmarkRow(landmark: landmarkData[1])

が表示されました!

この記事が気に入ったらサポートをしてみませんか?