SwiftUI Academy · レッスン

タブとスタックの組み合わせ

各タブに独自の NavigationStack を持たせます。

レッスン 4/413 ステップ

「タブとスタックの組み合わせ」は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フィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. タブバーの作成
  2. タブ項目とバッジ
  3. 選択中のタブのバインディング
  4. タブとスタックの組み合わせ
← SwiftUI Academyに戻る