SwiftUI Academy · Pelajaran

Menggabungkan Tab dengan Stack

Berikan NavigationStack tersendiri untuk setiap tab.

Menggabungkan Tab dengan Stack adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar SwiftUI Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

Tabs Plus Navigation

Most real apps let users tap a tab and then drill into detail screens. That means mixing TabView with NavigationStack. 🧭

One Stack per Tab

The pattern is simple: give every tab its own NavigationStack so each section has independent push and pop history.

Wrapping a Tab Screen

Put a NavigationStack inside each tab and place that tab content within it. The tab bar stays put while you navigate.

NavigationStack {
    HomeScreen()
}
.tabItem { Label("Home", systemImage: "house") }

Stack Lives Inside TabView

Order matters: NavigationStack goes inside the TabView, never the other way around, so the bar never scrolls away.

Independent History

Because each tab owns its stack, drilling deep in one tab leaves the others untouched when you come back.

A Full Combined Example

Here two tabs each wrap their screen in a stack, giving Home and Search their own navigation.

TabView {
    NavigationStack { HomeScreen() }
        .tabItem { Label("Home", systemImage: "house") }
    NavigationStack { SearchScreen() }
        .tabItem { Label("Search", systemImage: "magnifyingglass") }
}

Pushing Detail Views

Inside a tab use NavigationLink as usual to push detail screens onto that tab own stack.

NavigationLink("Details") {
    DetailScreen()
}

Titles Stay Per Tab

Set navigationTitle inside each stack so every tab shows its own title in the bar at the top.

Switching Tabs Keeps Depth

Move to another tab and back and your position in that tab navigation is preserved, just like native apps.

Avoid Stacking the Bar

Never wrap the whole TabView in a single NavigationStack. That can push the tab bar around in odd ways.

A Scalable Structure

This tab-plus-stack layout scales cleanly. Add a tab, give it a stack, and the rest of the app keeps working. ✨

Quick Check

Let us check the right way to nest navigation with tabs.

Recap: Combining Tabs with Stacks

Wrap each tab content in its own NavigationStack inside the TabView, and every section gets independent navigation with a steady tab bar. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggabungkan Tab dengan Stack” gratis?

Ya — teks lengkap “Menggabungkan Tab dengan Stack” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus SwiftUI Academy, upgrade ke CoddyKit PRO. Kursus SwiftUI Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggabungkan Tab dengan Stack”?

Berikan NavigationStack tersendiri untuk setiap tab. Kamu berlatih SwiftUI Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai SwiftUI Academy?

Tidak diperlukan pengalaman sebelumnya. SwiftUI Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Menggabungkan Tab dengan Stack” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran SwiftUI Academy ini?

Ya. Setiap pelajaran SwiftUI Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke SwiftUI Academy