プログラミングBlog

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))
    }
}