[SwiftUI]previewLayoutの活用

7759 ワード
テキストリンク

プレビュー時に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))
  }
}

React NativeのNative Moduleでカメラ起動させてみた（iOS/Swift）
Vue インスタンスの methods にアロー関数を使ったら動作しない理由を this のスコープで説明します