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 utama tentang kode

Perhatikan hal berikut dalam contoh ini:

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

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

Meneruskan fungsi

Contoh ini menggunakan panah kembali untuk ikon. Dengan demikian, argumen untuk navigateBack() harus mengarahkan pengguna ke tujuan sebelumnya.

Untuk melakukannya, teruskan TopBarNavigationExample panggilan ke NavController.popBackStack(). Anda melakukannya saat mem-build grafik navigasi . Contoh:

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

Referensi lainnya

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