XCode 12.4 日本語化計画：Swift Tutorials

セクション 8

プレビューを動的に生成

次に、LandmarkList_Previews プレビュープロバイダーにコードを追加して、さまざまなデバイスサイズでリストビューのプレビューをレンダリングします。デフォルトでは、プレビューはアクティブなスキームのデバイスのサイズでレンダリングされます。プレビューデバイスを変更するには、previewDevice(_:) 修飾子メソッドを呼び出します。












ステップ 1

現在のリストプレビューを変更して、iPhone SE のサイズでレンダリングすることから始めます。




---




Xcode の scheme メニューに表示されるデバイスならどれでもその名前を指定できます。



























































ステップ 2

リストプレビュー内で、デバイス名の配列をデータとして使用して、LandmarkList を ForEach インスタンスに埋め込みます。




---




ForEach は、リストと同じ方法でコレクションを操作します。つまり、スタック、リスト、グループなど、子ビューを使用できる場所であればどこでもそれを使用できます。データの要素が単純な値型である場合 (ここで使用している文字列など)、識別子へのキーパスとして\.self を使用できます。









































ステップ 3

プレビューのラベルとしてデバイス名を追加するには、previewDisplayName(_:) 修飾子を使用します。























































ステップ 4

さまざまなデバイスを試して、キャンバスからすべてのビューのレンダリングを比較できます。

    LandmarkList.swift

1. import SwiftUI
struct LandmarkList: View {
3. var body: some View {
NavigationView {
List(landmarks) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
LandmarkRow(landmark: landmark)
4. }
5. }
.navigationTitle("Landmarks")
6. }
7. }
8. }
struct LandmarkList_Previews: PreviewProvider {
10. static var previews: some View {
LandmarkList()
.previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
11. }
12. }

上記のリストの 18 行目からを、以下のように修正します。

    LandmarkList.swift

17. static var previews: some View {
ForEach(["iPhone SE (2nd generation)", "iPhone XS Max"], id: \.self) { deviceName in
LandmarkList()
.previewDevice(PreviewDevice(rawValue: deviceName))
}
18. }
19. }

上記のリストを、21 行目を以下のように修正します。

20. .previewDevice(PreviewDevice(rawValue: deviceName))
.previewDisplayName(deviceName)
21. }
22. }
23. }

次

ユーザ入力の処理

ランドマークアプリでは、ユーザはお気に入りの場所にフラグを立て、リストをフィルタリングしてお気に入りだけを表示できます。この機能を作成するには、まずリストにスイッチを追加して、ユーザが彼らのお気に入りだけに集中できるようにします。次に、ユーザがタップしてランドマークにお気に入りのフラグを立てられる星型のボタンを追加します。




さあ始めましょう