SwiftUI 入門やるよ！チュートリアルしてみる！v6 複雑なインターフェイス構築

SwiftUI 入門やるよ！チュートリアルしてみる！v5 アニメーション、ビューと遷移

viewのアニメーションと遷移 Animating views and transitionssection 1 散歩データの追加 Add hiking data to the apphikeData....

grtlab.com

2024.11.27

v6 複雑なインターフェイス構築

Composing complex interfaces

section 1 カテゴリービュー Add a category view

featured , category 1 , category 2　を表示する

CategoryHome.swift を SwiftUI Viewで追加

struct CategoryHome: View {
    var body: some View {
        NavigationSplitView {
            Text("Hello, World!")
                .navigationTitle("Featured")

        } detail: {
            Text("Select a Landmark!")
        }
    }
}

Section 2 カテゴリーリスト Create a category list

ModelのLandmarkにカテゴリーを追加

    var category: Category
    enum Category: String, CaseIterable, Codable {
        case lakes = "Lakes"
        case rivers = "Rivers"
        case mountains = "Mountains"
    }

ModelDataにカテゴリー分けした辞書データを追加…

    var categories: [String: [Landmark]] {
        Dictionary (
            grouping: landmarks,
            by: { $0.category.rawValue }
        )
    }

Dictionary で grouping で landmarksから by でできるそうで

struct CategoryHome: View {
    @Environment(ModelData.self) var modelData
    
    var body: some View {
        NavigationSplitView {
            List {
                ForEach(modelData.categories.keys.sorted(), id: \.self) {
                    key in
                    Text(key)
                }
            }
            .navigationTitle("Featured")

        } detail: {
            Text("Select a Landmark!")
        }
    }
}

#Preview {
    CategoryHome()
        .environment(ModelData())
}

カテゴリーのkeyが表示されました。

Section 3 カテゴリー列を作成

Create a category row

vstackでタイトルとアイテム
hstackで横にアイテム並び,それをスクロールできるように

CategoryRow.swift SwiftUI View カテゴリーごとの列
VStackに
– カテゴリータイトル
– スクロールビュー > HStack (アイテム,CateogryItemを並べる)

CategoryItem.swift SwiftUI View
画像とタイトルのアイテム

で

となりました。

Section 4 カテゴリービューを完成　Complete the category view

CategoryHomeのtextのところを CategoryRowに変更でOK

Landmarkに isFeaturedを追加

ModelDataにfeaturesを追加

    var features: [Landmark]{
        landmarks.filter( $0.isFeatured )
    }

CategoryHomeのトップにフィーチャーリストを追加

Section 5 セクションからのナビゲーション

Add navigation between sections

CategoryRowで CategoryItemと選択されたらLandmarkDetailとなるnavigationLink

ForEach(items) {
                        landmark in
                        NavigationLink {
                            LandmarkDetail(landmark: landmark)
                        } label: {
                            CategoryItem(landmark: landmark)
                        }
                    }

CategoryItemの表示を調整
renderingMode(.original)
Text().foregroundStyle(.primary)
あまり変化は？

ContentViewにタブを追加でfeaturedとlistをタブ切り替え

出来たようです。

なるほどという感じで、出来上がっているので簡単ですが

次は

App design and layout Working with UI controls