Halaman ini diterjemahkan oleh Cloud Translation API.

Menu navigasi

Panel navigasi memungkinkan pengguna beralih antar-tujuan dalam aplikasi. Anda harus menggunakan panel navigasi untuk:

Tiga hingga lima tujuan yang sama pentingnya
Ukuran jendela ringkas
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 panel navigasi di aplikasi Anda dengan layar terkait dan navigasi dasar.

Platform API

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

NavigationBarItem mencakup parameter utama berikut:

selected: Menentukan apakah item saat ini ditandai secara visual.
onClick(): Fungsi lambda wajib 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 berpindah di antara layar yang berbeda 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) dipanggil untuk membuka layar yang sesuai.
Lambda onClick dari NavigationBarItem memperbarui status selectedDestination untuk menyoroti item yang diklik secara visual.
Composable ini memanggil composable AppNavHost, meneruskan navController dan startDestination, untuk menampilkan konten sebenarnya dari layar yang dipilih.

Hasil

Gambar berikut menampilkan menu navigasi yang dihasilkan dari cuplikan sebelumnya: