Använda flikar med sidor i navigeringsstacken

  • 5 minuter

Utfällt navigering och flikar är bara två sätt att göra det möjligt för en användare att navigera genom de data som presenteras av en app. En annan teknik är att använda stacknavigering. Varje typ av navigering passar för olika typer av relationer mellan sidor.

Du kan använda stacknavigering i kombination med utfällbara kommandon och flikar. I den här lektionen går vi kort igenom skillnaderna mellan tab- och utfällbara navigerings- och stacknavigering och lär oss sedan hur du skapar appar som kombinerar båda teknikerna.

Granskning av utfällbara flikar och fliknavigering

Utfällbara filer och fliknavigering ger en användbar mekanism för att göra det möjligt för användaren att välja vilken sida som ska visas samtidigt. Användaren navigerar till en sida genom att helt enkelt välja lämplig flik eller ett utfällt objekt. Den här typen av navigering är användbar för dataobjekt som har en peer-relation med varandra. I astronomiappen är sidorna Solen, Månen och Om alla peer-sidor. det finns ingen direkt relation mellan dem.

För hierarkiska data kan stacknavigering dock vara lämpligare. Med stacknavigering kan användaren öka detaljnivån för en serie sidor, där nästa sida i stacken ger en mer detaljerad vy över ett markerat objekt på föregående sida.

Föreställ dig följande scenario:

Du lägger till en ny sida i astronomiappen som visar astronomiska kroppar. Du vill att användaren ska trycka på ett av dessa himmelska objekt och sedan visa information om det. Sidan som listar de astronomiska kropparna skulle bäst presenteras på en fliksida som ett syskon till månfasen och soluppgångssidorna. Den detaljerade informationen om den astronomiska kroppen presenteras bättre som en serie steg med stacknavigering. Den här mekanismen gör det också möjligt för användaren att återgå till huvudsidan för astronomiska kroppar genom att trycka på en bakåtknapp.

.NET Multi-Platform App UI (MAUI) Shell innehåller en URI-baserad navigeringsupplevelse som använder vägar för att navigera till valfri sida i appen, utan att behöva följa en uppsättning navigeringshierarki. Dessutom kan du navigera bakåt utan att behöva besöka alla sidor i navigeringsstacken.

Klassen Shell definierar följande navigeringsrelaterade egenskaper:

  • BackButtonBehavior, av typen BackButtonBehavior, en bifogad egenskap som definierar beteendet för bakåtknappen.
  • CurrentItem, av typen ShellItem, det markerade objektet.
  • CurrentPage, av typen Page, den aktuella sidan.
  • CurrentState, av typen ShellNavigationState, det aktuella navigeringstillståndet för Shell.
  • Current, av typen Shell, ett typgjutet alias för Application.Current.MainPage.

Navigeringen utförs genom att metoden anropas GoToAsync från Shell klassen.

Vägar

Navigeringen utförs i en Shell-app genom att ange en URI att navigera till. Navigerings-URI:er kan ha tre komponenter:

  • En väg som definierar sökvägen till innehåll som finns som en del av den visuella Shell-hierarkin.
  • En sida. Sidor som inte finns i den visuella Shell-hierarkin kan skickas till navigeringsstacken var som helst i en Shell-app. En informationssida definieras till exempel inte i den visuella Shell-hierarkin, utan kan skickas till navigeringsstacken efter behov.
  • En eller flera frågeparametrar. Frågeparametrar är parametrar som kan skickas till målsidan när du navigerar.

När en navigerings-URI innehåller alla tre komponenterna är strukturen: //route/page?queryParameters

Registrera vägar

Vägar kan definieras för FlyoutItem, TabBar, Taboch ShellContent objekt via deras Route egenskaper:

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

Om du vill navigera till moonphase vägen är den absoluta väg-URI:n //astronomy/moonphase

Registrera informationsvägar

Shell I underklasskonstruktorn, eller någon annan plats som körs innan en väg anropas, kan du uttryckligen registrera en väg med hjälp Routing.RegisterRoute av metoden för alla detaljsidor som inte representeras i den visuella Shell-hierarkin.

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

Om du vill navigera till AstronomicalBodyPageanropar man sedan:

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

Bakåtriktad navigering

Bakåtnavigering kan utföras genom att ange ".." som argument för GoToAsync metoden:

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

Skicka data

Primitiva data kan skickas som strängbaserade frågeparametrar när du utför URI-baserad programmeringsnavigering. Skicka data genom att lägga till ? efter en väg, följt av ett frågeparameter-ID, =och ett värde:

string celestialName = "moon";

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

I det här exemplet är vägen astronomicalbodydetails, parametern är bodyName och värdet är från variabeln celestialName.

Hämtar data

Navigeringsdata kan tas emot genom att dekorera den mottagande klassen med en QueryPropertyAttribute för varje strängbaserad frågeparameter och objektbaserad navigeringsparameter:

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

    ...
}

I det här exemplet anger det första argumentet för QueryPropertyAttribute namnet på den egenskap som tar emot data, med det andra argumentet som anger parameter-ID.

Kontrollera dina kunskaper

1.

Hur skickar du data till en sida när du använder routningsbaserad navigering i .NET MAUI Shell?