Использование страниц с вкладками вместе со страницами в стеке навигации

  • 5 мин

Навигация по всплывающим элементам и вкладкам — это лишь два из тех способов, которые доступны пользователю для перемещения по данным в приложении. Другой важный способ — навигация по стеку. Разные типы навигации лучше подходят для разных типов связей между страницами.

Вы можете использовать навигацию по стеку в сочетании с всплывающих меню и вкладками. В этом уроке мы кратко рассмотрим различия между навигацией по вкладкам и всплывающему элементу навигации и навигацией по стеку, а затем узнайте, как создавать приложения, которые объединяют оба метода.

Просмотр всплывающих меню и навигации по вкладкам

Навигация по всплывающим элементам и вкладкам предоставляют пользователю удобный механизм для выбора нужной страницы в любое время. Чтобы открыть страницу, он просто выбирает соответствующую вкладку или всплывающий элемент. Такая форма навигации полезна для элементов данных, которые находятся на одном уровне иерархии. Например, в астрономическом приложении страницы "Солнце", "Луна" и "О программе" находятся на одном уровне и между ними нет прямых зависимостей.

Однако для иерархических данных навигация по стеку может быть более подходящей. Навигация по стеку позволяет пользователю детализировать представление, открывая новые страницы в стеке, каждая из которых предоставляет больше сведений об элементе, выбранном на предыдущей странице.

Рассмотрим следующий сценарий:

Вы добавите новую страницу в приложение астрономии, которое отображает астрономические тела. Вы хотите, чтобы пользователь мог отобразить сведения о любом небесном теле, коснувшись его. Страницу со списком астрономических тел лучше всего разместить на такой же вкладке, как страницы с фазами луны и восходами. Подробные сведения об астрономическом теле лучше отображать в виде серии шагов детализации с навигацией по стеку. Этот механизм также позволяет пользователю вернуться на главную страницу астрономических тел, нажав кнопку назад.

Оболочка многоплатформенного пользовательского интерфейса приложений .NET (MAUI) включает интерфейс навигации на основе URI, использующий маршруты для перехода на любую страницу в приложении, не следуйте заданной иерархии навигации. Кроме того, он позволяет перемещаться назад, не посещая все страницы в стеке навигации.

Класс оболочки Shell определяет следующие свойства, связанные с навигацией:

  • BackButtonBehaviorс типом BackButtonBehavior — присоединяемое свойство, которое определяет поведение кнопки "Назад";
  • CurrentItem с типом ShellItem — обозначает текущий выбранный элемент;
  • CurrentPage с типом Page — обозначает текущую отображаемую страницу;
  • CurrentState с типом ShellNavigationState — текущее состояние навигации для Shell;
  • Current с типом Shell —псевдоним Application.Current.MainPage с приведением типа.

Навигация выполняется путем вызова метода GoToAsync из класса Shell.

Маршруты

Навигация в приложении с оболочкой Shell выполняется путем указания универсального кода ресурса (URI) для перехода. URI навигации могут содержать следующие три компонента:

  • Маршрут, который определяет путь к содержимому в составе визуальной иерархии оболочки Shell.
  • Страница. Страницы, которые отсутствуют в визуальной иерархии оболочки Shell, можно поместить в стек навигации из любого места в приложении. Например, страница сведений не определена в визуальной иерархии оболочки, но может быть отправлена в стек навигации по мере необходимости.
  • Один или несколько параметров запроса. Параметры запроса можно передать целевой странице при вызове метода навигации.

Если URI навигации содержит все три компонента, он имеет формат "//маршрут/страница?параметры".

Регистрация маршрутов

Маршруты можно определить в объектах FlyoutItem, TabBar, Tab и ShellContent, указывая для них свойство Route:

<Shell ...>
    <FlyoutItem ... 
        Route = "astronomy">
        <ShellContent ...
            Route="moonphase" />
        <ShellContent ...
            Route="sunrise" />
    </FlyoutItem>
    <FlyoutItem>
        <ShellContent ...
            Route="about" />
    </FlyoutItem>
</Shell>

Чтобы перейти к маршруту moonphase, используйте URI маршрута //astronomy/moonphase

Регистрация маршрутов для подробных сведений

В конструкторе Shell подклассов или любом другом расположении, которое выполняется перед вызовом маршрута, можно явно зарегистрировать маршрут с помощью Routing.RegisterRoute метода для любых страниц сведений, которые не представлены в визуальной иерархии оболочки.

Routing.RegisterRoute("astronomicalbodydetails", typeof(AstronomicalBodyPage));

Чтобы перейти к объекту AstronomicalBodyPage, необходимо вызвать:

await Shell.Current.GoToAsync("astronomicalbodydetails");`

Обратная навигация

Обратную навигацию можно выполнить, указав аргумент ".." в вызове метода GoToAsync:

await Shell.Current.GoToAsync("..");

Передача данных

Примитивные данные можно передать в виде строковых параметров запроса при выполнении программной навигации на основе URI. Передайте данные путем добавления ? после маршрута, за которым следует идентификатор параметра запроса, =а также значение:

string celestialName = "moon";

await Shell.Current.GoToAsync($"astronomicalbodydetails?bodyName={celestialName}");

В этом примере используются маршрут astronomicalbodydetails, параметр bodyName и значение, полученное из переменной celestialName.

Извлечение данных

Данные о навигации можно получить, присвоив целевому классу набор атрибутов QueryPropertyAttribute для каждого строкового параметра запроса и параметр навигации на основе объектов:

[QueryProperty(nameof(AstroName), "bodyName")]
public partial class AstronomicalBodyPage : ContentPage
{
    string astroName;
    public string AstroName
    {
        get => astroName;
        set
        {
            astroName = value;
        }
    }

    ...
}

В этом примере первый аргумент для QueryPropertyAttribute указывает имя свойства, получающего данные, со вторым аргументом, указывающим идентификатор параметра.