Menavigasi dari panel aplikasi atas

Panduan ini menunjukkan cara membuat ikon navigasi di panel aplikasi atas melakukan tindakan navigasi.

Contoh

Cuplikan berikut adalah contoh minimal cara mengimplementasikan panel aplikasi atas dengan ikon navigasi fungsional. Dalam hal ini, ikon akan mengarahkan pengguna ke tujuan sebelumnya di aplikasi:

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}

Poin penting tentang kode

Perhatikan hal berikut dalam contoh ini:

  • Composable TopBarNavigationExample menentukan parameter navigateBack dari jenis () -> Unit.
  • Fungsi ini meneruskan navigateBack untuk parameter navigationIcon dari CenterAlignedTopAppBar.

Dengan demikian, setiap kali pengguna mengklik ikon navigasi di panel aplikasi atas, navigateBack() akan dipanggil.

Meneruskan fungsi

Contoh ini menggunakan panah kembali untuk ikon. Oleh karena itu, argumen untuk navigateBack() harus mengarahkan pengguna ke tujuan sebelumnya.

Untuk melakukannya, teruskan TopBarNavigationExample panggilan ke NavController.popBackStack(). Anda dapat melakukannya di tempat Anda membuat grafik navigasi. Contoh:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

Referensi lainnya

Untuk mengetahui informasi selengkapnya tentang cara menerapkan navigasi di aplikasi Anda, lihat serangkaian panduan berikut: