Menavigasi dari panel aplikasi atas

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

Contoh

Cuplikan berikut adalah contoh minimal tentang cara menerapkan panel aplikasi atas dengan ikon navigasi yang berfungsi. Dalam hal ini, ikon membawa 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-hal berikut dalam contoh ini:

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

Dengan demikian, setiap kali pengguna mengklik ikon navigasi di aplikasi atas kembali, tindakan ini akan memanggil navigateBack().

Meneruskan fungsi

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

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

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

Referensi tambahan

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