Nawigacja

Platforma .NET MAUI obejmuje obsługę nawigacji między stronami, która zwykle wynika z interakcji użytkownika z interfejsem użytkownika lub z samej aplikacji w wyniku wewnętrznych zmian stanu logiki. Jednak nawigacja może być złożona w celu zaimplementowania w aplikacjach korzystających ze wzorca Model-View-ViewModel (MVVM), ponieważ muszą zostać spełnione następujące wyzwania:

• Identyfikowanie widoku do przejścia do metody, która nie wprowadza ścisłego sprzęgania i zależności między widokami.
• Koordynowanie procesu, za pomocą którego widok ma zostać przeniesiony, jest tworzone i inicjowane. W przypadku korzystania z maszyny WIRTUALNEJ MVVM należy utworzyć wystąpienie i skojarzyć go ze sobą za pośrednictwem kontekstu powiązania widoku. Gdy aplikacja korzysta z kontenera iniekcji zależności, tworzenie wystąpień widoków i modeli widoków może wymagać określonego mechanizmu konstrukcji.
• Niezależnie od tego, czy ma być wykonywana nawigacja typu "pierwszy widok", czy "view-model-first". W przypadku nawigacji po pierwszym widoku strona do przejścia odwołuje się do nazwy typu widoku. Podczas nawigacji określony widok jest tworzone razem z odpowiadającym mu modelem widoków i innymi usługami zależnymi. Alternatywną metodą jest użycie nawigacji typu view-model-first, w której strona do przejścia odwołuje się do nazwy typu modelu widoku.
• Określanie sposobu czystego oddzielenia zachowania nawigacji aplikacji między widokami i modelami widoków. Wzorzec MVVM oddziela interfejs użytkownika aplikacji oraz jego prezentację i logikę biznesową, ale nie zapewnia bezpośredniego mechanizmu wiązania ich ze sobą. Jednak zachowanie nawigacji aplikacji często obejmuje interfejs użytkownika i części prezentacji aplikacji. Użytkownik często inicjuje nawigację z widoku, a widok zostanie zastąpiony w wyniku nawigacji. Jednak nawigacja może być często konieczna lub skoordynowana z poziomu modelu widoku.
• Określanie sposobu przekazywania parametrów podczas nawigacji na potrzeby inicjowania. Jeśli na przykład użytkownik przejdzie do widoku w celu zaktualizowania szczegółów zamówienia, dane zamówienia będą musiały zostać przekazane do widoku, aby można było wyświetlić poprawne dane.
• Koordynowanie nawigacji w celu zapewnienia przestrzegania określonych reguł biznesowych. Na przykład użytkownicy mogą być monitowani przed przejściem z widoku, aby poprawić wszelkie nieprawidłowe dane lub poprosić o przesłanie lub odrzucenie wszelkich zmian danych wprowadzonych w widoku.

W tym rozdziale przedstawiono te wyzwania, przedstawiając klasę usługi nawigacji o nazwie MauiNavigationService , która służy do przeprowadzania nawigacji po pierwszej stronie w modelu widoku.

Nawigowanie między stronami

Logika nawigacji może znajdować się w kodzie widoku lub modelu widoku powiązanego z danymi. Umieszczenie logiki nawigacji w widoku może być najprostszym podejściem, ale nie można go łatwo przetestować za pomocą testów jednostkowych. Umieszczenie logiki nawigacji w klasach modelu widoku oznacza, że logikę można zweryfikować za pomocą testów jednostkowych. Ponadto model widoków może następnie zaimplementować logikę w celu kontrolowania nawigacji w celu zapewnienia, że niektóre reguły biznesowe są wymuszane. Na przykład aplikacja może nie zezwalać użytkownikowi na odejście od strony bez uprzedniego upewnienia się, że wprowadzone dane są prawidłowe.

Usługa nawigacji jest zwykle wywoływana z modeli widoków w celu promowania możliwości testowania. Jednak przejście do widoków z modeli widoków wymaga, aby modele widoku odwoływały się do widoków, a szczególnie widoków, z którymi nie jest skojarzony aktywny model widoku, co nie jest zalecane. W związku z MauiNavigationService tym przedstawiony tutaj określa typ modelu widoku jako element docelowy do przejścia.

Aplikacja wieloplatformowa MauiNavigationService eShop używa klasy , aby zapewnić nawigację typu "model-pierwszy". Ta klasa implementuje INavigationService interfejs pokazany w poniższym przykładzie kodu:

public interface INavigationService
{
    Task InitializeAsync();

    Task NavigateToAsync(string route, IDictionary<string, object> routeParameters = null);

    Task PopAsync();
}

Ten interfejs określa, że klasa implementowania musi zapewnić następujące metody:

Tworzenie wystąpienia usługi MauiNavigationService

Klasa MauiNavigationService , która implementuje INavigationService interfejs, jest rejestrowana jako pojedyncza z kontenerem iniekcji zależności w metodzie MauiProgram.CreateMauiApp() , jak pokazano w poniższym przykładzie kodu:

mauiAppBuilder.Services.AddSingleton<INavigationService, MauiNavigationService>();

Interfejs INavigationService można następnie rozwiązać, dodając go do konstruktora naszych widoków i modeli widoków, jak pokazano w poniższym przykładzie kodu:

public AppShell(INavigationService navigationService)

Spowoduje to zwrócenie odwołania do MauiNavigationService obiektu przechowywanego w kontenerze wstrzykiwania zależności.

Klasa ViewModelBase przechowuje MauiNavigationService wystąpienie we NavigationService właściwości typu INavigationService. W związku z tym wszystkie klasy modelu widoku, które pochodzą z ViewModelBase klasy, mogą używać NavigationService właściwości w celu uzyskania dostępu do metod określonych przez INavigationService interfejs.

Obsługa żądań nawigacji

Platforma .NET MAUI udostępnia wiele sposobów nawigowania w aplikacji. Tradycyjnym sposobem nawigowania jest użycie klasy , która implementuje hierarchiczne środowisko nawigacji, w którym użytkownik może poruszać się po stronach, do przodu i do tyłu zgodnie z NavigationPage potrzebami. Aplikacja eShop używa Shell składnika jako kontenera głównego dla aplikacji i jako hosta nawigacji. Aby uzyskać więcej informacji na temat nawigacji powłoki, zobacz Nawigacja powłoki w Centrum deweloperów firmy Microsoft.

Nawigacja jest wykonywana wewnątrz klas modelu widoków, wywołując jedną z NavigateToAsync metod, określając ścieżkę trasy dla strony, do której przechodzi się, jak pokazano w poniższym przykładzie kodu:

await NavigationService.NavigateToAsync("//Main");

Poniższy przykład kodu przedstawia metodę NavigateToAsync dostarczoną przez klasę MauiNavigationService :

public Task NavigateToAsync(string route, IDictionary<string, object> routeParameters = null)
{
    return
        routeParameters != null
            ? Shell.Current.GoToAsync(route, routeParameters)
            : Shell.Current.GoToAsync(route);
}

Kontrolka .NET MAUIShell jest już zaznajomiona z nawigacją opartą na trasach, więc NavigateToAsync metoda działa w celu maskowania tej funkcji. Metoda NavigateToAsync umożliwia określenie danych nawigacji jako argumentu przekazywanego do przechodzącego do modelu widoku, do którego zwykle jest używana do wykonywania inicjowania. Aby uzyskać więcej informacji, zobacz Przekazywanie parametrów podczas nawigacji.

Aby zarejestrować trasy dla MauiNavigationService elementu , musimy podać informacje o trasach z kodu XAML lub w kodzie. W poniższym przykładzie pokazano rejestrację tras za pomocą języka XAML.

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:eShop.Views"
    x:Class="eShop.AppShell">

    <!-- Omitted for brevity -->

    <FlyoutItem >
        <ShellContent x:Name="login" ContentTemplate="{DataTemplate views:LoginView}" Route="Login" />
    </FlyoutItem>

    <TabBar x:Name="main" Route="Main">
        <ShellContent Title="CATALOG" Route="Catalog" Icon="{StaticResource CatalogIconImageSource}" ContentTemplate="{DataTemplate views:CatalogView}" />
        <ShellContent Title="PROFILE" Route="Profile" Icon="{StaticResource ProfileIconImageSource}" ContentTemplate="{DataTemplate views:ProfileView}" />
    </TabBar>
</Shell>

W tym przykładzie obiekty interfejsu ShellContent użytkownika i TabBar ustawiają ich Route właściwość. Jest to preferowana metoda rejestrowania tras dla obiektów interfejsu użytkownika, które są kontrolowane przez Shellobiekt .

Jeśli mamy obiekty, które zostaną dodane do stosu nawigacji w późniejszym czasie, musimy dodać je za pomocą kodu. W poniższym przykładzie pokazano rejestrację tras w kodzie.

Routing.RegisterRoute("Filter", typeof(FiltersView));
Routing.RegisterRoute("Basket", typeof(BasketView));

W kodzie wywołamy Routing.RegisterRoute metodę , która przyjmuje nazwę trasy jako pierwszy parametr i typ widoku jako drugi parametr. Gdy model widoku używa NavigationService właściwości do nawigowania, obiekt aplikacji Shell będzie szukać zarejestrowanych tras i wypchnąć je do stosu nawigacji.

Po utworzeniu widoku i przejściu do ApplyQueryAttributes niej są wykonywane metody i InitializeAsync skojarzonego modelu widoku. Aby uzyskać więcej informacji, zobacz Przekazywanie parametrów podczas nawigacji.

Nawigowanie po uruchomieniu aplikacji

Po uruchomieniu Shell aplikacji obiekt jest ustawiany jako widok główny aplikacji. Po ustawieniu Shell element będzie używany do kontrolowania rejestracji tras i będzie obecny w katalogu głównym naszej aplikacji w przyszłości. Po utworzeniu Shell obiektu możemy poczekać, aż zostanie on dołączony do aplikacji przy użyciu OnParentSet metody , aby zainicjować naszą trasę nawigacji. Poniższy przykład kodu przedstawia tę metodę:

protected override async void OnParentSet()
{
    base.OnParentSet();

    if (Parent is not null)
    {
        await _navigationService.InitializeAsync();
    }
}

Metoda używa wystąpienia, którego INavigationService konstruktor jest dostarczany z iniekcji zależności i wywołuje jego InitializeAsync metodę.

Poniższy przykład kodu przedstawia implementację MauiNavigationService.InitializeAsync metody :

public Task InitializeAsync()
{
    return NavigateToAsync(string.IsNullOrEmpty(_settingsService.AuthAccessToken)
        ? "//Login"
        : "//Main/Catalog");
}

Trasa //Main/Catalog jest kierowana do adresu , jeśli aplikacja ma buforowany token dostępu, który jest używany do uwierzytelniania. //Login W przeciwnym razie trasa jest kierowana do.

Przekazywanie parametrów podczas nawigacji

Metoda NavigateToAsync określona przez INavigationService interfejs umożliwia określenie danych nawigacji jako IDictionary<string, object> danych przekazywanych do modelu widoku, do którego jest zwykle używana do inicjowania.

Na przykład ProfileViewModel klasa zawiera element OrderDetailCommand wykonywany, gdy użytkownik wybierze zamówienie na ProfileView stronie. Z kolei spowoduje to wykonanie OrderDetailAsync metody, która jest pokazana w poniższym przykładzie kodu:

private async Task OrderDetailAsync(Order order)
{
    if (order is null)
    {
        return;
    }

    await NavigationService.NavigateToAsync(
        "OrderDetail",
        new Dictionary<string, object>{ { "OrderNumber", order.OrderNumber } });
}

Ta metoda wywołuje nawigację OrderDetail do trasy, przekazując informacje o numerze zamówienia wybranej przez użytkownika. Gdy struktura wstrzykiwania zależności tworzy OrderDetailView element dla OrderDetail trasy wraz z klasą OrderDetailViewModel przypisaną do widoku BindingContext. Element OrderDetailViewModel ma dodany atrybut, który umożliwia odbieranie danych z usługi nawigacji, jak pokazano w poniższym przykładzie kodu.

[QueryProperty(nameof(OrderNumber), "OrderNumber")]
public class OrderDetailViewModel : ViewModelBase
{
    public int OrderNumber { get; set; }
}

Atrybut QueryProperty umożliwia nam podanie parametru właściwości do mapowania wartości na i klucza w celu znalezienia wartości ze słownika parametrów zapytania. W tym przykładzie podczas wywołania NavigateToAsync podano klucz "OrderNumber" i wartość numeru zamówienia. Model widoku znalazł klucz "OrderNumber" i zamapował wartość na OrderNumber właściwość. Właściwość OrderNumber można następnie użyć później, aby pobrać pełne szczegóły zamówienia z OrderService wystąpienia.

Wywoływanie nawigacji przy użyciu zachowań

Nawigacja jest zwykle wyzwalana z widoku przez interakcję użytkownika. Na przykład funkcja LoginView wykonuje nawigację po pomyślnym uwierzytelnieniu. Poniższy przykład kodu pokazuje, jak nawigacja jest wywoływana przez zachowanie:

<WebView>
    <WebView.Behaviors>
        <behaviors:EventToCommandBehavior
            EventName="Navigating"
            EventArgsConverter="{StaticResource WebNavigatingEventArgsConverter}"
            Command="{Binding NavigateCommand}" />
    </WebView.Behaviors>
</WebView>

W czasie wykonywania obiekt EventToCommandBehavior będzie reagować na interakcję z elementem WebView. Po przejściu WebView do strony Navigating internetowej zdarzenie zostanie wyzwolony, co spowoduje wykonanie w NavigateCommandLoginViewModel. Domyślnie argumenty zdarzeń dla zdarzenia są przekazywane do polecenia . Te dane są konwertowane, ponieważ są przekazywane między źródłem i obiektem docelowym przez konwerter określony we EventArgsConverter właściwości , która zwraca wartość Url z WebNavigatingEventArgs. W związku z tym po wykonaniu NavigationCommandUrl strony internetowej jest przekazywany jako parametr do zarejestrowanej akcji.

Z kolei NavigationCommand metoda wykonuje metodę NavigateAsync , która jest wyświetlana w poniższym przykładzie kodu:

private async Task NavigateAsync(string url)
{
    // Omitted for brevity.
    if (!string.IsNullOrWhiteSpace(accessToken))
    {
        _settingsService.AuthAccessToken = accessToken;
        _settingsService.AuthIdToken = authResponse.IdentityToken;
        await NavigationService.NavigateToAsync("//Main/Catalog");
    }
}

Ta metoda wywołuje NavigationService kierowanie aplikacji do //Main/Catalog trasy.

Potwierdzanie lub anulowanie nawigacji

Aplikacja może wymagać interakcji z użytkownikiem podczas operacji nawigacji, aby użytkownik mógł potwierdzić lub anulować nawigację. Może to być konieczne, na przykład gdy użytkownik spróbuje przejść przed pełnym ukończeniem strony wprowadzania danych. W takiej sytuacji aplikacja powinna podać powiadomienie, które umożliwia użytkownikowi przejście z dala od strony lub anulowanie operacji nawigacji przed jej wystąpieniem. Można to osiągnąć w klasie modelu widoków przy użyciu odpowiedzi z powiadomienia w celu kontrolowania, czy jest wywoływana nawigacja.

Podsumowanie

Platforma .NET MAUI obejmuje obsługę nawigacji między stronami, która zwykle wynika z interakcji użytkownika z interfejsem użytkownika lub z samej aplikacji w wyniku wewnętrznych zmian stanu logiki. Jednak nawigacja może być złożona do zaimplementowania w aplikacjach korzystających ze wzorca MVVM.

W tym rozdziale przedstawiono klasę NavigationService, która służy do wykonywania nawigacji typu "widok-model pierwszy" z modeli widoków. Umieszczenie logiki nawigacji w klasach modelu widoku oznacza, że logikę można wykonywać za pomocą testów automatycznych. Ponadto model widoków może następnie zaimplementować logikę w celu kontrolowania nawigacji w celu zapewnienia, że niektóre reguły biznesowe są wymuszane.