[SwiftUI]previewLayoutの活用

プレビュー時にpreviewLayoutを活用する

• Listで表示するコンポーネントなどを切り出して作成する場合などは、previewLayoutを使うことでプレビューが見やすくなる
• 例えば下記のような画面があったとして、そのままプレビューを表示すると画面全体が表示される

struct ContentView: View {
  let isActive: Bool

  var body: some View {
    VStack {
    Text("Hello, world!")
      .padding()
    }
    .foregroundColor(isActive ? .green : .white)
    .overlay(
      RoundedRectangle(cornerRadius: 10)
        .stroke(isActive ? .green : .gray, lineWidth: 2)
    )
    .background(
      RoundedRectangle(cornerRadius: 10)
        .fill(isActive ? .white : .gray)
    )
  }
}

• ContentView_Previewsに下記のように追記することで、プレビュー表示される画面のサイズを指定できる

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView(isActive: true)
      .previewLayout(.fixed(width: 400, height: 100))
  }
}

• またサンプルコードはisActiveという変数の値によってカラーを分岐させているが、プレビューはいくつも並べることができるので、下記のようにそれぞれのステータスを指定した呼び出しを並べることで、プレビューで各パターンを一覧表示させることができる

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView(isActive: true)
      .previewLayout(.fixed(width: 400, height: 100))

    ContentView(isActive: false)
      .previewLayout(.fixed(width: 400, height: 100))
  }
}