Navegar pela barra de apps na parte de cima

Este guia demonstra como criar o ícone de navegação em um app principal bar executar ações de navegação.

Exemplo

O snippet a seguir é um exemplo mínimo de como implementar um aplicativo principal com um ícone de navegação funcional. Nesse caso, o ícone leva o usuário para o destino anterior no aplicativo:

@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

Pontos principais sobre o código

Observe o seguinte neste exemplo:

  • O elemento combinável TopBarNavigationExample define um parâmetro navigateBack. do tipo () -> Unit.
  • Ela transmite navigateBack ao parâmetro navigationIcon do CenterAlignedTopAppBar

Assim, sempre que o usuário clicar no ícone de navegação na parte superior do aplicativo, chama navigateBack().

Transmitir uma função

Este exemplo usa uma seta para trás como ícone. Assim, o argumento para navigateBack() precisa levar o usuário ao destino anterior.

Para isso, transmita uma chamada a TopBarNavigationExample para NavController.popBackStack(). Você faz isso quando cria gráfico de navegação. Exemplo:

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

Outros recursos

Para mais informações sobre como implementar a navegação no seu app, consulte a seguinte série de guias: