MAUI AppShell：如何隐藏Flyout Item对应的首个Tab项？

我在AppShell.xaml中定义了带2个Tab的TabBar，还有一个设置了FlyoutDisplayOptions="AsSingleItem"的FlyoutItem，里面包含Settings、Home、Calculations三个ShellContent。现在从Flyout导航到Settings页面时，TabBar会自动显示Settings对应的Tab项，但我只想保留Home和Calculations的Tab，隐藏Settings的Tab。请问怎么用XAML或代码实现？

现有代码：

<TabBar>
    <Tab>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    </Tab>
    <Tab>
        <ShellContent Title="Calculations" ContentTemplate="{DataTemplate views:Calculations}" Route="Calculations"/>
    </Tab>
</TabBar>

<FlyoutItem Title="Settings" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Title="Settings" ContentTemplate="{DataTemplate views:Settings}" Route="Settings"/>
    <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    <ShellContent Title="Calculations" ContentTemplate="{DataTemplate views:Calculations}" Route="Calculations"/>
</FlyoutItem>

最优方案：调整XAML结构+页面属性设置 #

核心思路是把Settings页面从TabBar的关联层级中剥离，同时强制在Settings页面显示原有TabBar：

1. 修改AppShell.xaml结构 #

将Settings单独放在独立的FlyoutItem中，移除原来FlyoutItem里的Home和Calculations（因为它们已经在TabBar中）：

<TabBar>
    <Tab>
        <ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
    </Tab>
    <Tab>
        <ShellContent Title="Calculations" ContentTemplate="{DataTemplate views:Calculations}" Route="Calculations"/>
    </Tab>
</TabBar>

<!-- 单独的Settings Flyout项，AsSingleItem保持Flyout只显示一个Settings入口 -->
<FlyoutItem Title="Settings" FlyoutDisplayOptions="AsSingleItem">
    <ShellContent Title="Settings" ContentTemplate="{DataTemplate views:Settings}" Route="Settings"/>
</FlyoutItem>

2. 配置Settings页面显示TabBar #

在Settings.xaml的根布局元素中添加Shell.TabBarIsVisible="True"，确保导航到Settings时TabBar不会隐藏：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="YourAppName.views.Settings"
             Shell.TabBarIsVisible="True"
             Title="Settings">
    <!-- 页面内容 -->
</ContentPage>

这样设置后，从Flyout进入Settings页面时，TabBar只会显示Home和Calculations两个Tab，不会出现Settings的Tab项，同时仍可通过TabBar切换回其他页面。

备选方案：代码后台动态控制Tab显示 #

如果不想调整XAML结构，可以通过监听导航事件动态隐藏Settings对应的Tab：

1. 给TabBar命名 #

在AppShell.xaml中给TabBar添加x:Name属性：

<TabBar x:Name="MainTabBar">
    <!-- 原有Tab内容 -->
</TabBar>

2. 在AppShell.xaml.cs中添加导航监听 #

public AppShell()
{
    InitializeComponent();
    Navigated += AppShell_Navigated;
}

private void AppShell_Navigated(object sender, ShellNavigatedEventArgs e)
{
    // 判断当前是否导航到Settings页面
    var isSettingsPage = e.Current.Location.OriginalString.Contains("Settings");
    
    foreach (var tab in MainTabBar.Items.OfType<Tab>())
    {
        var shellContent = tab.Items.FirstOrDefault() as ShellContent;
        // 隐藏Settings对应的Tab，显示其他Tab
        tab.IsVisible = !(isSettingsPage && shellContent?.Title == "Settings");
    }
}

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