如何为TabBar中的Tab设置点击事件以切换Shell内的TabBar

核心问题分析 #

你之前通过跳转中间页面（toHomeShell）再导航到目标TabBar的方案，会额外触发页面实例化、渲染和导航流程，导致速度慢且代码冗余。正确的做法是直接操作Shell的TabBar或其容器状态，避免不必要的页面开销。

实现方案 #

方案1：直接切换TabBar的可见性与选中状态 #

先在Shell的XAML中定义两个TabBar，设置好路由和名称：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourApp.MainShell">

    <!-- 主TabBar -->
    <TabBar x:Name="MainTabBar" Route="main">
        <ShellContent Title="На главную" 
                      Icon="Images/ChatsPage/main_page.svg">
            <!-- 首页内容页面 -->
        </ShellContent>
        <!-- 用于切换的Tab -->
        <ShellContent Title="切换到会话" 
                      Icon="switch_icon.svg"
                      Clicked="OnSwitchToSessionTabClicked" />
    </TabBar>

    <!-- 会话TabBar（初始隐藏） -->
    <TabBar x:Name="SessionTabBar" 
            Route="session" 
            IsVisible="False">
        <ShellContent Title="会话1" 
                      Icon="session1.svg">
            <!-- 会话1内容页面 -->
        </ShellContent>
        <ShellContent Title="会话2" 
                      Icon="session2.svg">
            <!-- 会话2内容页面 -->
        </ShellContent>
    </TabBar>
</Shell>

然后在Shell的代码后台实现点击事件：

private void OnSwitchToSessionTabClicked(object sender, EventArgs e)
{
    // 隐藏主TabBar，显示会话TabBar
    MainTabBar.IsVisible = false;
    SessionTabBar.IsVisible = true;
    
    // 自动选中会话TabBar的第一个项
    SessionTabBar.CurrentItem = SessionTabBar.Items[0];
}

方案2：切换Shell的CurrentItem（更简洁） #

如果把两个TabBar放在FlyoutItem中，可以直接切换Shell的CurrentItem来切换整个TabBar容器：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="YourApp.MainShell">

    <FlyoutItem x:Name="MainFlyout" Title="主界面">
        <TabBar>
            <ShellContent Title="На главную" 
                          Icon="Images/ChatsPage/main_page.svg">
                <!-- 首页内容页面 -->
            </ShellContent>
            <ShellContent Title="切换到会话" 
                          Icon="switch_icon.svg"
                          Clicked="OnSwitchToSessionFlyoutClicked" />
        </TabBar>
    </FlyoutItem>

    <FlyoutItem x:Name="SessionFlyout" Title="会话界面">
        <TabBar>
            <ShellContent Title="会话1" 
                          Icon="session1.svg">
                <!-- 会话1内容页面 -->
            </ShellContent>
            <ShellContent Title="会话2" 
                          Icon="session2.svg">
                <!-- 会话2内容页面 -->
            </ShellContent>
        </TabBar>
    </FlyoutItem>
</Shell>

后台代码：

private void OnSwitchToSessionFlyoutClicked(object sender, EventArgs e)
{
    // 直接切换Shell的当前项为会话FlyoutItem
    Shell.Current.CurrentItem = SessionFlyout;
}

方案3：MVVM架构下的命令绑定（最优雅） #

如果项目使用MVVM模式，可通过绑定命令实现无代码后台交互：

1. 在ViewModel中定义切换命令：

using System.Windows.Input;
using Microsoft.Maui.Controls;
using System.Linq;

public class MainShellViewModel
{
    public ICommand SwitchToSessionTabCommand => new Command(() =>
    {
        var shell = Shell.Current;
        // 通过路由找到对应的TabBar
        var mainTabBar = shell.Items.OfType<TabBar>().First(t => t.Route == "main");
        var sessionTabBar = shell.Items.OfType<TabBar>().First(t => t.Route == "session");

        mainTabBar.IsVisible = false;
        sessionTabBar.IsVisible = true;
        sessionTabBar.CurrentItem = sessionTabBar.Items[0];
    });
}

2. 在Shell的XAML中绑定ViewModel并关联命令：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:vm="clr-namespace:YourApp.ViewModels"
       x:Class="YourApp.MainShell">

    <Shell.BindingContext>
        <vm:MainShellViewModel />
    </Shell.BindingContext>

    <TabBar Route="main">
        <ShellContent Title="На главную" 
                      Icon="Images/ChatsPage/main_page.svg">
            <!-- 首页内容页面 -->
        </ShellContent>
        <ShellContent Title="切换到会话" 
                      Icon="switch_icon.svg"
                      Command="{Binding SwitchToSessionTabCommand}" />
    </TabBar>

    <TabBar Route="session" IsVisible="False">
        <!-- 会话TabBar内容 -->
    </TabBar>
</Shell>

为什么之前的方案慢？ #

你之前创建的toHomeShell中间页面，额外触发了页面实例化、渲染和导航跳转流程，这些操作会带来不必要的性能开销。上面的方案直接操作Shell的内置组件状态，没有额外页面创建，因此速度更快、代码更简洁。

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