如何将TabBar推入MAUI Shell导航栈并返回MainPage？

我希望在MainPage中把TabBar推入导航栈，使其带有返回MainPage的返回按钮。

我的AppShell.xaml代码如下：

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:localize="clr-namespace:MyApp.Resources.Strings"
    xmlns:local="clr-namespace:MyApp.Views"
    xmlns:system="clr-namespace:System;assembly=mscorlib"
    xmlns:xct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
    Shell.FlyoutHeaderBehavior="Default"
    Shell.FlyoutBehavior="Disabled"
    >

    <TabBar Route="SomeTabPage" x:Name="SomeTabBar">
            
        <Tab Route="OverviewTab" Title="{x:Static localize:Lang.Overview}" x:Name="OverviewTab">
            <ShellContent Route="OverviewPage"
                          ContentTemplate="{DataTemplate local:OverviewPage}"
                          />
        </Tab>
        <Tab Title="{x:Static localize:Lang.Alerts}" x:Name="AlertsTab">
            <ShellContent Route="AlertsPage"
                          ContentTemplate="{DataTemplate local:AlertsPage}"
            />
        </Tab>
    </TabBar>

    <ShellContent
        Route="MainPage"
        ContentTemplate="{DataTemplate local:MainPage}"
        FlyoutItemIsVisible="False" 
        />

</Shell>

AppShell.xaml.cs中注册了以下路由：

Routing.RegisterRoute("ServiceAdvisorTabBar", typeof(TabBar));
Routing.RegisterRoute("OverviewPageWithTabs", typeof(OverviewPage));

我尝试了两种导航方式：

• 推送OverviewTab到导航栈：

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

结果：仅显示单个OverviewPage，没有标签栏。

• 推送TabBar的路由"ServiceAdvisorTabBar"：

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

结果：程序崩溃，抛出System.NullReferenceException异常：

0xFFFFFFFFFFFFFFFF in Android.Runtime.RuntimeNativeMethods.monodroid_debugger_unhandled_exception   C#
0x1A in Android.Runtime.JNINativeWrapper._unhandled_exception at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:13,5 C#
0x1D in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:27,26    C#
0x17 in System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw    C#
0x6 in System.Threading.Tasks.Task.<>c.<ThrowAsync>b__128_0 C#
0xC in Android.App.SyncContext. at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.App/SyncContext.cs:36,19 C#
0xE in Java.Lang.Thread.RunnableImplementor.Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Java.Lang/Thread.cs:36,6 C#
0x8 in Java.Lang.IRunnableInvoker.n_Run at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/obj/Release/net8.0/android-34/mcw/Java.Lang.IRunnable.cs:84,4    C#
0x8 in Android.Runtime.JNINativeWrapper.Wrap_JniMarshal_PP_V at /Users/runner/work/1/s/xamarin-android/src/Mono.Android/Android.Runtime/JNINativeWrapper.g.cs:26,5  C#

请问是否存在将TabBar推送到MainPage上方的可行方法？

可行解决方案 #

方案1：将TabBar嵌入ContentPage后导航 #

Shell不支持直接推送TabBar实例到导航栈，需将TabBar包裹在ContentPage中：

1. 创建TabContainerPage，嵌入TabBar：

<?xml version="1.0" encoding="UTF-8" ?>
<ContentPage
    x:Class="MyApp.Views.TabContainerPage"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:localize="clr-namespace:MyApp.Resources.Strings"
    xmlns:local="clr-namespace:MyApp.Views">

    <TabBar>
        <Tab Title="{x:Static localize:Lang.Overview}">
            <ShellContent ContentTemplate="{DataTemplate local:OverviewPage}" />
        </Tab>
        <Tab Title="{x:Static localize:Lang.Alerts}">
            <ShellContent ContentTemplate="{DataTemplate local:AlertsPage}" />
        </Tab>
    </TabBar>

</ContentPage>

2. 在AppShell.xaml.cs中注册路由：

Routing.RegisterRoute("TabContainerPage", typeof(TabContainerPage));

3. 在MainPage中导航到该容器页：

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

此时TabBar会显示在MainPage上方，自动带有返回按钮。

方案2：调整Shell嵌套导航结构 #

修改AppShell布局，将TabBar设为可导航的子节点：

1. 修改AppShell.xaml：

<Shell
    x:Class="MyApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:localize="clr-namespace:MyApp.Resources.Strings"
    xmlns:local="clr-namespace:MyApp.Views"
    Shell.FlyoutBehavior="Disabled">

    <ShellContent Route="MainPage" ContentTemplate="{DataTemplate local:MainPage}" />

    <FlyoutItem Route="SomeTabPage" FlyoutItemIsVisible="False">
        <TabBar>
            <Tab Title="{x:Static localize:Lang.Overview}">
                <ShellContent ContentTemplate="{DataTemplate local:OverviewPage}" />
            </Tab>
            <Tab Title="{x:Static localize:Lang.Alerts}">
                <ShellContent ContentTemplate="{DataTemplate local:AlertsPage}" />
            </Tab>
        </TabBar>
    </FlyoutItem>

</Shell>

2. 移除错误的TabBar类型路由注册：

// 删除此行：Routing.RegisterRoute("ServiceAdvisorTabBar", typeof(TabBar));

3. 在MainPage中导航到TabBar路由：

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

这种方式利用Shell的嵌套导航机制，让TabBar成为可导航节点，同时保留返回栈。

关键注意事项 #

• 禁止直接注册TabBar类型的路由，Shell不支持直接导航到TabBar实例。
• 导航时优先使用相对路由（不带/前缀），避免破坏返回栈结构。

内容的提问来源于stack exchange，提问作者Chuck Krutsinger