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 tentang 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.

Dengan demikian, setiap kali pengguna mengklik ikon navigasi di aplikasi atas, aplikasi 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 panggilan TopBarNavigationExample ke NavController.popBackStack(). Anda melakukannya di tempat Anda mem-build grafik navigasi. Contoh:

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

Referensi lainnya

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