使用 .NET MAUI Shell 实现选项卡导航

已完成

选项卡导航是一种导航模式,其中选项卡条(一行可触摸控件)永久显示在屏幕的顶部或底部。 选项卡导航提供了一种机制,使用户可以在多页应用中的页面之间进行选择。

本单元介绍如何创建实现选项卡导航的应用。

什么是选项卡导航?

在使用选项卡导航的应用中,每个选项卡都表示应用的特定部分或页面。 用户选择选项卡条中的选项卡可在应用的内容之间移动。 例如,下图显示了在 iOS 时钟应用中使用选项卡导航。 通过页面底部突出显示的图标,可以在不同视图之间切换。 这些图标对应于选项卡,视图为选项卡页:

iOS Clock 应用的屏幕截图,显示包含各种与时间相关的选项卡的底部选项卡栏:世界时钟、警报、就寝时间、秒表和计时器。

由于选项卡条总是可见,选项卡导航允许用户在应用的内容之间快速切换。 当应用程序有多个用户可能经常使用的部分时,选项卡导航是理想的选择。 时钟应用程序就是一个很好的例子。 时钟、闹钟和秒表部分很可能经常使用。

在移动设备上,选项卡条通常空间有限,只能显示固定数量的选项卡,具体取决于设备大小和方向。 建议仅使用三到四个选项卡。 如果包含更多选项卡,则无法保证有足够的空间显示所有设备上的所有选项卡。 .NET MAUI 支持的操作系统确实考虑到了溢出区域。 此区域提供了更多的区域供用户访问屏幕上无法显示的选项卡。 但是,导航到这些溢出选项卡需要用户执行额外的步骤。 这些部分不易被发现。

如果你需要四个以上的选项卡,请考虑使用其他导航模式,例如浮出控件项导航。 此外,如果数据形成了天然的母版-详细信息层次结构,则选项卡导航不是最佳选择。 在这些情况下,应考虑堆栈导航。

.NET MAUI 应用中的选项卡导航

可使用 TabBar 对象在 .NET MAUI shell 应用中实现选项卡导航。 TabBar 对象显示一组选项卡,可在用户选择选项卡时自动切换显示的内容。下图显示了 UI 区域。

此图显示了一个示例选项卡式页,其中有一个内容区域和一个包含三个子页面的底部选项卡栏:地球、指南针和地图。

若要在 .NET MAUI Shell 应用程序中使用选项卡,请创建 TabBar 类的一个实例作为 Shell 类的子级。 然后将 Tab 对象添加到 TabBar。 在 Tab 对象中,ShellContent 对象应设置为 ContentPage 对象。

创建 TabbedPage

可以创建一个 TabBar 实例作为 Shell 类的子级。 根据需要将 Tab 对象作为子级添加到 TabBar。 在 Tab 对象中,ShellContent 对象应设置为 ContentPage 对象。

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <TabBar>
       <Tab Title="Moon Phase"
            Icon="moon.png">
           <ShellContent ContentTemplate="{DataTemplate local:MoonPhasePage}" />
       </Tab>
       <Tab Title="Sunrise"
            Icon="sun.png">
           <ShellContent ContentTemplate="{DataTemplate local:SunrisePage}" />
       </Tab>
    </TabBar>
</Shell>

浮出控件菜单中的选项卡

浮出控件项可以打开一个页面,其中包含显示一个或多个选项卡的选项卡栏。

若要实现此设计,请在要显示的每个选项卡的 <FlyoutItem> 中添加一个 <ShellContent> 项。

<ShellContent> 上设置 TitleIcon 以控制选项卡的标题和图标。

<FlyoutItem Title="Astronomy" Icon="moon.png">
    <ShellContent Title="Moon Phase" Icon="moon.png"
        ContentTemplate="{DataTemplate local:MoonPhasePage}"/>

    <ShellContent Title="Sunrise" Icon="sun.png"
        ContentTemplate="{DataTemplate local:SunrisePage}"/>
</FlyoutItem>

<FlyoutItem Title="About" Icon="question.png">
    <ShellContent
        ContentTemplate="{DataTemplate local:AboutPage}"/>
</FlyoutItem>
1.

在什么情况下,选项卡导航是应用的不错选择?