Kolom samping navigasi

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

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

Gambar 1. Kolom samping navigasi dengan empat tujuan dan tombol tindakan mengambang (FAB).

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

Platform API

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

NavigationRailItem mencakup parameter utama berikut:

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

Contoh: Contoh: Navigasi berbasis kolom

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

Catatan: Kode sumber lengkap menyertakan kode yang membuat struktur navigasi dasar untuk contoh berikut.

@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, 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 yang dipilih.
  • startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
• Saat item kolom diklik, navController.navigate(route = destination.route) dipanggil untuk membuka layar yang sesuai.
• Lambda onClick dari NavigationRailItem memperbarui status selectedDestination untuk menandai item kolom samping 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:

Gambar 2. Kolom navigasi yang berisi 3 tujuan dengan ikon terkait: Lagu, Album, dan Playlist.

Referensi lainnya

• Material 3 - Kolom samping navigasi
• Navigasi dengan Compose