MAUI Shell导航至TabBar页面并显示返回按钮的实现问题

我在使用MAUI Shell开发时，需要从Overview页面（ContentPage）导航到包含TabBar的Details页面，且希望该页面显示返回按钮。目前导航到TabBar页面时没有返回按钮，但导航到仅注册路由未在Shell可视化层级声明的TestPage时，返回按钮正常显示。根据文档说明：

When a route from the Shell visual hierarchy is navigated to, a navigation stack isn't created. However, when a page that's not in the Shell visual hierarchy is navigated to, a navigation stack is created.

相关代码如下：

AppShell.xaml #

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NavigationTests.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NavigationTests"
    Shell.FlyoutBehavior="Disabled">

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

    <TabBar Route="Details">

        <Tab Title="Inner Page 1">
            <ShellContent Title="Inner Page 1"
                          Route="InnerPage1">
                <ContentPage>
                    <VerticalStackLayout>
                        <Label 
                            Text="Inner Page 1"
                            VerticalOptions="Center" 
                            HorizontalOptions="Center" />
                    </VerticalStackLayout>
                </ContentPage>
            </ShellContent>
        </Tab>

        <Tab Title="Inner Page 2">
            <ShellContent Title="Inner Page 2"
                          Route="InnerPage2">
                <ContentPage>
                    <VerticalStackLayout>
                        <Label 
                            Text="Inner Page 2"
                            VerticalOptions="Center" 
                            HorizontalOptions="Center" />
                    </VerticalStackLayout>
                </ContentPage>
            </ShellContent>
        </Tab>

    </TabBar>

</Shell>

AppShell.xaml.cs #

public partial class AppShell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(TestPage), typeof(TestPage));
    }
}

Overview.xaml #

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="NavigationTests.Overview">

    <ScrollView>
        <VerticalStackLayout
            Spacing="25"
            Padding="30,0"
            VerticalOptions="Center">

            <Button
                Text="Details"
                Clicked="OnDetailsClicked"
                HorizontalOptions="Center" />

            <Button
                Text="Test Page"
                Clicked="OnTestPageClicked"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

Overview.xaml.cs #

public partial class Overview
{
    public Overview()
    {
        InitializeComponent();
    }

    private void OnDetailsClicked(object sender, EventArgs e)
    {
        Shell.Current.GoToAsync("//InnerPage1");
    }

    private void OnTestPageClicked(object sender, EventArgs e)
    {
        Shell.Current.GoToAsync("/TestPage");
    }
}

解决方案 #

方案一：将TabBar移出Shell可视化层级（Shell兼容方案） #

核心是不在AppShell的XAML中直接声明TabBar，而是把它作为独立组件通过路由注册，这样导航时会创建导航栈并显示返回按钮。

1. 创建独立的TabBar组件（命名为DetailsTabBar.xaml）

<?xml version="1.0" encoding="UTF-8" ?>
<TabBar xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="NavigationTests.DetailsTabBar"
        Route="Details">

    <Tab Title="Inner Page 1">
        <ShellContent Title="Inner Page 1"
                      Route="InnerPage1">
            <ContentPage>
                <VerticalStackLayout>
                    <Label 
                        Text="Inner Page 1"
                        VerticalOptions="Center" 
                        HorizontalOptions="Center" />
                </VerticalStackLayout>
            </ContentPage>
        </ShellContent>
    </Tab>

    <Tab Title="Inner Page 2">
        <ShellContent Title="Inner Page 2"
                      Route="InnerPage2">
            <ContentPage>
                <VerticalStackLayout>
                    <Label 
                        Text="Inner Page 2"
                        VerticalOptions="Center" 
                        HorizontalOptions="Center" />
                </VerticalStackLayout>
            </ContentPage>
        </ShellContent>
    </Tab>

</TabBar>

2. 修改AppShell.xaml，移除原有TabBar节点

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="NavigationTests.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:NavigationTests"
    Shell.FlyoutBehavior="Disabled">

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

</Shell>

3. 在AppShell.xaml.cs中注册TabBar路由

public partial class AppShell
{
    public AppShell()
    {
        InitializeComponent();
        Routing.RegisterRoute(nameof(TestPage), typeof(TestPage));
        // 注册TabBar路由
        Routing.RegisterRoute("Details", typeof(DetailsTabBar));
    }
}

4. 修改Overview页面的导航代码

private void OnDetailsClicked(object sender, EventArgs e)
{
    Shell.Current.GoToAsync("/Details");
}

方案二：不使用Shell，采用传统导航 #

改用MAUI原生的NavigationPage和TabbedPage组合，完全脱离Shell体系：

1. 修改App.xaml.cs，设置初始页面为带导航栈的Overview

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new NavigationPage(new Overview());
    }
}

2. 创建TabbedPage替代Shell TabBar（命名为DetailsPage.xaml）

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="NavigationTests.DetailsPage"
            Title="Details">

    <ContentPage Title="Inner Page 1">
        <VerticalStackLayout>
            <Label 
                Text="Inner Page 1"
                VerticalOptions="Center" 
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ContentPage>

    <ContentPage Title="Inner Page 2">
        <VerticalStackLayout>
            <Label 
                Text="Inner Page 2"
                VerticalOptions="Center" 
                HorizontalOptions="Center" />
        </VerticalStackLayout>
    </ContentPage>

</TabbedPage>

3. 修改Overview页面的导航代码

private void OnDetailsClicked(object sender, EventArgs e)
{
    Navigation.PushAsync(new DetailsPage());
}

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