📚

SwiftUIのPreviewのちょっと便利な使い方

2021/03/18に公開

SwiftUIはPreviewから素早く表示が確認できるのが便利です。

以下のような工夫するとより便利になります。

ライトモードとダークモードを同時に確認する

preferredColorScheme()を指定するとカラースキーム(テーマ)を切り替えられます。
以下のように記述するとライトとダークの両方を同時に表示することができます。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView().preferredColorScheme(.light)
            ContentView().preferredColorScheme(.dark)
        }
    }
}

Viewのサイズに合わせて表示する

previewLayout()sizeThatFitsを指定するとViewのサイズに合わせて表示してくれます。

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView().preferredColorScheme(.light).previewLayout(.sizeThatFits)
            ContentView().preferredColorScheme(.dark).previewLayout(.sizeThatFits)
        }
    }
}

Discussion