XCode 12.4 日本語化計画：Swift Tutorials

セクション 3




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

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




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









ステップ 1

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




---




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














ステップ 2

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

































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





ステップ 3

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




---




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



















ステップ 4

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




---




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










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

    LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
4. var landmark: Landmark
6. var body: some View {
7. HStack {
8. landmark.image
9. .resizable()
10. .frame(width: 50, height: 50)
11. Text(landmark.name)
13. Spacer()
14. }
15. }
16. }
18. struct LandmarkRow_Previews: PreviewProvider {
19. static var previews: some View {
LandmarkRow(landmark: landmarks[1])
20. }
21. }

上記のリストの 21 行目に以下のように書き足します。

.previewLayout(.fixed(width: 300, height: 70))

さらに、20 行目から 25 行目を以下のように書き足します。

Group {
LandmarkRow(landmark: landmarks[0])
.previewLayout(.fixed(width: 300, height: 70))
LandmarkRow(landmark: landmarks[1])
.previewLayout(.fixed(width: 300, height: 70))
}

さらに以下のように書き換えます。

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