【SwiftUI】Xcode15におけるプレビューの基本

この記事は何？

Xcode15から、SwiftUIフレームワークを使ったアプリ開発のプレビューでSwiftマクロが利用されるようになった。
これによって、以前の方法で作成されるプレビューよりもコード量が大幅に削減された。
Swiftマクロによるプレビューの作成方法について、基本を解説する。

Swiftを基礎から学ぶには
自著、工学社より発売中の「まるごと分かるSwiftプログラミング」をお勧めします。変数、関数、フロー制御構文、データ構造はもちろん、構造体からクロージャ、エクステンション、プロトコル、クロージャまでを基礎からわかりやすく解説しています。
また、Swiftプログラミングを基礎から動画で学びたい方には、Udemyコース「今日からはじめるプログラミング」をお勧めします。

プレビューのイニシャライザ

#Preview(body: () -> View)

つまり、bodyパラメータには「ビューを返すコード」を指定する。

// パラメータを省略しない呼び出し方
#Preview(body: {
    ContetnView()
})

// 末尾クロージャ形式
#Preview {
    ContetnView()
}

複数のプレビューを作成する

キャンバス内で、2つのプレビューを選択できるようになる。

#Preview {
    LandmarkRow(landmark: landmarks[0])
}

#Preview {
    LandmarkRow(landmark: landmarks[1])
}

名前をつける

プレビューの選択肢に「任意の名前」が表示されるようになる。

#Preview("Turtle Rock") {
    LandmarkRow(landmark: landmarks[0])
}

#Preview("Salmon") {
    LandmarkRow(landmark: landmarks[1])
}

プレビューを並べて比較する

キャンバスに、複数のプレビューを並べる。

#Preview {
    Group {
        LandmarkRow(landmark: landmarks[0])
        LandmarkRow(landmark: landmarks[1])
    }
}

明示的にビューを返す

「ビューを返すコード」以外を記述した場合、returnステートメントを明示する必要がある。

#Preview {
    let landmarks = ModelData().landmarks

    return Group {
        LandmarkRow(landmark: landmarks[0])
        LandmarkRow(landmark: landmarks[1])
    }
}

プレビューに固定値を渡す

プレビューに、暫定的なバインドを渡す。

struct FavoriteButton: View {
    @Binding var isSet: Bool
    
    var body: some View {
        // some views
    }
}

#Preview {
    FavoriteButton(isSet: Binding<Bool>.constant(true))
}