Halaman ini diterjemahkan oleh Cloud Translation API.

Menu navigasi
Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Menu navigasi memungkinkan pengguna beralih antar-tujuan di aplikasi. Anda harus menggunakan menu navigasi untuk:

Tiga hingga lima tujuan yang sama pentingnya
Ukuran jendela rapat
Tujuan yang konsisten di seluruh layar aplikasi

Menu navigasi dengan 4 tujuan. Setiap tujuan memiliki nama placeholder yang disebut — **Gambar 1.** Menu navigasi dengan 4 tujuan.

Halaman ini menunjukkan cara menampilkan menu navigasi di aplikasi dengan layar terkait dan navigasi dasar.

Platform API

Gunakan composable NavigationBar dan NavigationBarItem untuk menerapkan logika pengalihan tujuan. Setiap NavigationBarItem mewakili tujuan tunggal.

NavigationBarItem menyertakan parameter utama berikut:

selected: Menentukan apakah item saat ini ditandai secara visual.
onClick(): Fungsi lambda yang diperlukan yang menentukan tindakan yang akan dilakukan saat pengguna mengklik item. Di sinilah Anda biasanya menangani peristiwa navigasi, memperbarui status item yang dipilih, atau memuat konten yang sesuai.
label: Menampilkan teks dalam item. Opsional.
icon: Menampilkan ikon dalam item. Opsional.

Contoh: Menu navigasi bawah

Cuplikan berikut menerapkan menu navigasi bawah dengan item sehingga pengguna dapat menavigasi di antara berbagai layar dalam aplikasi:

@Composable
fun NavigationBarExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(
        modifier = modifier,
        bottomBar = {
            NavigationBar(windowInsets = NavigationBarDefaults.windowInsets) {
                Destination.entries.forEachIndexed { index, destination ->
                    NavigationBarItem(
                        selected = selectedDestination == index,
                        onClick = {
                            navController.navigate(route = destination.route)
                            selectedDestination = index
                        },
                        icon = {
                            Icon(
                                destination.icon,
                                contentDescription = destination.contentDescription
                            )
                        },
                        label = { Text(destination.label) }
                    )
                }
            }
        }
    ) { contentPadding ->
        AppNavHost(navController, startDestination, modifier = Modifier.padding(contentPadding))
    }
}Navigation.kt

Poin utama

NavigationBar menampilkan kumpulan item, dengan setiap item sesuai dengan Destination.
val navController = rememberNavController() membuat dan mengingat instance NavHostController, yang mengelola navigasi dalam NavHost.
var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } mengelola status item yang dipilih saat ini.
var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } mengelola status item yang dipilih saat ini.
- startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
Saat item diklik, navController.navigate(route = destination.route) akan dipanggil untuk membuka layar yang sesuai.
Lambda onClick dari NavigationBarItem memperbarui status selectedDestination untuk menyoroti item yang diklik secara visual.
Fungsi ini memanggil composable AppNavHost, yang meneruskan navController dan startDestination, untuk menampilkan konten sebenarnya dari layar yang dipilih.

Hasil

Gambar berikut menampilkan menu navigasi yang dihasilkan dari cuplikan sebelumnya: