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

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 parte de cima do app, 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 para uma chamada para NavController.popBackStack(). Isso é feito 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 a seguinte série de guias: