Kolom samping navigasi

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

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

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

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

Platform API

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

NavigationRailItem menyertakan parameter utama berikut:

• selected: Menentukan apakah item kolom samping saat ini ditandai secara visual.
• onClick(): Fungsi lambda yang diperlukan 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: Navigasi berbasis kolom samping

Cuplikan berikut menerapkan kolom samping navigasi sehingga pengguna dapat berpindah antar-layar 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 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 kereta yang saat ini dipilih.
  • startDestination.ordinal mendapatkan indeks numerik (posisi) entri enum Destination.SONGS.
• Saat item kolom samping diklik, navController.navigate(route = destination.route) akan dipanggil untuk membuka layar yang sesuai.
• Lambda onClick dari NavigationRailItem memperbarui status selectedDestination untuk menyoroti item kolom samping 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 menunjukkan hasil cuplikan sebelumnya:

Referensi lainnya

• Material 3 - Kolom samping navigasi
• Navigasi dengan Compose