Jetpack Compose Academy · Pelajaran

Menyorot Rute Terpilih

Sinkronkan pilihan dengan tumpukan kembali.

Pelajaran 2 dari 413 langkah

Menyorot Rute Terpilih adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 2 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 Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Pemilihan Harus Nyata

Tab seharusnya menyala berdasarkan posisi pengguna yang sebenarnya, bukan nilai yang Anda tetapkan secara manual. back stack adalah sumber kebenarannya. 🧭

Baca Entri Saat Ini

Minta NavController memberikan currentBackStackEntryAsState yang sedang aktif. Nilai ini diperbarui otomatis setiap kali navigasi berubah.

val entry by navController.currentBackStackEntryAsState()

Dapatkan Rute Aktif

Dari entri tersebut, baca string rute aktif dari destination-nya. String itu memberi tahu tab mana yang sedang ditampilkan.

val route = entry?.destination?.route

Bandingkan untuk Menandai Pilihan

Sekarang atur selected setiap item dengan membandingkan rute aktif dengan rute tab tersebut. Kecocokannya menjadi tab selected yang disorot.

selected = route == tab.route

Hierarki Mengalahkan Kesamaan

Untuk grafik bertingkat, kesamaan persis dapat gagal. Pemeriksaan hierarchy tujuan menandai tab sebagai aktif bahkan pada sublayarnya.

selected = entry?.destination?.hierarchy?.any {
  it.route == tab.route
} == true

Bernavigasi Saat Diketuk

Di dalam onClick, panggil navController.navigate dengan rute tab untuk berpindah ke sana. Setelah itu, pemilihan akan mengikuti back stack secara otomatis.

onClick = { navController.navigate(tab.route) }

Hindari Menumpuk Salinan

Mengetuk tab berulang kali seharusnya tidak menumpuk layar. Gunakan launchSingleTop agar hanya satu salinan tujuan yang berada di posisi teratas.

navController.navigate(tab.route) {
  launchSingleTop = true
}

Kembali ke Awal

Menekan tombol kembali dari tab mana pun seharusnya mengembalikan Anda ke tab beranda, bukan melewati semua tab yang telah dikunjungi. popUpTo ke tujuan awal akan memperbaikinya.

popUpTo(navController.graph.startDestinationId) {
  saveState = true
}

Warnai Tab Aktif

NavigationBarItem otomatis memberi warna pada item yang dipilih, tetapi Anda dapat menyesuaikannya dengan tema menggunakan colors agar tab aktif sesuai dengan merek Anda.

colors = NavigationBarItemDefaults.colors(
  selectedIconColor = MaterialTheme.colorScheme.primary
)

Visibilitas Label

Gunakan alwaysShowLabel untuk menentukan apakah tab yang tidak dipilih tetap menampilkan teks. Hanya menampilkan label aktif adalah tampilan bersih yang umum.

alwaysShowLabel = false

Satu Perulangan Reaktif

Satukan semuanya: baca rute sekali, lalu di dalam forEach bandingkan setiap tab dengannya. Kini pemilihan sepenuhnya mencerminkan navigasi.

Pemeriksaan Singkat

Anda telah menghubungkan pemilihan dengan back stack. Satu pertanyaan singkat.

Jawab di pelajaran interaktif

Rangkuman

Anda telah menyinkronkan penyorotan dengan back stack: baca rute saat ini, bandingkan untuk setiap tab, lalu bernavigasi menggunakan launchSingleTop dan popUpTo. Kini pemilihan tetap sesuai keadaan sebenarnya. 🎯

Gratis untuk memulai

Belajar Kotlin dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 30
Pelajaran: 120

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menyorot Rute Terpilih” gratis?

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

Apa yang akan aku pelajari di “Menyorot Rute Terpilih”?

Sinkronkan pilihan dengan tumpukan kembali. Kamu berlatih Jetpack Compose 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 Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose 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 2 dari 4.

Berapa lama pelajaran “Menyorot Rute Terpilih” 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 Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose 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 Jetpack Compose Academy