0Pricing
Jetpack Compose Academy · Pelajaran

NavController & NavHost

Definisikan grafik navigasi app Anda.

NavController & NavHost adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Berpindah Antar-Layar

Aplikasi nyata memiliki banyak layar. Navigation Compose adalah pustaka resmi yang memungkinkan Anda berpindah di antaranya tanpa mengelola fragmen atau aktivitas. 🧭

Menambahkan Dependensi

Navigasi berada dalam artefaknya sendiri. Tambahkan androidx.navigation:navigation-compose ke file build modul Anda sebelum dapat menggunakannya.

dependencies {
    implementation("androidx.navigation:navigation-compose:2.7.7")
}

Berkenalan dengan NavController

NavController adalah otak navigasi. Komponen ini melacak lokasi Anda, mengingat riwayat, dan menjalankan setiap perpindahan yang Anda minta.

Mengingat Controller

Buat satu dengan rememberNavController() agar tetap bertahan selama rekomposisi. Buat sekali di dekat bagian atas aplikasi, lalu teruskan ke bawah.

val navController = rememberNavController()

Berkenalan dengan NavHost

NavHost adalah wadah yang mengganti layar yang ditampilkan. Komponen ini menampilkan tepat satu tujuan pada satu waktu berdasarkan controller.

Menghubungkan Host ke Controller

NavHost memerlukan dua hal: navController yang menggerakkannya dan startDestination yang menyatakan layar mana yang harus ditampilkan terlebih dahulu.

NavHost(
    navController = navController,
    startDestination = "home"
) { }

startDestination

startDestination adalah rute yang ditampilkan saat aplikasi dibuka. Rute ini juga merupakan layar yang dituju pengguna setelah tumpukan kembali kosong.

Mendeklarasikan Tujuan

Di dalam lambda NavHost, cantumkan layar Anda dengan composable("route"). Masing-masing menghubungkan nama rute dengan UI yang harus ditampilkan.

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("profile") { ProfileScreen() }
}

Bernavigasi Berdasarkan Rute

Untuk mengganti layar, panggil navController.navigate("route"). Host akan melihat permintaan tersebut dan segera mengganti tampilan dengan tujuan yang sesuai.

Button(onClick = { navController.navigate("profile") }) {
    Text("Open profile")
}

Satu Controller, Satu Host

Pertahankan satu NavController yang dipasangkan dengan satu NavHost untuk alur utama aplikasi. Berbagi satu sumber kebenaran mencegah riwayat yang membingungkan dan tidak sinkron.

Mengapa Rute Berupa String

Rute hanyalah pengenal String, seperti URL kecil di dalam aplikasi Anda. Dengan begitu, tujuan tidak saling bergantung dan mudah ditautkan nantinya.

Pemeriksaan Singkat

Komponen mana yang sebenarnya melakukan pergantian layar?

Rangkuman

Anda telah mengenal dua komponen di balik navigasi: NavController menggerakkan perpindahan dan mengelola riwayat, sedangkan NavHost menampilkan satu tujuan pada satu waktu dari daftar rute Anda. 🎉

Pertanyaan yang Sering Diajukan

Apakah pelajaran “NavController & NavHost” gratis?

Ya — teks lengkap “NavController & NavHost” 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 “NavController & NavHost”?

Definisikan grafik navigasi app Anda. 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 1 dari 4.

Berapa lama pelajaran “NavController & NavHost” 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

  1. NavController & NavHost
  2. Tujuan & Rute Composable
  3. Meneruskan Argumen Antar-Layar
  4. Tumpukan Kembali & Tautan Mendalam
← Kembali ke Jetpack Compose Academy