忙しい人向けの Visually edit SwiftUI views - #WWDC20

Visually edit SwiftUI views - WWDC 2020 - Videos - Apple Developer

作成する View

こんなビューを作っていく。

出てくるショートカット

・ライブラリ表示（Cmd + Shift + L）
・要素の複製（Cmd + D）
・コンテキストメニュー表示（Cmd + クリック）
・インスペクタ表示（Cmd + Option + クリック）

Xcode Previews

ライブラリ（Cmd + Shift + L）から、コントロールやモディファイアを Preview にドラッグ＆ドロップして追加できる。

ラベルをダブルクリックすると Editor にフォーカスが移動して、すぐに修正できるようになる。

要素を選択して Cmd + D で複製できる。

画像を追加する際も、ライブラリからドラッグ＆ドロップできる。

こんな感じで好きな位置に。

要素を選択して、インスペクタからモディファイアを追加できる。コンテキストに基づいた候補が表示されるので便利。

独自の View も同じように追加できる。Add custom views and modifiers to the Xcode Library も参照のこと。

Cmd + クリックでメニューを表示でき、要素を HStack で囲んだり、繰り返しを適用できる。

インスペクタからフォントなどの値を調整することができる。解除したい場合は、右側に表示されてる青丸のチェックをクリックすればよい。

サイドバーからではなく、Control + Option + クリックで Preview 内でインスペクタを表示することもできる。

プレビューは上部バーの右端の＋ボタンから複製でき、任意の設定値（ダークモードとか）でのプレビューも用意できる。

まとめ

Preview はエディタと統合し、インスペクタ、ライブラリが活用できる。

免責

・本記事は公開情報のみに基づいて作成されています。
・要約（意訳）のみなので、詳細はセッション動画をご確認ください。