Usar páginas com guias com páginas na pilha de navegação
O submenu e a navegação com guias são apenas duas maneiras de permitir que um usuário navegue pelos dados apresentados por um aplicativo. Outra técnica é usar a navegação por pilha. Cada tipo de navegação é adequado para diferentes tipos de relacionamentos entre páginas.
Você pode usar a navegação por pilha em combinação com submenus e guias. Nesta unidade, examinaremos brevemente as diferenças entre navegação em guias e submenu e a navegação por pilha e, em seguida, aprenderemos a compilar aplicativos que combinam as duas técnicas.
Revisão de submenus e navegação de guias
Os submenus e a navegação em guias fornecem um mecanismo útil para permitir que o usuário selecione qual página exibir a qualquer momento. O usuário navega para uma página simplesmente selecionando a guia ou o item de submenu apropriado. Essa forma de navegação é útil para itens de dados que têm uma relação de par entre si. No aplicativo de astronomia, as páginas Sol, Lua e Sobre são todos pares; não há nenhuma relação direta entre eles.
No entanto, para dados hierárquicos, a navegação por pilha pode ser mais apropriada. A navegação por pilha permite que o usuário faça uma busca detalhada de uma série de páginas, em que a próxima página na pilha fornece uma exibição mais detalhada de um item selecionado na página anterior.
Considere o cenário a seguir.
Adicione uma nova página ao aplicativo de astronomia que exibe corpos astronômicos. Você deseja que o usuário toque em um desses objetos celestiais e exiba informações sobre ele. A página que lista os corpos astronômicos seria melhor apresentada em uma página da guia como um irmão das páginas da fase da lua e do nascer do sol. As informações detalhadas sobre o corpo astronômico são melhor apresentadas como uma série de etapas usando a navegação por pilha. Esse mecanismo também permite que o usuário retorne à página principal dos corpos celestes tocando em um botão Voltar.
Navegar com navegação por pilha
O Shell do .NET Multi-platform App UI (MAUI) inclui uma experiência de navegação baseada em URI que usa rotas para navegar até qualquer página no aplicativo, sem precisar seguir uma hierarquia de navegação definida. Além disso, ele também permite que você navegue para trás sem ter que visitar todas as páginas na pilha de navegação.
A classe Shell define as seguintes propriedades relacionadas à navegação:
BackButtonBehavior, do tipoBackButtonBehavior, uma propriedade anexada que define o comportamento do botão Voltar.CurrentItem, do tipoShellItem, o item atualmente selecionado.CurrentPage, do tipoPage, a página apresentada no momento.CurrentState, do tipoShellNavigationState, o estado de navegação atual doShell.Current, do tipoShell, um alias convertido em tipo paraApplication.Current.MainPage.
A navegação é executada pela invocação do método GoToAsync, da classe Shell.
Rotas
A navegação é executada em um aplicativo Shell especificando um URI para o qual navegar. Os URIs de navegação podem ter três componentes:
- Uma rota, que define o caminho para o conteúdo que existe como parte da hierarquia visual do Shell.
- Uma página. Páginas que não existem na hierarquia visual do Shell podem ser enviadas por push para a pilha de navegação de qualquer lugar dentro de um aplicativo shell. Por exemplo, uma página de detalhes não é definida na hierarquia visual do Shell, mas pode ser enviada por push para a pilha de navegação conforme necessário.
- Um ou mais parâmetros de consulta. Parâmetros de consulta são aqueles que podem ser passados para a página de destino durante a navegação.
Quando um URI de navegação incluir todos os três componentes, a estrutura será: //route/page?queryParameters
Registrar rotas
As rotas podem ser definidas em objetos FlyoutItem, TabBar, Tab e ShellContent por meio das propriedades Route:
<Shell ...>
<FlyoutItem ...
Route = "astronomy">
<ShellContent ...
Route="moonphase" />
<ShellContent ...
Route="sunrise" />
</FlyoutItem>
<FlyoutItem>
<ShellContent ...
Route="about" />
</FlyoutItem>
</Shell>
Para navegar até a rota moonphase, o URI de rota absoluto é //astronomy/moonphase
Registrar rotas de detalhes
No construtor Shell de subclasse, ou em qualquer outro local executado antes de uma rota ser invocada, você pode registrar explicitamente uma rota usando o método Routing.RegisterRoute para qualquer página de detalhes que não esteja representada na hierarquia visual do Shell.
Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
Para navegar até o AstronomicalBodyPage, é preciso invocar:
await Shell.Current.GoToAsync("astronomicalbodydetails");`
Navegação regressiva
A navegação regressiva pode ser executada especificando ".." como o argumento para o método GoToAsync:
await Shell.Current.GoToAsync("..");
Passando dados
Os dados primitivos podem ser passados como parâmetros de consulta baseados em cadeia de caracteres ao executar a navegação programática baseada em URI. Passe os dados anexando ? após uma rota, seguido de uma ID de parâmetro de consulta, =, e um valor:
string celestialName = "moon";
await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");
Neste exemplo, a rota é astronomicalbodydetails, o parâmetro é bodyName e o valor é da variável celestialName.
Recuperação dados
Os dados de navegação podem ser recebidos decorando a classe de recebimento com um QueryPropertyAttribute para cada parâmetro de consulta baseado em cadeia de caracteres e parâmetro de navegação baseado em objeto:
[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
string astroName;
public string AstroName
{
get => astroName;
set
{
astroName = value;
}
}
...
}
Neste exemplo, o primeiro argumento para QueryPropertyAttribute especifica o nome da propriedade que recebe os dados, com o segundo argumento especificando a ID do parâmetro.