搭配使用索引標籤式頁面與導覽堆疊上的頁面
- 5 分鐘
飛出視窗和索引標籤式導覽只是讓使用者導覽應用程式所呈現資料的兩種方式。 另一種技巧是使用堆疊導覽。 每種導覽類型都適合頁面之間的不同關聯類型。
您可以使用堆疊導覽以結合飛出視窗和索引標籤。 在此單元中，我們將簡短地檢閱索引標籤和飛出視窗導覽與堆疊導覽之間的差異，然後了解如何建置合併這兩種技巧的應用程式。
檢閱飛出視窗和索引標籤導覽
飛出視窗和索引標籤導覽提供實用的機制，可讓使用者隨時選取要檢視的頁面。 使用者只要選取適當的索引標籤或飛出視窗項目，即可導覽至頁面。 這種導覽形式適用於彼此具有「對等」關係的資料項目。 在天文學應用程式中，[太陽]、[月亮] 和 [關於] 頁面都是對等項目；其間沒有直接關聯。
不過，針對階層式資料，堆疊導覽可能較為適合。 堆疊導覽可讓使用者「向下鑽研」一系列的頁面，其中，堆疊中的下一頁可提供上一頁所選取項目的更詳細檢視。
請參考下列案例：
您已將新頁面新增至顯示天體的天文學應用程式。 您想要使用者點選其中一個天體物件，然後顯示其相關資訊。 列出天體的頁面最好以月相和日出頁面的同層級呈現在索引標籤頁面中。 天體的詳細資訊最好是以使用堆疊導覽的一系列步驟來呈現。 此機制也可讓使用者點選 [返回] 按鈕，返回主要天體頁面。
使用堆疊導覽進行導覽
.NET 多平台應用程式 UI (MAUI) Shell 包括 URI 型導覽體驗，其使用路由來導覽至應用程式中的任何頁面，而不需要遵循已設定的導覽階層。 此外，這也可讓您往回導覽，而不需要造訪導覽堆疊上的所有頁面。
Shell 類別定義下列導覽相關屬性：
-
BackButtonBehavior(類型為BackButtonBehavior)：可定義上一頁按鈕行為的附加屬性。 -
CurrentItem(類型ShellItem)：目前選取的項目。 -
CurrentPage(類型為Page)：目前呈現的頁面。 -
CurrentState(類型為ShellNavigationState)：Shell的目前導覽狀態。 -
Current(類型為Shell)：Application.Current.MainPage的類型強制型轉別名。
導覽是透過從 GoToAsync 類別叫用 Shell 方法來執行。
路由
導覽透過指定要導覽的目標 URI，以在殼層應用程式中執行。 導覽 URL 可以有三個元件：
- 「路線」，定義作為殼層視覺階層中現有內容的路徑。
- 「頁面」。 您可以將殼層視覺階層中不存在的頁面從殼層應用程式的任何位置推入至導覽堆疊。 例如，詳細資料頁面未於殼層視覺階層定義，但可以視需要推送至導覽堆疊。
- 一或多個「查詢參數」。 查詢參數是可在導覽時傳遞至目的地頁面的參數。
導覽 URI 包括所有這三個元件時，結構為：//route/page?queryParameters
註冊路線
您可以透過 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 1，可以改為叫用：
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 的第一個引數指定將接收資料的屬性名稱，而第二個引數則指定參數識別碼。