如何将 TabBar 推入导航堆栈？

Question

从下面

MainPage

中定义的

AppShell.xaml

，我希望能够将

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

如果我在

MainPage

中放置一个按钮，将 OverviewTab 推到导航堆栈上，它没有选项卡，只有一个 OverviewPage：

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

如果我更改该按钮以推送“SomeTabPage”的

TabBar

路线，它会崩溃。

    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

上？

Answer 1

我检查了

Navigation.NavigationStack

，它是

IReadOnlyList<Page

>类型。因此您无法将 TabBar 推入导航堆栈。您只能推送内容页。

您可以使用弹出菜单进行导航。此外，您还可以使用以下代码通过标签栏从主页导航到概览页面。

Shell.Current.GoToAsync($"//{nameof(OverviewPage)}");

注意：请删除

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

并保留

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

您为同一页面声明了两个不同的路由。而且你应该只声明一次。请避免在 xaml 和后面的代码中注册相同的路由。

此外，通过这种方式导航将显示选项卡栏，但没有后退按钮。因为它们都是appshell的根页面。

Answer 2

我的结论是，没有办法将 TabBar 推送到导航堆栈上。 TabBar 项目只能在 AppShell.xaml 文件中定义为基础视图。因此，我能够导航到选项卡栏并将我自己的后退按钮放在 TitleView 上，这样它的行为就好像它被推动一样，但实际上是一个基本视图。