Navegar pela barra de apps na parte de cima

Este guia demonstra como fazer com que o ícone de navegação em uma barra de apps na parte de cima execute ações de navegação.

Exemplo

O snippet a seguir é um exemplo mínimo de como implementar uma barra de apps na parte de cima com um ícone de navegação funcional. Nesse caso, o ícone leva o usuário ao destino anterior no app:

@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.
  • Ele transmite navigateBack para o parâmetro navigationIcon de CenterAlignedTopAppBar.

Assim, sempre que o usuário clicar no ícone de navegação na barra de apps na parte de cima, ele vai chamar 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 fazer isso, transmita TopBarNavigationExample uma chamada para NavController.popBackStack(). Faça isso onde você cria o 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 esta série de guias: