MAUI中TabbedPage嵌套禁用Flyout的Shell时顶部多余栏如何移除

两处跨平台异常的核心诱因是页面层级嵌套逻辑错误：TabbedPage与Shell均为MAUI框架的根级导航容器，不支持互相嵌套。将Shell作为TabbedPage的子元素渲染时，两个容器会各自加载自带的顶部栏组件，最终出现安卓端多余白块、iOS端多余标题导航栏的问题。

1. 调整页面根层级（核心修复） #

删除外层包裹的TabbedPage节点，直接将Shell作为页面根容器即可。Shell原生支持水平滚动标签效果，当单个Tab下挂载的ShellContent数量超过阈值时会自动开启横向滚动，完全匹配你需要的交互，无需额外嵌套TabbedPage。
修正后的MainPage.xaml代码：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Tyler.Energov.Mobile.EH.UI.InspectionOverview.InspectionOverviewPage"
       xmlns:page="clr-namespace:Tyler.Energov.Mobile.EH.UI.InspectionOverview.TabPages"
       FlyoutBehavior="Disabled">
    <Tab>
        <ShellContent Title="Parent record" ContentTemplate="{DataTemplate page:ParentRecordPage}"/>
        <ShellContent Title="Additional info" ContentTemplate="{DataTemplate page:AdditionalInfoPage}"/>
        <ShellContent Title="Contacts" ContentTemplate="{DataTemplate page:ContactsPage}"/>
        <ShellContent Title="Previous inspections" ContentTemplate="{DataTemplate page:PreviousInspectionPage}"/>
        <ShellContent Title="Attachments" ContentTemplate="{DataTemplate page:AttachmentsPage}"/>
    </Tab>
</Shell>

注：原代码中FlyoutItem的Title属性会额外生成顶部导航标题，直接移除FlyoutItem层级、保留Tab节点即可避免多余标题渲染。

2. 隐藏iOS端多余顶部导航栏 #

在Shell根节点添加导航栏隐藏属性，即可移除iOS端显示当前选中标签标题的顶部导航栏：

<Shell
    ...
    Shell.NavBarIsVisible="False">
    <!-- 原有Tab与ShellContent内容不变 -->
</Shell>

如果需要全局生效，可以直接在Style.xaml中添加Shell全局样式配置：

<Style TargetType="Shell">
    <Setter Property="Shell.NavBarIsVisible" Value="False"/>
    <!-- 原有TabBar颜色配置可以迁移到这里，无需放在BaseStyle中 -->
    <Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Light={StaticResource White}, Dark={StaticResource Black}}" />
    <Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Light={StaticResource Primary}, Dark={StaticResource White}}" />
    <Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Light={StaticResource LightGray}, Dark={StaticResource DarkGray}}" />
</Style>

3. 移除安卓端标签栏上方白色空白 #

调整层级并隐藏导航栏后，大部分场景下安卓端白块会自动消失。如果仍有残留，可通过安卓平台配置隐藏系统默认ActionBar：
打开Platforms/Android/MainActivity.cs文件，在Activity特性上添加WindowActionBar = false配置：

[Activity(Theme = "@style/Maui.SplashTheme", 
          MainLauncher = true, 
          ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize | ConfigChanges.Density, 
          WindowActionBar = false)]
public class MainActivity : MauiAppCompatActivity
{
}

异常效果参考 #

安卓端异常截图：

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