如何在MAUI中实现登录后切换不同带标签栏的Shell页面？

核心思路 #

避免运行时直接替换App.MainPage（易引发Shell生命周期异常导致崩溃），推荐采用单一根Shell容器的方案：将登录页、主页、配送页都注册为根Shell的路由目标，其中主页和配送页作为独立的FlyoutItem（各自包含专属标签栏），通过Shell导航实现页面切换。

具体实现步骤 #

1. 配置根Shell作为App主页面

创建AppShell作为应用的根容器，包含登录页、主页标签栏、配送页标签栏的路由定义：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:pages="clr-namespace:YourApp.Pages"
       x:Class="YourApp.AppShell"
       FlyoutBehavior="Disabled"> <!-- 初始隐藏侧边栏，登录后开启 -->

    <!-- 登录页路由 -->
    <ShellContent Route="Login" ContentTemplate="{DataTemplate pages:LoginPage}" />

    <!-- 主页标签栏 -->
    <FlyoutItem Route="Main" Title="主页" Icon="home.png">
        <Tab Title="首页" Icon="home_tab.png">
            <ShellContent ContentTemplate="{DataTemplate pages:HomeTabPage}" />
        </Tab>
        <Tab Title="我的" Icon="profile_tab.png">
            <ShellContent ContentTemplate="{DataTemplate pages:ProfileTabPage}" />
        </Tab>
    </FlyoutItem>

    <!-- 配送页标签栏 -->
    <FlyoutItem Route="Delivery" Title="配送" Icon="delivery.png">
        <Tab Title="待配送" Icon="pending_tab.png">
            <ShellContent ContentTemplate="{DataTemplate pages:PendingDeliveryPage}" />
        </Tab>
        <Tab Title="已完成" Icon="completed_tab.png">
            <ShellContent ContentTemplate="{DataTemplate pages:CompletedDeliveryPage}" />
        </Tab>
    </FlyoutItem>

</Shell>

2. App启动时导航到登录页

在AppShell的构造函数中注册路由并默认导航到登录页：

public AppShell()
{
    InitializeComponent();
    // 注册页面路由
    Routing.RegisterRoute(nameof(LoginPage), typeof(LoginPage));
    Routing.RegisterRoute(nameof(HomeTabPage), typeof(HomeTabPage));
    Routing.RegisterRoute(nameof(PendingDeliveryPage), typeof(PendingDeliveryPage));

    // 启动后自动导航到登录页
    _ = NavigateToLogin();
}

private async Task NavigateToLogin()
{
    await Shell.Current.GoToAsync("//Login");
}

3. 登录成功后导航到主页

在登录页的登录按钮点击事件中，验证通过后导航到主页并开启侧边栏：

private async void OnLoginClicked(object sender, EventArgs e)
{
    // 替换为实际的登录验证逻辑
    bool loginSuccess = ValidateCredentials();

    if (loginSuccess)
    {
        // 导航到主页标签栏
        await Shell.Current.GoToAsync("//Main");
        // 开启侧边栏（如需）
        Shell.Current.FlyoutBehavior = FlyoutBehavior.Flyout;
    }
}

4. 切换主页与配送页

在任意页面中，通过Shell导航指令切换标签栏：

// 切换到主页
await Shell.Current.GoToAsync("//Main");

// 切换到配送页
await Shell.Current.GoToAsync("//Delivery");

备选方案（独立Shell实例） #

若必须使用两个完全独立的Shell（如配置差异极大），需先销毁当前Shell资源再替换MainPage，避免内存泄漏或崩溃：

// 切换到主页Shell
private void SwitchToMainShell()
{
    if (MainPage is Shell currentShell)
    {
        currentShell.Dispose();
    }
    MainPage = new MainShell();
}

// 切换到配送页Shell
private void SwitchToDeliveryShell()
{
    if (MainPage is Shell currentShell)
    {
        currentShell.Dispose();
    }
    MainPage = new DeliveryShell();
}

注意：此方案需谨慎处理Shell生命周期，优先推荐单一根Shell的实现方式。

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