SwiftUIのナビゲーション機能

SwiftUIのナビゲーション機能

優れたAppの秘訣は、明確で堅牢なナビゲーション構造にあります。SwiftUIチームより、すばらしいエクスペリエンスをあなたのAppにもたらす方法について解説しますので、是非ご覧ください。SwiftUIの新しいNavigationStackやNavigationSplitViewについて解説し、Appの特定領域にリンクする方法、ナビゲーションの状態をすばやく簡単に復元する方法を紹介します。

リソース
関連ビデオ

Tech Talks
- エンタープライズデベロッパ向けの最新情報
WWDC22
ダウンロード

♪メローなインストヒップホップ♪ ♪ 私はCurtです SwiftUIチームのエンジニアです SwiftUIにナビゲーション用の新しいAPIを導入します新しいAPIでAppを作成するのは楽しいです今日はその楽しさを共有したいと思いますこれらAPIで基本的なスタックである Apple TV・iPhone・Apple Watchから強力なマルチカラムAppまでスケールできます新しいAPIはプログラムによるナビゲーションとディープリンクを強力にサポート Appに最適な構造を構築することが可能ですこの講演ではSwiftUIのナビゲーションによるレシピApp作成の手順をいくつか紹介しますまたすでにSwiftUIを使用している場合は新しいAPI向上に役立つことを願っています材料から始めましょう新しいデータ駆動型ナビAPIに組み込まれるもの次にテイスティングメニューに移動ナビゲーションのプログラム制御のための簡単なレシピについてお話ししますデザートには新APIによる Appのナビゲーション状態を維持するためのヒントをいくつか紹介します以前にSwiftUIでナビゲーションを使用したことがある場合新しいAPIがどう異なるのか気になるでしょうそこで既存のAPIをいくつか確認してみます既存のAPIはスタックに表示されるビューを送信するリンクに基づいていますたとえばルートビューにナビゲーションリンクのリストがあるとしますこのリンクをタップするとそのビューをスタックにプッシュしますこれは基本的なナビゲーションに最適でこのパターンは引き続き使用できますルートビューに戻りましょう既存のナビAPIを使用してプログラムでリンクを表示するにはそこにバインディングを追加しますたとえばitem.showDetailを trueに設定することでこのリンクのビューを表示できますリンクごとに個別のバインディングが必要です新しいAPIを使用するとNavigationStackというコンテナ全体でバインディングを処理できてここでのパスはスタックにプッシュされたすべての値を表すコレクションです NavigationLinksはパスに値を追加しますパスを変更することでディープリンクしたり全アイテムを削除してルートビューにポップすることもできますこの講演では新しいナビAPIがデータ駆動型のプログラムでどう機能するかをご紹介しますパワフルで使いやすいと思います新しいナビゲーションAPIによるレシピの前にメニューの内容を共有すべきかもしれません最近料理が大好きでレシピを管理する Appの開発にも取り組んでいますこの情報を提示する方法についてはたくさんのアイデアがありますたとえば３列表示のアプローチです最初の列ではレシピのカテゴリを選択カテゴリを選択すると２番目の列にレシピが一覧表示されますレシピを選択すると詳細領域にそのレシピの材料が表示されます詳細には関連レシピの選択リンクもあります祖母はいつも“パイは生地が命”と言っていました今日それを調理してみることにします新しいナビゲーションAPIで材料を表示次にそれらを掘り下げて特定のナビゲーションレシピを組合せてみましょう新しいナビゲーションAPIでは新コンテナタイプが導入されたので Appの構造とNavigationLinkでその構造の中をナビゲートするための補佐をしてくれます最初の新しいコンテナはNavigationStack NavigationStackはプッシュポップインターフェイスで Apple Watchの「探す」や iPhoneの設定App macOS Venturaの新しいシステム設定Appで見られます２つめの新しいコンテナタイプは NavigationSplitViewです NavigationSplitViewはMacやiPadのメールやメモなどの複数カラムのAppに最適です NavigationSplitViewは自動的に iPhoneの単一列スタックや iPadのSlide Overや Apple WatchやApple TVでも適合します NavigationSplitViewには２セットの初期化子がありますここに示したセットは2列のエクスペリエンスを作成イニシャライザの他のセットでは３列のエクスペリエンスを作成します NavigationSplitViewには列幅をカスタマイズできる一連の構成オプションが用意されておりサイドバーの表示やプログラムで列を表示または非表示にしますここでは構成オプションについては詳しく触れません同僚のRajのトークをチェックしてください「iPadのSwiftUI：インターフェイスをオーガナイズする」 NavigationSplitViewをAppに最適化するとても優れた内容となっています以前はNavigationLinksに常に表示されるタイトルとビューが含まれていました今回もタイトルは含まれていますがビューの代わりに提示されるのが value つまり値となっていますたとえばこのリンクはアップルパイのレシピを表示しています後述しますが優秀なNavigationLinkですリンクの動作はNavigationStackまたはリストによって異なりますこれら新しいAPIがどう連携するかを確認するためクックブックとAppでの使用例としてレシピをいくつか見てみましょう最初のレシピはApple Watchの「探す」またはiPhoneの設定にあるような基本的なビューのスタックでカテゴリごとにセクションがありますセクション内でレシピをタップして詳細を表示しどのレシピでも関連レシピの１つをタップしてスタックにプッシュできます戻るボタンを使用して元のレシピに戻りカテゴリリストに戻れますこのレシピはNavigationStackと NavigationLinkに新しいnavigationDestination修飾子を組み合わせたものです方法を見てみましょう基本的なNavigationStackから始めます内部には全カテゴリを繰り返すリストと navigationTitleがありますリスト内には各カテゴリのセクション次に各セクション内にカテゴリ内の各レシピの NavigationLinkを追加しますここではリンクにRecipeDetail ビューを表示させますこれは既存の遷移先をビューとして指定した NavigationLinkを使用していますそれはナビゲーションを体験するのに十分な挙動ですコードによって遷移先を変えるには？これを行うにはこのナビゲーションリンクの２つの部分それが提示する値とその値に伴うビューを切り離します方法を見てみましょうまず遷移先ビューを新しい navigationDestination修飾子に移しますこの修飾子は渡すデータタイプを宣言しますがここではそれがレシピです修飾子はレシピの値を受け取ってスタックにプッシュするビューを作成して返します次に新しいNavigationLinkのいずれかに切り替えてレシピの値を渡しますどのように機能させるか NavigationStackの中身を見てみましょうすべてのナビスタックはスタックが表示しているすべてのデータを表すパスを追跡しますスタックがルートビューを表示している場合例示のとおりパスは空です次にスタックはスタック内かプッシュされたビューの内部で宣言されたすべてのナビゲーションの遷移先も追跡します通常これはセットですがこの例では遷移先は１つだけですプッシュされたビューも図に追加しますパスが空なのでプッシュされたビューのリストも空ですそれはミルクとクッキーのように組み合わせると魔法が起こります値を表示するリンクをタップするとその値がパスに追加されます次にナビゲーションスタックは遷移先をスタックにプッシュするビュー決定のパス値にマップアップルパイのレシピからパイ生地をタップするとリンクもそれをパスに追加します NavigationStackはその魔法で別のRecipeDetailビューをスタックにプッシュパスに追加するすべての値について NavigationStackは別のビューをプッシュします戻るボタンをタップすると NavigationStackはパスとプッシュされたビューから最後のアイテムを削除します NavigationStackにはもう１つのトリックがありますバインディングを使用してパスに接続できるのですコードに戻りましょう先ほどここまで来ましたパスをバインドするためにまずStateを追加しますこのスタックにプッシュされる値はレシピであるためパスとして一連のレシピを使用できますスタックにデータを表示する必要がある場合は新しい消去型の NavigationPathをチェックしてくださいパスの状態がわかったらNavigationStackに引数を追加しパスにバインディングを渡しますそれが整ったらスタックを働かせましょうたとえば特定のレシピにジャンプするメソッドを追加できますまたはスタックのどこからでもパスをリセットするだけでルートに戻れますこれが新しいSwiftUIのNavigationStackと新しいNavigation Linksと navigation Destinationsによるプッシュ可能なスタックを準備する方法です Macを含む全プラットフォームで機能しますが iPhoneやApple TVにApple Watchで特に有効です NavigationStackの動作を確認するにはこちらを「Apple Watch用の生産性Appを構築する」次のレシピはMacやiPadのMailにあるようなスタックのない複数列表示に関するものです iPadではサイドバーは最初は非表示表示させてカテゴリーの選択が可能です次に２番目の列でレシピを選択 3番目の列はレシピの詳細が表示されていますこのレシピはNavigationSplit Viewと新しい NavigationLinkにリンクを組み合わせたものですこのレシピはモダリティを回避するのに有用なためより大きなデバイスに最適ですドリルインしなくてもすべての情報を見られます方法を見てみましょう３列のNavigationSplit Viewから始めますコンテンツと詳細の仮ビューがあります次にサイドバーにリストを追加してすべてのカテゴリとnavigationTitleを繰り返しますリストの中ではカテゴリごとにNavigation Linkがあります次にどのカテゴリが選択されているかを追跡するためにいくつか状態を挿入します selectedCategoryを使用するためにサイドバーのリストを微調整します選択範囲にバインディングを渡していることに着目これによりリストとその内容で選択内容を操作できますリスト内に値を提示するリンクを配置する場合選択タイプが一致するカテゴリとのリンクは自動的にタップまたはクリックで選択範囲が更新されますサイドバーでカテゴリを選択すると SwiftUIはselected Categoryを更新します前述の「iPadのSwiftUI：インターフェイスをオーガナイズする」をチェックして選択とリストに関する情報をご確認ください次にコンテンツ列の仮ホルダーを選択したカテゴリに対してレシピのリストにもnavigationTitleを追加してレシピのリストと置き換えます選択したカテゴリと同じ手法でコンテンツリストで選択したレシピを随時追跡できます selectedRecipeに状態を使用しコンテンツリストにその状態を適用レシピごとに値を表示するリンクを表示します最後に詳細列を更新して selectedRecipeの詳細を表示しますこれが整ったら再びナビゲーションを完全にプログラムで制御できますたとえば目玉レシピに移動するには選択状態を更新する必要がありますこれが新しいNavigation SplitViewによる値を提示するNavigation Linksと SwiftUIで選択されたリストを組み合わせた複数列のナビゲーション体験を準備する方法ですこのようにリスト選択とNavigationSplitViewを組み合わせることに関する大きな利点として SwiftUIは分割ビューをiPhoneの単一スタックや iPadのスライドオーバーで自動的に適応させられるということが挙げられます選択を変更するとiPhoneで適切なプッシュとポップに自動的に変換されますもちろんこの複数列表示は Macでも適切に機能しますまたApple TVとApple Watchは複数の列を表示しませんがこれらのプラットフォームも単一スタックに自動変換されます SwiftUIのNavigationSplitViewは全プラットフォームで機能次にこれらすべての材料をどのように２列のナビゲーションによりiPadや MacのPhotosのように構築する方法を見ていきますカテゴリを選択すると詳細領域にそのカテゴリのすべてのレシピのグリッドが表示されますレシピをタップすると詳細領域のスタックにプッシュされます関連するレシピをタップするとそれもスタックにプッシュレシピのグリッドに戻れます
このレシピはナビゲーション分割ビューやスタックやリンクに遷移先リストなどを組み合わせたメインディッシュですすべての材料をどう組み合せるか見てみましょう２列のNavigationSplit Viewから始めます最初の列は前のレシピとまったく同じです selectedCategoryを追跡するための状態とその状態へのバインディングに加え NavigationLinkの他に必要な navigationTitleのリストがありますこのレシピの違いは詳細領域にあります新しいナビゲーションAPIは構成を最大活用 NavigationSplitViewの列内にリストを配置できるのと同様 NavigationStackを列の中に入れることも可能このナビゲーションスタックのルートビューは RecipeGridです RecipeGridが NavigationStack内にあることに着目ですスタック関連の修飾子を RecipeGrid内に配置できます RecipeGridにズームインして中身を見てみましょう RecipeGridはビューですのでパラメータというカテゴリここではカテゴリはオプションなのでif-letから始めます elseケースは空の選択を処理します ifの中にスクロールビューとレイジーグリッドを追加レイジーグリッドレイアウトは一連のビューここではForEachでレシピを繰り返し処理レシピごとに値を提示するNavigation Linkがありますリンクはレシピ値を示します末尾のクロージャにあるリンクのラベルはサムネイルとタイトルが付いたRecipeTileですこのグリッドを完成させるための作業は？ NavigationStackにレシピから詳細ビューにマップする方法の説明がまだでした最初のレシピで示したように新しい NavigationStackでは NavigationDestination修飾子を使用してパス上の値からスタックに表示されるビューにマップ navigationDestination修飾子を追加しましょうでもどこに付ける？リンクに直接添付したいのですが間違っている理由が２つあります ListやTableまたはここではLazyVGridのようなレイジーコンテナはビューをすぐにロードしませんここに修飾子を置くと遷移先がロードされない可能性があるため周囲のNavigationStackがそれを認識しない可能性があります次にここに修飾子を配置するとグリッド内の全アイテムに対して繰り返されますそこで修飾子をScrollViewにアタッチします ScrollViewの外部に修飾子をアタッチすることにより NavigationStackがこの navigationDestinationをスクロール位置に関係なく認識できるようにしますここに修飾子を配置することについての利点はターゲットとするリンクにとても近いことですナビゲーションの遷移先は意味のある方法でコードを整理する柔軟性を与えてくれます NavigationSplitViewに戻るともう１つの利点は完全なプログラムナビが有効になることナビゲーションパスを追加しますパスを保持して状態を NavigationStackにバインドするためにStateを追加完全なプログラマティックナビゲーションがあるのでこのナビゲーションでその日のレシピを表示するメソッドを作成できますこれがスタックを使用した複数列のナビゲーションを新しいNavigationSplitViewや NavigationStack NavigationLinksおよびSwiftUIで選択されたリストにより準備する方法です前のレシピと同様これも自動的に適応しすべてのプラットフォームで機能します Appでナビゲーションを構成するためにレシピを探索しましたがナビゲーションの饗宴はデザートなしでは完成しませんナビゲーション状態を維持する方法を見てみましょう Appでナビゲーション状態を維持するにはもう２つの材料が必要ですそれはCodableとSceneStorageですこのレシピには３つの基本的なステップがありますまずナビゲーション状態を NavigationModelタイプにカプセル化しますこれにより１つのユニットとして保存および復元できるため一貫性が保たれます次にナビゲーションモデルをCodableにします最後にSceneStorageでモデルを復元します途中ですべきことがあります潰れたスフレのようにAppがクラッシュしないよう簡単な手順がありますステップ１を見てみましょう直近レシピの最後のコードですナビゲーションの状態はselectedCategoryと pathプロパティに保存 selectedCategoryはサイドバーの選択を追跡パスは詳細領域のスタックにプッシュされたビューを追跡します新しいNavigationModelクラスを導入し ObservableObjectに準拠させます次にナビゲーション状態をモデルオブジェクトに移動しプロパティラッパーをStateから Publishedに変更します次に、NavigationModelのインスタンスを保持するためのStateObjectとモデルオブジェクトを使用するようパラメータを変更次にナビゲーションモデルをCodableに変更まずCodable適合をクラスに追加します多くの場合 SwiftはCodable適合性を自動的に生成できますがここでは独自の適合性を実装したいと思います主な理由はレシピがモデル値であるためです状態復元のためにモデル値全体を保存する必要はないこれには２つの理由がありますまずレシピデータベースにはすでにレシピのすべての詳細が含まれています保存したナビゲーション状態でその情報を繰り返すことはストレージの適切な使用法ではありませんまたレシピデータベースがローカルナビから独立して変更できる場合たとえば同期の追加に取り掛かれた場合ですがローカルナビゲーションの状態に古いデータを含めない方がいいカスタムコーダビリティについてはCodingKeysを追加キーの１つがselectedCategoryです他の「recipePathIds」という名称になっていることに着目あとはパスにレシピの識別子を保存するだけとなりますエンコード方法ではコーディングキーを使用してキー付きコンテナを作成し選択したカテゴリを追加します encodeIfPresentを使用しているので nil以外の場合にのみ値を書き込みます次にレシピパス識別子を追加しますエンコードする識別子を取得するためにパスをマッピングしていることに着目してくださいたとえばナビゲーション状態に選択したカテゴリとしてデザートが含まれているとします緑色のボックスに示されているようにパス上にアップルパイとパイ生地がありますこれは他と同様JSON エンコードされている可能性もコーダビリティを完成させるために必要な初期化子を追加します興味深いのはレシピIDをデコードしてから共有データモデルを使用することで IDをレシピに変換し直すことです見つからなかったレシピを破棄するために compactMapを使用していますたとえばレシピの削除など同期の機能が確認された後に別のデバイスで処理したいこととなる可能性がありますこれは復元されたナビ状態を確認するために独自のAppで使用する必要がある箇所でそれも理にかなっています最後にモデルをJSONデータとして読み書きするための計算プロパティを追加しますナビゲーションモデルができたのでそれ自体をエンコードおよびデコードする方法は分かっていますあとは保存して復元することだけですそのためSceneStorageを使用しますこれがメインビューを残したところです StateObjectによりNavigationModelを保持次にNavigationModelを保持するための SceneStorageについて説明します SceneStorageプロパティは関連する値を自動的に保存および復元しますここにあるデータのようにストレージのタイプがオプションの場合は新しいシーンの値はnilですシステムがシーンを復元すると SwiftUIはSceneStorageプロパティの値も復元しますこれを利用してNavigation Modelを維持そのためにビューにタスク修飾子を追加タスク修飾子はそのクロージャを非同期で実行ビューが表示されたときに開始しビューが消えたときにキャンセルされますビューが表示されるたびに Appの前回の実行からの既存のデータがあるかどうかを確認しますある場合はそのデータでナビゲーションモデルを更新次にナビゲーションモデル変更のたびに繰り返される非同期のforループを開始しますこのループの本体は変更のたびに実行されるためこれを利用してナビゲーション状態を保存してシーンストレージデータに戻りますたったそれだけ！ Appを離れてウェブ上で懐かしの料理番組をチェックしたあとでもどこにいたかを覚えています Appに戻ると先ほど中断したところに戻るわけです便利なキッチンのヒントが出ているセクションなしに料理本は完成しませんコリアンダーの代わりとなるものはありませんがナビゲーションのヒントをいくつかご紹介しますできるだけ早く新しいNavigationStackと NavigationSplitViewに切り替えてくださいスタックスタイルでNavigationView採用の際は NavigationStackに切り替えます NavigationStackはApple TVやApple Watch またはiPadとiPhoneのシートではスタックスタイルが常にデフォルトになっています複数列のNavigationViewを使用している場合は NavigationSplitViewに切り替えますまたバインディングを使用するリンクを使用したプログラムナビゲーションを採用している場合はすぐに移行してください新しい価値を提示するNavigationLinkとナビゲーションパスとリストの選択も同時に旧式のプログラマティックリンクは非推奨で iOS 16以降のリリースでは廃止の予定です新しいAPIへの移行の詳細と例については以下の記事をご覧ください「Migrating to new navigation types」開発者向けドキュメントに記載されています次にListと新しいNavigation SplitViewおよび NavigationStackが混在するよう作成されていることに着目作成してゲストが気に入るナビゲーション体験を作成してくださいナビゲーションスタックを使用する場合遷移先はスタックまたはサブビュー内のどこでもかまいませんメンテナンスを容易にするために対応するリンクの近くに遷移先を配置すると良いでしょうただしレイジーコンテナの中には入れないように最後にNavigationSplit Viewを使用してナビゲーション構築を開始することが理にかなっていると言えます iPhone用に開発している場合でも NavigationSplitViewはデバイス幅に自動的に適応します横向きのiPhone Pro Maxをサポートする AppをiPadやMacに持ち込む準備ができたら NavigationSplitViewはそのすべての追加スペースを活用できます新しいSwiftUIナビ APIを共有できたこの機会に感謝します！先ほどの話の他にこちらもどうぞ「SwiftUI Appに複数のウィンドウを追加する」 Appで新しいウィンドウやシーンを開くための情報が出ていますクックブックAppでのナビのためのレシピお楽しみいただけましたかご自分のAppで素晴らしいお料理をお試しください召し上がれ！

import SwiftUI

// Pushable stack
struct PushableStack: View {
    @State private var path: [Recipe] = []
    @StateObject private var dataModel = DataModel()

    var body: some View {
        NavigationStack(path: $path) {
            List(Category.allCases) { category in
                Section(category.localizedName) {
                    ForEach(dataModel.recipes(in: category)) { recipe in
                        NavigationLink(recipe.name, value: recipe)
                    }
                }
            }
            .navigationTitle("Categories")
            .navigationDestination(for: Recipe.self) { recipe in
                RecipeDetail(recipe: recipe)
            }
        }
        .environmentObject(dataModel)
    }
}

// Helpers for code example
struct RecipeDetail: View {
    @EnvironmentObject private var dataModel: DataModel
    var recipe: Recipe

    var body: some View {
        Text("Recipe details go here")
            .navigationTitle(recipe.name)
        ForEach(recipe.related.compactMap { dataModel[$0] }) { related in
            NavigationLink(related.name, value: related)
        }
    }
}

class DataModel: ObservableObject {
    @Published var recipes: [Recipe] = builtInRecipes

    func recipes(in category: Category?) -> [Recipe] {
        recipes
            .filter { $0.category == category }
            .sorted { $0.name < $1.name }
    }

    subscript(recipeId: Recipe.ID) -> Recipe? {
        // A real app would want to maintain an index from identifiers to
        // recipes.
        recipes.first { recipe in
            recipe.id == recipeId
        }
    }
}

enum Category: Int, Hashable, CaseIterable, Identifiable, Codable {
    case dessert
    case pancake
    case salad
    case sandwich

    var id: Int { rawValue }

    var localizedName: LocalizedStringKey {
        switch self {
        case .dessert:
            return "Dessert"
        case .pancake:
            return "Pancake"
        case .salad:
            return "Salad"
        case .sandwich:
            return "Sandwich"
        }
    }
}

struct Recipe: Hashable, Identifiable {
    let id = UUID()
    var name: String
    var category: Category
    var ingredients: [Ingredient]
    var related: [Recipe.ID] = []
    var imageName: String? = nil
}

struct Ingredient: Hashable, Identifiable {
    let id = UUID()
    var description: String

    static func fromLines(_ lines: String) -> [Ingredient] {
        lines.split(separator: "\n", omittingEmptySubsequences: true)
            .map { Ingredient(description: String($0)) }
    }
}

let builtInRecipes: [Recipe] = {
    var recipes = [
        "Apple Pie": Recipe(
            name: "Apple Pie", category: .dessert,
            ingredients: Ingredient.fromLines(applePie)),
        "Baklava": Recipe(
            name: "Baklava", category: .dessert,
            ingredients: []),
        "Bolo de Rolo": Recipe(
            name: "Bolo de rolo", category: .dessert,
            ingredients: []),
        "Chocolate Crackles": Recipe(
            name: "Chocolate crackles", category: .dessert,
            ingredients: []),
        "Crème Brûlée": Recipe(
            name: "Crème brûlée", category: .dessert,
            ingredients: []),
        "Fruit Pie Filling": Recipe(
            name: "Fruit Pie Filling", category: .dessert,
            ingredients: []),
        "Kanom Thong Ek": Recipe(
            name: "Kanom Thong Ek", category: .dessert,
            ingredients: []),
        "Mochi": Recipe(
            name: "Mochi", category: .dessert,
            ingredients: []),
        "Marzipan": Recipe(
            name: "Marzipan", category: .dessert,
            ingredients: []),
        "Pie Crust": Recipe(
            name: "Pie Crust", category: .dessert,
            ingredients: Ingredient.fromLines(pieCrust)),
        "Shortbread Biscuits": Recipe(
            name: "Shortbread Biscuits", category: .dessert,
            ingredients: []),
        "Tiramisu": Recipe(
            name: "Tiramisu", category: .dessert,
            ingredients: []),
        "Crêpe": Recipe(
            name: "Crêpe", category: .pancake, ingredients: []),
        "Jianbing": Recipe(
            name: "Jianbing", category: .pancake, ingredients: []),
        "American": Recipe(
            name: "American", category: .pancake, ingredients: []),
        "Dosa": Recipe(
            name: "Dosa", category: .pancake, ingredients: []),
        "Injera": Recipe(
            name: "Injera", category: .pancake, ingredients: []),
        "Acar": Recipe(
            name: "Acar", category: .salad, ingredients: []),
        "Ambrosia": Recipe(
            name: "Ambrosia", category: .salad, ingredients: []),
        "Bok l'hong": Recipe(
            name: "Bok l'hong", category: .salad, ingredients: []),
        "Caprese": Recipe(
            name: "Caprese", category: .salad, ingredients: []),
        "Ceviche": Recipe(
            name: "Ceviche", category: .salad, ingredients: []),
        "Çoban salatası": Recipe(
            name: "Çoban salatası", category: .salad, ingredients: []),
        "Fiambre": Recipe(
            name: "Fiambre", category: .salad, ingredients: []),
        "Kachumbari": Recipe(
            name: "Kachumbari", category: .salad, ingredients: []),
        "Niçoise": Recipe(
            name: "Niçoise", category: .salad, ingredients: []),
    ]

    recipes["Apple Pie"]!.related = [
        recipes["Pie Crust"]!.id,
        recipes["Fruit Pie Filling"]!.id,
    ]

    recipes["Pie Crust"]!.related = [recipes["Fruit Pie Filling"]!.id]
    recipes["Fruit Pie Filling"]!.related = [recipes["Pie Crust"]!.id]

    return Array(recipes.values)
}()

let applePie = """
    ¾ cup white sugar
    2 tablespoons all-purpose flour
    ½ teaspoon ground cinnamon
    ¼ teaspoon ground nutmeg
    ½ teaspoon lemon zest
    7 cups thinly sliced apples
    2 teaspoons lemon juice
    1 tablespoon butter
    1 recipe pastry for a 9 inch double crust pie
    4 tablespoons milk
    """

let pieCrust = """
    2 ½ cups all purpose flour
    1 Tbsp. powdered sugar
    1 tsp. sea salt
    ½ cup shortening
    ½ cup butter (Cold, Cut Into Small Pieces)
    ⅓ cup cold water (Plus More As Needed)
    """

struct PushableStack_Previews: PreviewProvider {
    static var previews: some View {
        PushableStack()
    }
}

10:40 - Multiple Columns

import SwiftUI

// Multiple columns
struct MultipleColumns: View {
    @State private var selectedCategory: Category?
    @State private var selectedRecipe: Recipe?
    @StateObject private var dataModel = DataModel()

    var body: some View {
        NavigationSplitView {
            List(Category.allCases, selection: $selectedCategory) { category in
                NavigationLink(category.localizedName, value: category)
            }
            .navigationTitle("Categories")
        } content: {
            List(
                dataModel.recipes(in: selectedCategory),
                selection: $selectedRecipe)
            { recipe in
                NavigationLink(recipe.name, value: recipe)
            }
            .navigationTitle(selectedCategory?.localizedName ?? "Recipes")
        } detail: {
            RecipeDetail(recipe: selectedRecipe)
        }
    }
}

// Helpers for code example
struct RecipeDetail: View {
    var recipe: Recipe?

    var body: some View {
        Text("Recipe details go here")
            .navigationTitle(recipe?.name ?? "")
    }
}

class DataModel: ObservableObject {
    @Published var recipes: [Recipe] = builtInRecipes

    func recipes(in category: Category?) -> [Recipe] {
        recipes
            .filter { $0.category == category }
            .sorted { $0.name < $1.name }
    }
}

enum Category: Int, Hashable, CaseIterable, Identifiable, Codable {
    case dessert
    case pancake
    case salad
    case sandwich

    var id: Int { rawValue }

    var localizedName: LocalizedStringKey {
        switch self {
        case .dessert:
            return "Dessert"
        case .pancake:
            return "Pancake"
        case .salad:
            return "Salad"
        case .sandwich:
            return "Sandwich"
        }
    }
}

struct Recipe: Hashable, Identifiable {
    let id = UUID()
    var name: String
    var category: Category
    var ingredients: [Ingredient]
    var related: [Recipe.ID] = []
    var imageName: String? = nil
}

struct Ingredient: Hashable, Identifiable {
    let id = UUID()
    var description: String

    static func fromLines(_ lines: String) -> [Ingredient] {
        lines.split(separator: "\n", omittingEmptySubsequences: true)
            .map { Ingredient(description: String($0)) }
    }
}

let builtInRecipes: [Recipe] = {
    var recipes = [
        "Apple Pie": Recipe(
            name: "Apple Pie", category: .dessert,
            ingredients: Ingredient.fromLines(applePie)),
        "Baklava": Recipe(
            name: "Baklava", category: .dessert,
            ingredients: []),
        "Bolo de Rolo": Recipe(
            name: "Bolo de rolo", category: .dessert,
            ingredients: []),
        "Chocolate Crackles": Recipe(
            name: "Chocolate crackles", category: .dessert,
            ingredients: []),
        "Crème Brûlée": Recipe(
            name: "Crème brûlée", category: .dessert,
            ingredients: []),
        "Fruit Pie Filling": Recipe(
            name: "Fruit Pie Filling", category: .dessert,
            ingredients: []),
        "Kanom Thong Ek": Recipe(
            name: "Kanom Thong Ek", category: .dessert,
            ingredients: []),
        "Mochi": Recipe(
            name: "Mochi", category: .dessert,
            ingredients: []),
        "Marzipan": Recipe(
            name: "Marzipan", category: .dessert,
            ingredients: []),
        "Pie Crust": Recipe(
            name: "Pie Crust", category: .dessert,
            ingredients: Ingredient.fromLines(pieCrust)),
        "Shortbread Biscuits": Recipe(
            name: "Shortbread Biscuits", category: .dessert,
            ingredients: []),
        "Tiramisu": Recipe(
            name: "Tiramisu", category: .dessert,
            ingredients: []),
        "Crêpe": Recipe(
            name: "Crêpe", category: .pancake, ingredients: []),
        "Jianbing": Recipe(
            name: "Jianbing", category: .pancake, ingredients: []),
        "American": Recipe(
            name: "American", category: .pancake, ingredients: []),
        "Dosa": Recipe(
            name: "Dosa", category: .pancake, ingredients: []),
        "Injera": Recipe(
            name: "Injera", category: .pancake, ingredients: []),
        "Acar": Recipe(
            name: "Acar", category: .salad, ingredients: []),
        "Ambrosia": Recipe(
            name: "Ambrosia", category: .salad, ingredients: []),
        "Bok l'hong": Recipe(
            name: "Bok l'hong", category: .salad, ingredients: []),
        "Caprese": Recipe(
            name: "Caprese", category: .salad, ingredients: []),
        "Ceviche": Recipe(
            name: "Ceviche", category: .salad, ingredients: []),
        "Çoban salatası": Recipe(
            name: "Çoban salatası", category: .salad, ingredients: []),
        "Fiambre": Recipe(
            name: "Fiambre", category: .salad, ingredients: []),
        "Kachumbari": Recipe(
            name: "Kachumbari", category: .salad, ingredients: []),
        "Niçoise": Recipe(
            name: "Niçoise", category: .salad, ingredients: []),
    ]

    recipes["Apple Pie"]!.related = [
        recipes["Pie Crust"]!.id,
        recipes["Fruit Pie Filling"]!.id,
    ]

    recipes["Pie Crust"]!.related = [recipes["Fruit Pie Filling"]!.id]
    recipes["Fruit Pie Filling"]!.related = [recipes["Pie Crust"]!.id]

    return Array(recipes.values)
}()

let applePie = """
    ¾ cup white sugar
    2 tablespoons all-purpose flour
    ½ teaspoon ground cinnamon
    ¼ teaspoon ground nutmeg
    ½ teaspoon lemon zest
    7 cups thinly sliced apples
    2 teaspoons lemon juice
    1 tablespoon butter
    1 recipe pastry for a 9 inch double crust pie
    4 tablespoons milk
    """

let pieCrust = """
    2 ½ cups all purpose flour
    1 Tbsp. powdered sugar
    1 tsp. sea salt
    ½ cup shortening
    ½ cup butter (Cold, Cut Into Small Pieces)
    ⅓ cup cold water (Plus More As Needed)
    """

struct MultipleColumns_Previews: PreviewProvider {
    static var previews: some View {
        MultipleColumns()
    }
}

14:10 - Multiple Columns with a Stack

import SwiftUI

// Multiple columns with a stack
struct MultipleColumnsWithStack: View {
    @State private var selectedCategory: Category?
    @State private var path: [Recipe] = []
    @StateObject private var dataModel = DataModel()

    var body: some View {
        NavigationSplitView {
            List(Category.allCases, selection: $selectedCategory) { category in
                NavigationLink(category.localizedName, value: category)
            }
            .navigationTitle("Categories")
        } detail: {
            NavigationStack(path: $path) {
                RecipeGrid(category: selectedCategory)
            }
        }
        .environmentObject(dataModel)
    }
}

struct RecipeGrid: View {
    @EnvironmentObject private var dataModel: DataModel
    var category: Category?

    var body: some View {
        if let category = category {
            ScrollView {
                LazyVGrid(columns: columns) {
                    ForEach(dataModel.recipes(in: category)) { recipe in
                        NavigationLink(value: recipe) {
                            RecipeTile(recipe: recipe)
                        }
                    }
                }
            }
            .navigationTitle(category.localizedName)
            .navigationDestination(for: Recipe.self) { recipe in
                RecipeDetail(recipe: recipe)
            }
        } else {
            Text("Select a category")
        }
    }

    var columns: [GridItem] { [GridItem(.adaptive(minimum: 240))] }
}

struct RecipeDetail: View {
    @EnvironmentObject private var dataModel: DataModel
    var recipe: Recipe

    var body: some View {
        Text("Recipe details go here")
            .navigationTitle(recipe.name)
        ForEach(recipe.related.compactMap { dataModel[$0] }) { related in
            NavigationLink(related.name, value: related)
        }
    }
}

struct RecipeTile: View {
    var recipe: Recipe

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.secondary.gradient)
                .frame(width: 240, height: 240)
            Text(recipe.name)
                .lineLimit(2, reservesSpace: true)
                .font(.headline)
        }
        .tint(.primary)
    }
}

class DataModel: ObservableObject {
    @Published var recipes: [Recipe] = builtInRecipes

    func recipes(in category: Category?) -> [Recipe] {
        recipes
            .filter { $0.category == category }
            .sorted { $0.name < $1.name }
    }

    subscript(recipeId: Recipe.ID) -> Recipe? {
        // A real app would want to maintain an index from identifiers to
        // recipes.
        recipes.first { recipe in
            recipe.id == recipeId
        }
    }
}

enum Category: Int, Hashable, CaseIterable, Identifiable, Codable {
    case dessert
    case pancake
    case salad
    case sandwich

    var id: Int { rawValue }

    var localizedName: LocalizedStringKey {
        switch self {
        case .dessert:
            return "Dessert"
        case .pancake:
            return "Pancake"
        case .salad:
            return "Salad"
        case .sandwich:
            return "Sandwich"
        }
    }
}

struct Recipe: Hashable, Identifiable {
    let id = UUID()
    var name: String
    var category: Category
    var ingredients: [Ingredient]
    var related: [Recipe.ID] = []
    var imageName: String? = nil
}

struct Ingredient: Hashable, Identifiable {
    let id = UUID()
    var description: String

    static func fromLines(_ lines: String) -> [Ingredient] {
        lines.split(separator: "\n", omittingEmptySubsequences: true)
            .map { Ingredient(description: String($0)) }
    }
}

let builtInRecipes: [Recipe] = {
    var recipes = [
        "Apple Pie": Recipe(
            name: "Apple Pie", category: .dessert,
            ingredients: Ingredient.fromLines(applePie)),
        "Baklava": Recipe(
            name: "Baklava", category: .dessert,
            ingredients: []),
        "Bolo de Rolo": Recipe(
            name: "Bolo de rolo", category: .dessert,
            ingredients: []),
        "Chocolate Crackles": Recipe(
            name: "Chocolate crackles", category: .dessert,
            ingredients: []),
        "Crème Brûlée": Recipe(
            name: "Crème brûlée", category: .dessert,
            ingredients: []),
        "Fruit Pie Filling": Recipe(
            name: "Fruit Pie Filling", category: .dessert,
            ingredients: []),
        "Kanom Thong Ek": Recipe(
            name: "Kanom Thong Ek", category: .dessert,
            ingredients: []),
        "Mochi": Recipe(
            name: "Mochi", category: .dessert,
            ingredients: []),
        "Marzipan": Recipe(
            name: "Marzipan", category: .dessert,
            ingredients: []),
        "Pie Crust": Recipe(
            name: "Pie Crust", category: .dessert,
            ingredients: Ingredient.fromLines(pieCrust)),
        "Shortbread Biscuits": Recipe(
            name: "Shortbread Biscuits", category: .dessert,
            ingredients: []),
        "Tiramisu": Recipe(
            name: "Tiramisu", category: .dessert,
            ingredients: []),
        "Crêpe": Recipe(
            name: "Crêpe", category: .pancake, ingredients: []),
        "Jianbing": Recipe(
            name: "Jianbing", category: .pancake, ingredients: []),
        "American": Recipe(
            name: "American", category: .pancake, ingredients: []),
        "Dosa": Recipe(
            name: "Dosa", category: .pancake, ingredients: []),
        "Injera": Recipe(
            name: "Injera", category: .pancake, ingredients: []),
        "Acar": Recipe(
            name: "Acar", category: .salad, ingredients: []),
        "Ambrosia": Recipe(
            name: "Ambrosia", category: .salad, ingredients: []),
        "Bok l'hong": Recipe(
            name: "Bok l'hong", category: .salad, ingredients: []),
        "Caprese": Recipe(
            name: "Caprese", category: .salad, ingredients: []),
        "Ceviche": Recipe(
            name: "Ceviche", category: .salad, ingredients: []),
        "Çoban salatası": Recipe(
            name: "Çoban salatası", category: .salad, ingredients: []),
        "Fiambre": Recipe(
            name: "Fiambre", category: .salad, ingredients: []),
        "Kachumbari": Recipe(
            name: "Kachumbari", category: .salad, ingredients: []),
        "Niçoise": Recipe(
            name: "Niçoise", category: .salad, ingredients: []),
    ]

    recipes["Apple Pie"]!.related = [
        recipes["Pie Crust"]!.id,
        recipes["Fruit Pie Filling"]!.id,
    ]

    recipes["Pie Crust"]!.related = [recipes["Fruit Pie Filling"]!.id]
    recipes["Fruit Pie Filling"]!.related = [recipes["Pie Crust"]!.id]

    return Array(recipes.values)
}()

let applePie = """
    ¾ cup white sugar
    2 tablespoons all-purpose flour
    ½ teaspoon ground cinnamon
    ¼ teaspoon ground nutmeg
    ½ teaspoon lemon zest
    7 cups thinly sliced apples
    2 teaspoons lemon juice
    1 tablespoon butter
    1 recipe pastry for a 9 inch double crust pie
    4 tablespoons milk
    """

let pieCrust = """
    2 ½ cups all purpose flour
    1 Tbsp. powdered sugar
    1 tsp. sea salt
    ½ cup shortening
    ½ cup butter (Cold, Cut Into Small Pieces)
    ⅓ cup cold water (Plus More As Needed)
    """

struct MultipleColumnsWithStack_Previews: PreviewProvider {
    static var previews: some View {
        MultipleColumnsWithStack()
    }
}

18:12 - Use Scene Storage

import SwiftUI
import Combine
import Foundation

// Use SceneStorage to save and restore
struct UseSceneStorage: View {
    @StateObject private var navModel = NavigationModel()
    @SceneStorage("navigation") private var data: Data?
    @StateObject private var dataModel = DataModel()

    var body: some View {
        NavigationSplitView {
            List(
                Category.allCases, selection: $navModel.selectedCategory
            ) { category in
                NavigationLink(category.localizedName, value: category)
            }
            .navigationTitle("Categories")
        } detail: {
            NavigationStack(path: $navModel.recipePath) {
                RecipeGrid(category: navModel.selectedCategory)
            }
        }
        .task {
            if let data = data {
                navModel.jsonData = data
            }
            for await _ in navModel.objectWillChangeSequence {
                data = navModel.jsonData
            }
        }
        .environmentObject(dataModel)
    }
}

// Make the navigation model Codable
class NavigationModel: ObservableObject, Codable {
    @Published var selectedCategory: Category?
    @Published var recipePath: [Recipe] = []

    enum CodingKeys: String, CodingKey {
        case selectedCategory
        case recipePathIds
    }

    func encode(to encoder: Encoder) throws {
        var container = encoder.container(keyedBy: CodingKeys.self)
        try container.encodeIfPresent(selectedCategory, forKey: .selectedCategory)
        try container.encode(recipePath.map(\.id), forKey: .recipePathIds)
    }

    init() {}

    required init(from decoder: Decoder) throws {
        let container = try decoder.container(keyedBy: CodingKeys.self)
        self.selectedCategory = try container.decodeIfPresent(
            Category.self, forKey: .selectedCategory)

        let recipePathIds = try container.decode([Recipe.ID].self, forKey: .recipePathIds)
        self.recipePath = recipePathIds.compactMap { DataModel.shared[$0] }
    }

    var jsonData: Data? {
        get {
            try? JSONEncoder().encode(self)
        }
        set {
            guard let data = newValue,
                  let model = try? JSONDecoder().decode(NavigationModel.self, from: data)
            else { return }
            self.selectedCategory = model.selectedCategory
            self.recipePath = model.recipePath

        }
    }

    var objectWillChangeSequence:
        AsyncPublisher<Publishers.Buffer<ObservableObjectPublisher>>
    {
        objectWillChange
            .buffer(size: 1, prefetch: .byRequest, whenFull: .dropOldest)
            .values
    }
}

struct RecipeGrid: View {
    var category: Category?
    @EnvironmentObject private var dataModel: DataModel

    var body: some View {
        if let category = category {
            ScrollView {
                LazyVGrid(columns: columns) {
                    ForEach(dataModel.recipes(in: category)) { recipe in
                        NavigationLink(value: recipe) {
                            RecipeTile(recipe: recipe)
                        }
                    }
                }
            }
            .navigationTitle(category.localizedName)
            .navigationDestination(for: Recipe.self) { recipe in
                RecipeDetail(recipe: recipe)
            }
        } else {
            Text("Select a category")
        }
    }

    var columns: [GridItem] { [GridItem(.adaptive(minimum: 240))] }
}

struct RecipeDetail: View {
    @EnvironmentObject private var dataModel: DataModel
    var recipe: Recipe

    var body: some View {
        Text("Recipe details go here")
            .navigationTitle(recipe.name)
        ForEach(recipe.related.compactMap { dataModel[$0] }) { related in
            NavigationLink(related.name, value: related)
        }
    }
}

struct RecipeTile: View {
    var recipe: Recipe

    var body: some View {
        VStack {
            Rectangle()
                .fill(Color.secondary.gradient)
                .frame(width: 240, height: 240)
            Text(recipe.name)
                .lineLimit(2, reservesSpace: true)
                .font(.headline)
        }
        .tint(.primary)
    }
}

class DataModel: ObservableObject {
    @Published var recipes: [Recipe] = builtInRecipes

    static var shared: DataModel {
        // Just instantiate each time for the example. A real app would need to
        // persist the data model as well.
        DataModel()
    }

    func recipes(in category: Category?) -> [Recipe] {
        recipes
            .filter { $0.category == category }
            .sorted { $0.name < $1.name }
    }

    subscript(recipeId: Recipe.ID) -> Recipe? {
        // A real app would want to maintain an index from identifiers to
        // recipes.
        recipes.first { recipe in
            recipe.id == recipeId
        }
    }
}

enum Category: Int, Hashable, CaseIterable, Identifiable, Codable {
    case dessert
    case pancake
    case salad
    case sandwich

    var id: Int { rawValue }

    var localizedName: LocalizedStringKey {
        switch self {
        case .dessert:
            return "Dessert"
        case .pancake:
            return "Pancake"
        case .salad:
            return "Salad"
        case .sandwich:
            return "Sandwich"
        }
    }
}

struct Recipe: Hashable, Identifiable {
    let id: UUID
    var name: String
    var category: Category
    var ingredients: [Ingredient]
    var related: [Recipe.ID] = []
    var imageName: String? = nil
}

struct Ingredient: Hashable, Identifiable {
    let id = UUID()
    var description: String

    static func fromLines(_ lines: String) -> [Ingredient] {
        lines.split(separator: "\n", omittingEmptySubsequences: true)
            .map { Ingredient(description: String($0)) }
    }
}

let builtInRecipes: [Recipe] = {
    var recipes = [
        "Apple Pie": Recipe(
            id: UUID(uuidString: "E35A5C9C-F1EA-4B3D-9980-E2240B363AC8")!,
            name: "Apple Pie", category: .dessert,
            ingredients: Ingredient.fromLines(applePie)),
        "Baklava": Recipe(
            id: UUID(uuidString: "B95B2D99-F45D-4B74-9EC4-526914FFC414")!,
            name: "Baklava", category: .dessert,
            ingredients: []),
        "Bolo de Rolo": Recipe(
            id: UUID(uuidString: "E17C729D-1E09-48F6-99E2-5BB959F5AE70")!,
            name: "Bolo de Rolo", category: .dessert,
            ingredients: []),
        "Chocolate Crackles": Recipe(
            id: UUID(uuidString: "89202A12-2B04-4EFE-ADC5-D1ECE7A25389")!,
            name: "Chocolate Crackles", category: .dessert,
            ingredients: []),
        "Crème Brûlée": Recipe(
            id: UUID(uuidString: "412EA92A-40B5-4CFE-9379-627A1C80FFE1")!,
            name: "Crème Brûlée", category: .dessert,
            ingredients: []),
        "Fruit Pie Filling": Recipe(
            id: UUID(uuidString: "4792C8AE-9596-4502-A9CB-806E2DFEA408")!,
            name: "Fruit Pie Filling", category: .dessert,
            ingredients: []),
        "Kanom Thong Ek": Recipe(
            id: UUID(uuidString: "331C25F6-4FED-4DA5-980E-7E619855DE92")!,
            name: "Kanom Thong Ek", category: .dessert,
            ingredients: []),
        "Mochi": Recipe(
            id: UUID(uuidString: "1EAA5288-8D2B-4969-AF97-ED591796B456")!,
            name: "Mochi", category: .dessert,
            ingredients: []),
        "Marzipan": Recipe(
            id: UUID(uuidString: "416F4F5A-A81C-40FD-87F1-060B0F57DE6D")!,
            name: "Marzipan", category: .dessert,
            ingredients: []),
        "Pie Crust": Recipe(
            id: UUID(uuidString: "D0820C1A-1AFB-4472-97DA-39A475304048")!,
            name: "Pie Crust", category: .dessert,
            ingredients: Ingredient.fromLines(pieCrust)),
        "Shortbread Biscuits": Recipe(
            id: UUID(uuidString: "3D9FEA8C-B38E-4739-8B4B-424885D76926")!,
            name: "Shortbread Biscuits", category: .dessert,
            ingredients: []),
        "Tiramisu": Recipe(
            id: UUID(uuidString: "586B9A4C-410A-40D2-AE40-BC32351A5C08")!,
            name: "Tiramisu", category: .dessert,
            ingredients: []),
        "Crêpe": Recipe(
            id: UUID(uuidString: "9BD6C3B2-30CB-425E-8D60-7F07D0BA720C")!,
            name: "Crêpe", category: .pancake,
            ingredients: []),
        "Jianbing": Recipe(
            id: UUID(uuidString: "117E5CD4-8FF9-43FB-ACAE-53C35A648F6F")!,
            name: "Jianbing", category: .pancake,
            ingredients: []),
        "American": Recipe(
            id: UUID(uuidString: "4584B877-E482-4FF2-824E-FC667BFAD271")!,
            name: "American", category: .pancake,
            ingredients: []),
        "Dosa": Recipe(
            id: UUID(uuidString: "5666FEB6-90DB-4CD2-91FA-D6F00986E90E")!,
            name: "Dosa", category: .pancake,
            ingredients: []),
        "Injera": Recipe(
            id: UUID(uuidString: "752DAEB8-123E-4C48-A190-79742AA56869")!,
            name: "Injera", category: .pancake,
            ingredients: []),
        "Acar": Recipe(
            id: UUID(uuidString: "F0D54AF2-04AD-4F08-ACE4-7886FCAE1F7B")!,
            name: "Acar", category: .salad,
            ingredients: []),
        "Ambrosia": Recipe(
            id: UUID(uuidString: "F7FD59E8-F1AE-4331-8667-D5534817F7E7")!,
            name: "Ambrosia", category: .salad,
            ingredients: []),
        "Bok L'hong": Recipe(
            id: UUID(uuidString: "3DE38C07-F985-4E05-810C-1108A777766B")!,
            name: "Bok L'hong", category: .salad,
            ingredients: []),
        "Caprese": Recipe(
            id: UUID(uuidString: "055D963C-0546-4578-AF18-6FBEE249EF35")!,
            name: "Caprese", category: .salad,
            ingredients: []),
        "Ceviche": Recipe(
            id: UUID(uuidString: "50B62AF4-89AF-4D00-9832-E200FEC01279")!,
            name: "Ceviche", category: .salad,
            ingredients: []),
        "Çoban Salatası": Recipe(
            id: UUID(uuidString: "87AD6B33-FFD2-4E5C-BC4B-59769F7AC7E3")!,
            name: "Çoban Salatası", category: .salad,
            ingredients: []),
        "Fiambre": Recipe(
            id: UUID(uuidString: "8A9BC0D5-A931-4381-BDA8-713DF6389FE7")!,
            name: "Fiambre", category: .salad,
            ingredients: []),
        "Kachumbari": Recipe(
            id: UUID(uuidString: "E9497D38-49E0-4A18-939B-63A3F2C7C0B4")!,
            name: "Kachumbari", category: .salad,
            ingredients: []),
        "Niçoise": Recipe(
            id: UUID(uuidString: "DE9F7106-4D0C-4EAC-B44C-A8D8ECD81087")!,
            name: "Niçoise", category: .salad,
            ingredients: [])
    ]

    recipes["Apple Pie"]!.related = [
        recipes["Pie Crust"]!.id,
        recipes["Fruit Pie Filling"]!.id
    ]

    recipes["Pie Crust"]!.related = [recipes["Fruit Pie Filling"]!.id]
    recipes["Fruit Pie Filling"]!.related = [recipes["Pie Crust"]!.id]

    return Array(recipes.values)
}()

let applePie = """
    ¾ cup white sugar
    2 tablespoons all-purpose flour
    ½ teaspoon ground cinnamon
    ¼ teaspoon ground nutmeg
    ½ teaspoon lemon zest
    7 cups thinly sliced apples
    2 teaspoons lemon juice
    1 tablespoon butter
    1 recipe pastry for a 9 inch double crust pie
    4 tablespoons milk
    """

let pieCrust = """
    2 ½ cups all purpose flour
    1 Tbsp. powdered sugar
    1 tsp. sea salt
    ½ cup shortening
    ½ cup butter (Cold, Cut Into Small Pieces)
    ⅓ cup cold water (Plus More As Needed)
    """

struct UseSceneStorage_Previews: PreviewProvider {
    static var previews: some View {
        UseSceneStorage()
    }
}

25:33 - Biscuits

import SwiftUI

struct Biscuits: View {
    @State private var step = 0
    @ScaledMetric private var fontSize = 18

    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Spacer()
                VStack {
                    Text("Biscuits")
                        .font(.headline)
                    Text(subtitle)
                        .font(.subheadline)
                }
                .padding(16)
                Spacer()
            }
            Spacer()
            Text(LocalizedStringKey(steps[step]))
                .font(.system(
                    size: fontSize, weight: .semibold, design: .serif))
                .padding(16)
                .lineLimit(1...)
            Spacer()
            HStack {
                Button {
                    withAnimation {
                        step -= 1
                    }
                } label: {
                    Label("Previous", systemImage: "chevron.backward")
                }
                .disabled(step - 1 < 0)

                Spacer()

                Button {
                    withAnimation {
                        step += 1
                    }
                } label: {
                    Label("Next", systemImage: "chevron.forward")
                }
                .disabled(step + 1 >= steps.count)
            }
            .buttonStyle(CarouselButtonStyle())
            .padding(16)
        }
        .foregroundStyle(Color.white)
        .background(gradient)
        .ignoresSafeArea(edges: .bottom)
    }

    var subtitle: LocalizedStringKey {
        if step == 0 { return "Ingredients" }
        return "Step \(step)"
    }

    var gradient: AngularGradient {
        AngularGradient(
            colors: colors,
            center: UnitPoint(x: 0.5, y: 1.0),
            angle: .degrees(180 * Double(step) / Double(steps.count - 1)))
    }

}

struct CarouselButtonStyle: ButtonStyle {
    @Environment(\.isEnabled) private var isEnabled

    func makeBody(configuration: Configuration) -> some View {
        ZStack {
            Circle()
                .fill(.ultraThinMaterial.shadow(.inner(
                    radius: configuration.isPressed ? 3 : 0)))
                .frame(width: 44, height: 44)
            configuration.label
                .labelStyle(.iconOnly)
                .foregroundStyle(isEnabled ? .black : .secondary)
                .opacity(configuration.isPressed ? 0.3 : 0.8)
        }
    }
}

let steps = [
    """
    2 cups all-purpose flour
    ¼ teaspoons coarse salt
    1 cup (2 sticks) unsalted butter, room temperature
    ¾ cup confectioners' sugar
    """,
    "Sift flour and salt, mix into bowl and set aside.",
    "Mix butter on high speed until fluffy (3 to 5 minutes).",
    "Gradually add sugar slowly, continuing to mix until pale and fluffy.",
    "Add flour all at once and mix until combined.",
    "Butter a square pan.",
    "Pat and roll shortbread into pan no more than 1/2-inch thick.",
    "Refrigerate for at least 30 minutes.",
    "Preheat oven to 300 F.",
    "Cut chilled shortbread into squares.",
    """
    Bake until golden and make sure the middle is firm. \
    Approximately 45 to 60 minutes.
    """,
    "Cool completely. Re-slice them, if necessary, and serve.",
]

let colors = [Color.yellow, .red, .purple]

struct Biscuits_Previews: PreviewProvider {
    static var previews: some View {
        Biscuits()
    }
}

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。

クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。

リソース

関連ビデオ

Tech Talks

WWDC22