セクション 108




プレビューを動的に生成

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














ステップ 1

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




---




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




    LandmarkList.swift



1. import SwiftUI
struct LandmarkList: View {
3. var body: some View {
NavigationView {




ステップ 2

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




---




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




    LandmarkList.swift



16. struct LandmarkList_Previews: PreviewProvider {
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. }










ステップ 3

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





    LandmarkList.swift



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











ステップ 4

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












セクション 1	セクション 2	セクション 3	セクション 4
セクション 5	セクション 6	セクション 7	セクション 8
セクション 101	セクション 102	セクション 103	セクション 104
セクション 105	セクション 106	セクション 107	セクション 108

あなたの理解度をチェックしてください

質問 1

リストに加えて、コレクションからのビューの動的リストを表示する型はどれですか？

質問 2

Identifiable な要素のコレクションからビューの List を作成できます。Identifiable なプロトコルに準拠していない要素のコレクションを適応させるために、どのようなアプローチを使用しますか？

質問 3

List の行をタップ可能にして別のビューに移動できるようにするために、どの型を使用しますか？

質問 4

これらの選択肢のうち、ビューをプレビューするためのデバイスを設定する方法では ない ものはどれですか？

次

ユーザ入力の処理

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




さあ始めましょう