Kolom samping navigasi

Kolom samping navigasi menyediakan akses ke tujuan di aplikasi yang berjalan di perangkat dengan layar besar. Anda harus menggunakan kolom samping navigasi untuk:

• Tujuan tingkat atas yang harus dapat diakses di mana saja dalam aplikasi
• Tiga hingga tujuh tujuan utama
• Tata letak tablet atau desktop

Halaman ini menunjukkan cara menampilkan kolom samping navigasi di aplikasi Anda dengan layar terkait dan navigasi dasar.

Permukaan API

Gunakan composable NavigationRail dengan NavigationRailItem untuk menerapkan kolom samping navigasi di aplikasi Anda. NavigationRailItem mewakili satu item kolom samping navigasi di kolom samping navigasi.

NavigationRailItem mencakup parameter utama berikut:

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

Contoh: Navigasi berbasis kolom samping navigasi

Cuplikan berikut mengimplementasikan kolom samping navigasi sehingga pengguna dapat menavigasi antar-layar yang berbeda dalam aplikasi:

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

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

Poin-poin utama

• NavigationRail menampilkan kolom vertikal item kolom samping navigasi, 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 kolom samping navigasi yang saat ini dipilih.
  • startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
• Saat item kolom samping navigasi diklik, navController.navigate(route = destination.route) akan dipanggil untuk membuka layar yang sesuai.
• Lambda onClick dari NavigationRailItem memperbarui status selectedDestination untuk menyorot item kolom samping navigasi yang diklik secara visual.
• Fungsi ini memanggil composable AppNavHost, meneruskan navController dan startDestination, untuk menampilkan konten sebenarnya dari layar yang dipilih.

Hasil

Gambar berikut menunjukkan hasil cuplikan sebelumnya:

Referensi lainnya

• Material 3 - Kolom samping navigasi
• Navigasi dengan Compose