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 menerapkan panel aplikasi atas dengan ikon navigasi yang berfungsi. 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),
        )
    }
}
AppBar.kt

Poin penting tentang kode

Perhatikan hal berikut dalam contoh ini:

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

Oleh karena itu, setiap kali pengguna mengklik ikon navigasi di kembali aplikasi atas, ikon tersebut akan memanggil navigateBack().

Meneruskan fungsi

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

Untuk melakukannya, teruskan TopBarNavigationExample panggilan ke NavController.popBackStack(). Anda melakukannya di tempat Anda membangun 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: