セクション 103

行のプレビューのカスタマイズ

Xcode のキャンバスは、PreviewProvider プロトコルに準拠する現在のエディタ内のすべての型を自動的に認識して表示します。preview プロバイダは、size と device を構成するオプションとともに、1 つ以上のビューを返します。

preview プロバイダから返されるコンテンツをカスタマイズして、最も役立つプレビューを正確にレンダリングできます。

ステップ 1

LandmarkRow_Previews で、landmark パラメータを更新して landmarks 配列の 2 番目の要素にします。

プレビューはすぐに変更され、最初のサンプルランドマークではなく 2 番目のものが表示されます。

    LandmarkRow.swift

18. struct LandmarkRow_Previews: PreviewProvider {
19. static var previews: some View {
LandmarkRow(landmark: landmarks[1])
20. }
21. }

ステップ 2

previewLayout(_:) 修飾子を使用して、リストの行に近いサイズを設定します。

    LandmarkRow.swift

21. static var previews: some View {
22. LandmarkRow(landmark: landmarks[1])
.previewLayout(.fixed(width: 300, height: 70))
23. }
24. }

Group を使用して、プレビュープロバイダーから複数のプレビューを返すことができます。

ステップ 3

返された行を Group に包み込み、最初の行を再度追加します。

Group は、ビューコンテンツをグループ化するためのコンテナです。Xcode は、グループの子ビューをキャンバス内の個別のプレビューとしてレンダリングします。

    LandmarkRow.swift

18. struct LandmarkRow_Previews: PreviewProvider {
19. static var previews: some View {
Group {
LandmarkRow(landmark: landmarks[0])
.previewLayout(.fixed(width: 300, height: 70))
LandmarkRow(landmark: landmarks[1])
.previewLayout(.fixed(width: 300, height: 70))
}
20. }
21. }

ステップ 4

コードを簡略化するには、previewLayout(_:) 呼び出しをグループの子宣言の外側に移動します。

ビューの子は、プレビュー構成などのビューのコンテキスト設定を継承します。

    LandmarkRow.swift

22. LandmarkRow(landmark: landmarks[1])
23. }
.previewLayout(.fixed(width: 300, height: 70))
24. }
25. }

プレビュープロバイダー内で記述したコードは、Xcode がキャンバスに表示する内容のみを変更します。