Usar páginas com guias com páginas na pilha de navegação
Submenu e 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 relações entre páginas.
Você pode usar a navegação de pilha em combinação com submenus e guias. Nesta unidade, analisamos brevemente as diferenças entre a navegação por tabulação e submenu e a navegação por pilha e, em seguida, aprendemos como criar aplicativos que combinam ambas as técnicas.
Revisão de submenus e navegação de guias
Submenus e navegação por guias fornecem um mecanismo útil para permitir que o usuário selecione qual página visualizar a qualquer momento. O usuário navega para uma página simplesmente selecionando a guia apropriada ou o item de submenu. Esta forma de navegação é útil para itens de dados que têm uma relação de pares entre si. No aplicativo de astronomia, as páginas Sol, Lua e Sobre são todos pares; não há 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 em uma série de páginas, onde a próxima página na pilha fornece uma visão mais detalhada de um item selecionado na página anterior.
Considere o seguinte cenário:
Você adicionou uma nova página ao aplicativo de astronomia que exibe corpos astronômicos. Você quer que o usuário toque em um desses objetos celestes e, em seguida, exiba informações sobre ele. A página listando os corpos astronômicos seria melhor apresentada em uma página de guia como um irmão da fase da lua e páginas 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. Este mecanismo também permite que o usuário retorne à página principal de corpos astronômicos tocando em um botão Voltar.
Navegar com navegação de pilha
.NET Multi-platform App UI (.NET MAUI) Shell inclui uma experiência de navegação baseada em URI que usa rotas para navegar para qualquer página no aplicativo, sem ter que seguir uma hierarquia de navegação definida. Além disso, ele 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 selecionado no momento.CurrentPage, do tipoPage, a página atualmente apresentada.CurrentState, do tipoShellNavigationState, o estado de navegação atual doShell.Current, do tipoShell, um alias fundido paraApplication.Current.MainPage.
A navegação é realizada invocando o GoToAsync método, a Shell partir da classe.
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. As páginas que não existem na hierarquia visual do Shell podem ser enviadas 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 empurrada para a pilha de navegação conforme necessário.
- Um ou mais parâmetros de consulta. Os parâmetros de consulta são parâmetros que podem ser passados para a página de destino durante a navegação.
Quando um URI de navegação inclui os três componentes, a estrutura é: //route/page?queryParameters
Registar rotas
As rotas podem ser definidas em FlyoutItem, , TabTabBare ShellContent objetos através de suas Route propriedades:
<Shell ...>
<FlyoutItem ...
Route = "astronomy">
<ShellContent ...
Route="moonphase" />
<ShellContent ...
Route="sunrise" />
</FlyoutItem>
<FlyoutItem>
<ShellContent ...
Route="about" />
</FlyoutItem>
</Shell>
Para navegar até a moonphase rota, o URI de rota absoluta é //astronomy/moonphase
Registar rotas detalhadas
No construtor de subclasse ou em qualquer outro local executado antes de Shell uma rota ser invocada, você pode registrar explicitamente uma rota usando o Routing.RegisterRoute método para quaisquer páginas de detalhes que não estejam representadas na hierarquia visual do Shell.
Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));
Para navegar até o AstronomicalBodyPage, pode-se então invocar:
await Shell.Current.GoToAsync("astronomicalbodydetails");`
Navegação para trás
A navegação para trás pode ser realizada especificando ".." como o argumento para o GoToAsync método:
await Shell.Current.GoToAsync("..");
Transmissão de 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, seguida por 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.
Recuperando 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 o QueryPropertyAttribute especifica o nome da propriedade que recebe os dados, com o segundo argumento especificando a ID do parâmetro.