SwiftUI Academy · Pelajaran

Bilah Alat dan Judul Navigasi

Tambahkan judul dan tombol bilah alat ke bilah navigasi.

Bilah Alat dan Judul Navigasi adalah pelajaran SwiftUI Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Naming the Screen

Every screen deserves a clear name. The navigationTitle modifier puts a heading in the navigation bar so users always know where they are. 🧭

.navigationTitle("Inbox")

Where the Title Goes

Attach navigationTitle to the content inside the NavigationStack, not to the stack itself. The bar then reads the title from the current screen.

NavigationStack {
    List { }
        .navigationTitle("Inbox")
}

Large vs Inline

By default the title is large and shrinks as you scroll. Use navigationBarTitleDisplayMode to force a compact inline style instead.

.navigationBarTitleDisplayMode(.inline)

Adding Toolbar Buttons

The toolbar modifier lets you place buttons in the navigation bar, like an add button or an edit action for the current screen.

.toolbar {
    Button("Add") { addItem() }
}

Choosing a Placement

Wrap each control in a ToolbarItem and pick a placement so buttons land on the correct side of the bar.

.toolbar {
    ToolbarItem(placement: .topBarTrailing) {
        Button("Add") { }
    }
}

Leading and Trailing

Use topBarLeading for the left edge and topBarTrailing for the right. These adapt automatically for right-to-left languages. 🌍

Icons in the Bar

Toolbar buttons often use SF Symbols instead of words to stay compact. A small image keeps the bar tidy on every device.

Button {
    addItem()
} label: {
    Image(systemName: "plus")
}

Many Buttons at Once

You can add several ToolbarItem entries in one toolbar block, grouping related actions like edit, share, and add together.

The Bottom Toolbar

Placement is not limited to the top. Use bottomBar to pin actions to the bottom of the screen for thumb-friendly controls.

ToolbarItem(placement: .bottomBar) {
    Button("Done") { }
}

Titles Follow the Stack

Each pushed screen sets its own title, and the bar updates as you navigate. The previous title even becomes the back button label.

Keep Bars Uncluttered

Resist filling the bar with buttons. Two or three clear actions keep the screen calm and easy to scan.

Quick Check

Which modifier adds buttons to the navigation bar?

Recap: Toolbar & Title

You name screens with navigationTitle and add buttons with toolbar and ToolbarItem placements. Up next, driving navigation entirely from code. 🚀

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Bilah Alat dan Judul Navigasi” gratis?

Ya — teks lengkap “Bilah Alat dan Judul Navigasi” 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 “Bilah Alat dan Judul Navigasi”?

Tambahkan judul dan tombol bilah alat ke bilah navigasi. 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 3 dari 4.

Berapa lama pelajaran “Bilah Alat dan Judul Navigasi” 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