Kolom samping navigasi

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

  • Tujuan level atas yang harus dapat diakses di mana saja dalam aplikasi
  • Tiga hingga tujuh tujuan utama
  • Tata letak tablet atau desktop
Panel navigasi vertikal di sisi kiri layar dengan empat tujuan (Semua File, Terbaru, Foto, dan Library), masing-masing dengan ikon terkait, dan tombol tindakan mengambang.
Gambar 1. Kolom samping navigasi dengan empat tujuan dan tombol tindakan mengambang.

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

Platform API

Gunakan composable NavigationRail dengan NavigationRailItem untuk menerapkan panel di aplikasi Anda. NavigationRailItem mewakili satu item jalur di kolom jalur.

NavigationRailItem mencakup parameter utama berikut:

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

Contoh: Navigasi berbasis panel samping

Cuplikan berikut menerapkan kolom navigasi samping sehingga pengguna dapat menavigasi antara 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 utama

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

Hasil

Gambar berikut menunjukkan hasil cuplikan sebelumnya:

Kolom samping navigasi vertikal dengan 3 tujuan dan ikon terkait: Lagu, Album, dan Playlist. Ikon secara visual menunjukkan tujuan setiap tombol navigasi di panel. Setiap tujuan memiliki ikon yang relevan yang dipasangkan dengannya (misalnya, not musik untuk
Gambar 2. Kolom samping navigasi yang berisi 3 tujuan dengan ikon terkait: Lagu, Album, dan Playlist.

Referensi lainnya