タブとスタックの組み合わせ
各タブに独自の NavigationStack を持たせます。
「タブとスタックの組み合わせ」はCoddyKit上の無料SwiftUI Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSwiftUI Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 SwiftUI Academyコースには全4レッスンが含まれています。
タブとナビゲーション
実際のアプリの多くでは、ユーザーがタブをタップした後、詳細画面へ進めるようになっています。つまり、TabView とNavigationStackを組み合わせます。🧭
タブごとに1つのスタック
方法は簡単です。各タブに専用のNavigationStackを用意し、それぞれのセクションで独立した push と pop の履歴を持たせます。
タブ画面をラップする
各タブの内側に NavigationStack を置き、その中にタブのコンテンツを配置します。ナビゲーション中もタブバーはその場に留まります。
NavigationStack {
HomeScreen()
}
.tabItem { Label("Home", systemImage: "house") }スタックは TabView の内側に置く
順序が重要です。タブバーがスクロールして消えないように、NavigationStack は TabView の内側に置き、逆にはしません。
独立した履歴
各タブが自分のスタックを持つため、1つのタブで深い階層まで進んでも、戻ってきたときに他のタブは影響を受けません。
完全な組み合わせ例
ここでは2つのタブがそれぞれ画面をスタックでラップしており、Home と Search が独自のナビゲーションを持ちます。
TabView {
NavigationStack { HomeScreen() }
.tabItem { Label("Home", systemImage: "house") }
NavigationStack { SearchScreen() }
.tabItem { Label("Search", systemImage: "magnifyingglass") }
}詳細画面へ進む
タブの中では、通常どおりNavigationLinkを使って、そのタブのスタックに詳細画面を push します。
NavigationLink("Details") {
DetailScreen()
}タイトルはタブごとに設定する
各スタックの内側で navigationTitle を設定すると、すべてのタブが上部のバーにそれぞれのタイトルを表示できます。
タブを切り替えても階層を維持する
別のタブへ移動して戻ってくると、そのタブでの位置が保持されます。ネイティブアプリと同じ動作です。
タブバーをスタックに入れない
TabView 全体を1つの NavigationStack でラップしてはいけません。タブバーが不自然な形でpushされることがあります。
拡張しやすい構成
このタブとスタックの構成は、きれいに拡張できます。タブを追加してスタックを用意すれば、アプリの他の部分はそのまま動作します。✨
クイックチェック
タブとナビゲーションを正しく入れ子にする方法を確認しましょう。
まとめ:タブとスタックの組み合わせ
TabView の内側で各タブのコンテンツを専用のNavigationStackでラップすると、タブバーを維持したまま、各セクションで独立したナビゲーションを使えます。🎉
AI チューターと学ぶ Swift — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 30
- レッスン
- 120
よくある質問
「タブとスタックの組み合わせ」レッスンは無料ですか?
はい。「タブとスタックの組み合わせ」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し(組み込みコードエディタと24時間対応のAIチューター)、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。
「タブとスタックの組み合わせ」で何を学びますか?
各タブに独自の NavigationStack を持たせます。 ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
SwiftUI Academyを始めるのに経験は必要ですか?
事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「タブとスタックの組み合わせ」レッスンにはどのくらい時間がかかりますか?
ほとんどのCoddyKitレッスンは約5~10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwiftUI Academyレッスンでコードを書いて実行できますか?
はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- タブバーの作成
- タブ項目とバッジ
- 選択中のタブのバインディング
- タブとスタックの組み合わせ