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 takim 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),
        )
    }
}

Najważniejsze informacje o kodzie

Zwróć uwagę na te elementy w przykładzie:

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

Dlatego za każdym razem, gdy użytkownik kliknie ikonę nawigacji na górnym pasku aplikacji, wywoływana jest funkcja navigateBack().

Przekazywanie funkcji

W tym przykładzie jako ikona używana jest strzałka wstecz. Dlatego argument dla navigateBack() powinien kierować użytkownika do poprzedniego miejsca docelowego.

Aby to zrobić, przekaż TopBarNavigationExample do wywołania NavController.popBackStack(). Możesz to zrobić tam, gdzie tworzysz wykres nawigacji. 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 tych przewodnikach: