Com o Jetpack Compose, o Android está abandonando formas implícitas de movimentação com transações de fragmentos, navegações e intenções para atividades. Hoje em dia, o aplicativo deve declarar todos os caminhos possíveis que os usuários podem seguir no início.

O Jetpack Compose fornece uma maneira nativa de navegar por seus vários componentes. Com NavHost e NavController, você pode enviar ou exibir seus elementos que podem ser compostos conforme necessário. Então vamos fazer isso.

Dependências

Em primeiro lugar, você precisará adicionar uma dependência ao seu projeto. Para obter a versão atual, acesse aqui .

implementation "androidx.navigation:navigation-compose:2.5.3"

Implementação

Primeiramente, NavHost e NavController são apresentados ao projeto.

NavHost hospeda a declaração das rotas que os usuários podem seguir. NavController fornece API para mover as rotas declaradas. A rota é o caminho, que é exclusivo para cada tela/outro elemento que pode ser composto que pode ser exibido no aplicativo.

Instanciação

NavController é instanciado com RememberNavController(), portanto, mesmo após a reconstrução dos elementos que podem ser compostos, o NavController é o mesmo.

Destino inicial

O NavHost com NavController e o destino inicial são declarados. O destino inicial é o nome da nossa rota na primeira tela.

Declaração de rotas

Todas as opções são declaradas onde um usuário pode se mover. Ambas as telas precisam declarar rotas. O nome da rota é exclusivo porque o NavController os usará para identificar o próximo elemento que pode ser composto a ser exibido.

Qualquer elemento que pode ser composto pode ser exibido por meio de navcontroller.navigate(“rotear para o elemento que pode ser composto”).

Para imitar o botão Voltar do usuário, o navcontroller.popBackStack() pode ser usado. Isso destacará o elemento que pode ser composto atual da pilha de todos os elementos que podem ser compostos.

A pilha pode ser visualizada como um histórico dos elementos/telas que podem ser compostos, portanto, a primeira tela é a raiz e os outros elementos que podem ser compostos são colocados sobre ela. Portanto, ao navegar para a segunda tela, a segunda tela é adicionada ao topo da pilha. Ao destacar a pilha, o elemento que pode ser composto superior é removido.

Limpar

Para ser mais propenso a erros no futuro, [aths deve ser declarado de forma mais clara. Portanto, evite adicionar strings em todos os lugares e crie o arquivo autônomo onde você coloca todas as rotas para seu aplicativo. Depois, as constantes declaradas devem ser usadas. Erros de digitação embaraçosos serão evitados no futuro. Além disso, fornece uma visão mais descritiva de como o aplicativo está estruturado.

Passando por várias telas e voltando para a raiz

A partir de agora, adicionar telas subsequentes à nossa navegação é fácil. O NavHost precisa ser estendido por mais um componível, e as telas precisam adotar mais botões para se movimentar.

A terceira tela contém um botão, que leva o usuário de volta à primeira tela e limpa todos os componentes empilhados.

Para inserir vários elementos que podem ser compostos na pilha, pode-se usar navController.popBackStack(“Tela onde você deseja parar o popping”, inclusive: false).

O parâmetro inclusivo informa se o elemento que pode ser composto de destino também deve ser removido. Remover a primeira tela resultaria em uma tela em branco, então o valor false é passado.

Passando valor para a tela

A maioria dos aplicativos deseja mostrar informações ou dados dependentes da escolha anterior do usuário. Outra tela precisa saber o que mostrar, então o valor precisa ser passado.

Isso é feito colocando o valor dentro da rota, então o valor é codificado como uma string e depois analisado em outra tela.

Declaração

Primeiramente, a rota precisa declarar a presença do valor, o que é feito assim:

const val SECOND_SCREEN = "SecondScreen/{customValue}"
// where the {customValue} is placeholder for the passed value

composable(
    Routes.SECOND_SCREEN,
    arguments = listOf(navArgument("customValue") {
        type = NavType.StringType
    })
) { backStackEntry ->
    ThirdScreen(
        navigation = navController,
        // callback to add new composable to backstack 
        // it contains the arguments field with our value
        textToShow = backStackEntry.arguments?.getString(
            "customValue", // key for our value
            "Default value" // default value
        )
    )
}

val valueToPass = "Information for next screen"
val routeToScreenWithValue = "SecondScreen/$valueToPass"
navigation.navigate(routeToScreenWithValue)

A primeira tela agora contém um campo de texto, cujo conteúdo é passado para a segunda tela.

Não passe dados complexos para visualizações na navegação

Apenas um valor deve ser passado para a exibição. Outros dados devem ser obtidos com a ajuda do ViewModel ou outra unidade lógica. Isso tornará seu código muito mais limpo e mais testável.

Por exemplo, se você deseja mostrar detalhes sobre um produto ou usuário, um ID deve ser passado apenas para a exibição. A unidade lógica obtém o ID e extrai informações mais detalhadas da internet ou de um banco de dados. Os dados são passados ​​para a exibição diretamente sem a ajuda dos componentes de navegação.

Recursos:

Mais do desenvolvimento Android: