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

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

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

什么是选项卡导航？

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

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

在移动设备上，选项卡条通常空间有限，只能显示固定数量的选项卡，具体取决于设备大小和方向。 建议仅使用三到四个选项卡。 如果包含更多选项卡，则无法保证有足够的空间显示所有设备上的所有选项卡。 .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>

浮出控件菜单中的选项卡

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

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

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

<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>