将选项卡式页面与堆叠导航上的页面配合使用

  • 5 分钟

浮出控件和选项卡式导航是使用户能够浏览应用呈现的数据的两种方式。 另一种方法是使用堆叠导航。 每种类型的导航适合页面之间不同类型的关系。

可将堆叠导航与浮出控件和选项卡结合使用。 本单元简要回顾选项卡和浮出控件导航与堆叠导航之间的差别，然后介绍如何生成结合这两种方法的应用。

查看浮出控件和选项卡导航

浮出控件和选项卡导航提供有用的机制，使用户能够随时选择要查看的页面。 用户只需选择相应的选项卡或浮出控件项即可导航到某个页面。 这种导航形式对于相互建立了对等关系的数据项很有用。 在天文应用中，“太阳”、“月亮”和“关于”页面都是对等方；它们相互之间不存在直接的关系。

但是，对于分层数据，堆叠导航可能更合适。 堆叠导航使用户能够向下钻取一系列页面，堆叠中的下一页面提供上一页面上所选项的更详细视图。

假设出现了下面这种情景：

你在显示天体的天文应用中添加了一个新页面。 你希望用户点击其中一个天体时显示有关该天体的信息。 列出天体的页面最好在选项卡页面中作为月相和日出页面的同级呈现。 使用堆叠导航可以更好地将有关天体的详细信息作为一系列步骤呈现。 此机制还使用户能够通过点击后退按钮返回到天体主页面。

.NET 多平台应用 UI (MAUI) Shell 包含基于 URI 的导航体验，该体验使用路线导航到应用中的任何页面，而无需遵循设置的导航层次结构。 此外，它还支持向后导航，而无需访问堆叠导航上的所有页面。

Shell 类定义以下导航相关属性：

  • BackButtonBehavior，属于 BackButtonBehavior 类型，是用于定义“后退”按钮行为的附加属性。
  • CurrentItem 属于 ShellItem 类型，是当前选定的项。
  • CurrentPage 属于Page 类型，是当前显示的页面。
  • CurrentState 属于 ShellNavigationState 类型，是当前 Shell 的导航状态。
  • Current，属于 Shell 类型，是 Application.Current.MainPage 的类型转换别名。

导航是通过从 Shell 类调用 GoToAsync 方法来执行的。

路由

导航是在 Shell 应用中通过指定要导航到的 URI 执行的。 导航 URI 可以有三个组件：

  • 一个路由，它定义了作为 Shell 视觉层次结构的一部分存在的内容的路径。
  • 一个页。 Shell 视觉层次结构中不存在的页面可以从 Shell 应用中的任何位置推送到堆叠导航。 例如，详细信息页面不会在 Shell 视觉层次结构中定义，但可以根据需要推送到堆叠导航。
  • 一个或多个查询参数。 查询参数是可以在导航时传递到目标页的参数。

当导航 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 子类构造函数中或者在调用路线之前运行的任何其他位置，可为 Shell 可视化层次结构中未显示的任何详细信息页面使用 Routing.RegisterRoute 来显式注册路线。

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

若要导航到 AstronomicalBodyPage，请调用：

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

向后导航

向后导航可以通过将“..”指定为 GoToAsync 方法的参数来执行：

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

传递数据

执行基于 URI 的编程导航时，可将基元数据作为基于字符串的查询参数传递。 若要传递数据，请在路线后面追加 ?，后接查询参数 ID、= 和一个值：

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 的第一个参数指定将要接收数据的属性的名称，第二个参数指定参数 ID。

知识检查

1.

使用 .NET MAUI Shell 基于路线的导航时，如何将数据发送到页面？