.NET MAUI实现Flyout菜单与底部固定Tab始终显示的问题

要实现所有页面始终显示固定底部Tab和Flyout菜单，核心是打破默认Shell的"TabBar绑定单个FlyoutItem"的限制，把TabBar提升为全局导航组件，而非嵌套在某个FlyoutItem下。

具体实现步骤 #

1. 调整Shell结构
   将底部Tab对应的页面放在根级别的TabBar节点中，而非嵌套在FlyoutItem内；然后单独定义所有Flyout菜单项（包括非Tab页面和功能菜单）。

2. 完整XAML示例

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:YourAppName"
       FlyoutBehavior="Flyout"
       Title="YourApp">

    <!-- 全局固定底部TabBar -->
    <TabBar>
        <Tab Title="首页" Icon="home_icon.png">
            <ShellContent ContentTemplate="{DataTemplate local:DashboardPage}" />
        </Tab>
        <Tab Title="会话" Icon="sessions_icon.png">
            <ShellContent ContentTemplate="{DataTemplate local:SessionsPage}" />
        </Tab>
        <Tab Title="通知" Icon="notifications_icon.png">
            <ShellContent ContentTemplate="{DataTemplate local:NotificationsPage}" />
        </Tab>
        <Tab Title="我的" Icon="profile_icon.png">
            <ShellContent ContentTemplate="{DataTemplate local:ProfilePage}" />
        </Tab>
    </TabBar>

    <!-- Flyout菜单：包含非Tab页面和功能项 -->
    <FlyoutItem Title="关于应用" Icon="info_icon.png">
        <ShellContent ContentTemplate="{DataTemplate local:InfoPage}" />
    </FlyoutItem>
    <FlyoutItem Title="系统设置" Icon="settings_icon.png">
        <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}" />
    </FlyoutItem>
    <MenuItem Text="退出登录" Icon="logout_icon.png" Command="{Binding LogoutCommand}" />
</Shell>

关键说明 #

• 全局TabBar：根级TabBar属于整个Shell实例，无论切换到哪个FlyoutItem对应的页面，底部Tab都会保持可见。
• Flyout菜单独立性：所有FlyoutItem和MenuItem独立于TabBar存在，点击后正常导航，且TabBar不消失。
• 页面生命周期优化：所有ShellContent使用ContentTemplate而非直接实例化页面，确保Shell正确管理页面的创建与销毁。
• 临时隐藏TabBar（可选）：如果个别页面需要隐藏TabBar，只需在该页面的XAML中添加Shell.TabBarIsVisible="False"即可。

为什么原方案失效？ #

默认Shell中，TabBar是嵌套在FlyoutItem内部的，仅当该FlyoutItem处于激活状态时才会显示TabBar；切换到其他FlyoutItem时，Shell会自动隐藏当前FlyoutItem关联的TabBar。将TabBar提升到根级别后，就脱离了单个FlyoutItem的绑定，实现全局可见。

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