Nawigacja z górnego paska aplikacji

Z tego przewodnika dowiesz się, jak sprawić, aby ikona nawigacji na górnym pasku aplikacji wykonywała działania związane z nawigacją.

Przykład

Poniższy fragment kodu to minimalny przykład implementacji górnego paska aplikacji z funkcjonalną ikoną nawigacji. W tym przypadku ikona przenosi użytkownika do poprzedniego miejsca docelowego w aplikacji:

@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

Najważniejsze informacje o kodzie

Zwróć uwagę na te kwestie:

  • Funkcja kompozycyjna TopBarNavigationExample definiuje parametr navigateBack typu () -> Unit.
  • Przekazuje wartość navigateBack do parametru navigationIcon w przypadku CenterAlignedTopAppBar.

Dlatego za każdym razem, gdy użytkownik kliknie ikonę nawigacji w górnej części aplikacji, wywoływana jest funkcja navigateBack().

Przekazywanie funkcji

W tym przykładzie jako ikony użyto strzałki wstecz. Dlatego argument dla navigateBack() powinien kierować użytkownika do poprzedniego miejsca docelowego.

Aby to zrobić, przekaż wywołanie do TopBarNavigationExample NavController.popBackStack(). Możesz to zrobić w miejscu, w którym budujesz graf nawigacji. Na przykład:

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

Dodatkowe materiały

Więcej informacji o wdrażaniu nawigacji w aplikacji znajdziesz w tej serii przewodników: