XCode 12.4 日本語化計画：Swift Tutorials

セクション 104

カテゴリビューの完成




行と注目の画像をカテゴリのホームページに追加します。










ステップ 1

CategoryHome の本体を更新して、行の型のインスタンスにカテゴリ情報を渡します。





    CategoryHome.swift



8. List {
9. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
CategoryRow(categoryName: key, items: modelData.categories[key]!)
10. }
11. }




プログラム全体 その 1




プレビュー その 1





次に、注目のランドマークをビューの最上部に追加します。これを行うには、ランドマークデータからより多くの情報が必要になります。





ステップ 2

Landmark.swift 内に、新しい isFeatured プロパティを追加します。




---




追加した他のランドマークプロパティと同様に、このブール値はデータにすでに存在します。新しいプロパティを宣言する必要があります。





    Landmark.swift



10. var description: String
11. var isFavorite: Bool
var isFeatured: Bool
13. var category: Category




プログラム全体 その 2




ステップ 3

ModelData.swift で、isFeatured が true に設定されているランドマークのみを含む新しい計算された features 配列を追加します。





    ModelData.swift



1. var hikes: [Hike] = load("hikeData.json")
var features: [Landmark] {
landmarks.filter { $0.isFeatured }
}
3. var categories: [String: [Landmark]] {
4. Dictionary(




プログラム全体 その 3




ステップ 4

CategoryHome.swift で、最初に注目のランドマークの画像をリストの最上部に追加します。




---




後のチュートリアルで、このビューをインタラクティブな回転映写機に変えます。今のところ、それは拡大縮小され、トリミングされたプレビュー画像で注目のランドマークの 1 つを表示します。





    CategoryHome.swift



7. NavigationView {
8. List {
modelData.features[0].image
.resizable()
.scaledToFill()
.frame(height: 200)
.clipped()
9. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
10. CategoryRow(categoryName: key, items: modelData.categories[key]!)




プレビュー その 2





プログラム全体 その 4




ステップ 5

両方の種類のランドマークプレビューでエッジのインセットをゼロに設定して、コンテンツがディスプレイのエッジまで拡張できるようにします。





    CategoryHome.swift



12. .frame(height: 200)
13. .clipped()
.listRowInsets(EdgeInsets())
15. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
16. CategoryRow(categoryName: key, items: modelData.categories[key]!)
17. }
.listRowInsets(EdgeInsets())
18. }
19. .navigationTitle("Featured")




プレビュー その 3







セクション 1	セクション 2	セクション 3
セクション 4	セクション 5
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105