SwiftUITutorial Building Lists and Navigation②
SwiftUITutorialで学んだことをまとめていきます。
Create the Row View
Section2で学べること
- 構造体の表示
- layout作成
Landmarkの表示
Jsonファイルから取得したデータが格納されているLandmark構造体を表示させる。
HStackはUI 部品を横方向に複数配置する時に使う。
今回の場合はlandmark.imageとTextを横並びに配置している。
.resizable()で画像のリサイズを行う。
.frame(width: 50, height: 50)で幅50,高さ50指定。
Spacer()で幅いっぱいにスペースを追加する。
struct LandmarkRow: View { var landmark: Landmark var body: some View { HStack { landmark.image .resizable() .frame(width: 50, height: 50) Text(landmark.name) Spacer() } } }
SwiftUIのPreview機能
これがないとPreviewが表示されない。
LandmarkRowにlandmarks配列の最初の一件を指定
struct LandmarkRow_Previews: PreviewProvider { static var previews: some View { LandmarkRow(landmark: landmarks[0]) } }
Customize the Row Preview
Section3で学べること
- PreviewLayoutの変更
PreviewLayout
Groupでまとめて、複数のPreviewを表示させる。
previewLayout(.fixed(width: 300, height: 70))でPreviewのサイズを指定できる。
struct LandmarkRow_Previews: PreviewProvider { static var previews: some View { Group { LandmarkRow(landmark: landmarks[0]) LandmarkRow(landmark: landmarks[1]) } .previewLayout(.fixed(width: 300, height: 70)) } }
LandmarkRow.swift
import SwiftUI 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 { Group { LandmarkRow(landmark: landmarks[0]) LandmarkRow(landmark: landmarks[1]) } .previewLayout(.fixed(width: 300, height: 70)) } }