Xamarin Forms转MAUI后Android端导航栏重复显示问题求助

问题描述 #

将基于Shell的Xamarin Forms应用迁移至MAUI后，Android端出现导航栏重复显示的问题：底部导航栏样式正常，但顶部存在一个无法控制且无法移除的紫色栏，该问题在原Xamarin Forms版本中不存在。

相关代码 #

AppShell.xaml

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ISAI.Lessons.Mobile.Views"
       Title="ISAI.Lessons.Mobile"
       x:Class="ISAI.Lessons.Mobile.AppShell">

    <Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.ForegroundColor" Value="White" />
                <Setter Property="Shell.TitleColor" Value="White" />
                <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
                <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
                <Setter Property="Shell.TabBarTitleColor" Value="White"/>
            </Style>
            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
   

            <Style Class="FlyoutItemLabelStyle" TargetType="Label">
                <Setter Property="TextColor" Value="White"></Setter>
            </Style>
            <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
                <Setter Property="BackgroundColor" Value="LightBlue"></Setter>
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="White" />
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Selected">
                                <VisualState.Setters>
                                    <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

            <Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
                <Setter Property="VisualStateManager.VisualStateGroups">
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                <VisualState.Setters>
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>
        </ResourceDictionary>
    </Shell.Resources>


    <ShellContent 
        Route="LaunchPage" 
        ContentTemplate="{DataTemplate local:LaunchPage}"
   
        >
    </ShellContent>

    <FlyoutItem Title="Home" Icon="outline_home_black_18.png" >
        <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}"  />
    </FlyoutItem>

    <FlyoutItem Title="Lessons" Icon="outline_cast_for_education_black_18.png">
        <ShellContent Route="LessonGroupPage" ContentTemplate="{DataTemplate local:LessonGroupPage}"  />
    </FlyoutItem>

    <FlyoutItem Title="Lesson Downloads" Icon="outline_file_download_black_18.png">
        <ShellContent Route="LessonDownloadsPage" ContentTemplate="{DataTemplate local:LessonDownloadsPage}"  />
    </FlyoutItem>

    <MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemClicked" IconImageSource="outline_logout_black_18.png">
    </MenuItem>

    <TabBar>
        <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
    </TabBar>


    <TabBar>
        <ShellContent Route="LessonsPage" ContentTemplate="{DataTemplate local:LessonsPage}" />
    </TabBar>

    

</Shell>

MainActivity.cs

[Activity(
        Theme = "@style/MainTheme", 
        ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize )]
    public class MainActivity : MauiAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            //TabLayoutResource = Resource.Layout.Tabbar;
            //ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(savedInstanceState);

            DependencyService.Register<IHud, Hud>();
            DependencyService.Register<IStatusBar, StatusBar>();
            DependencyService.Register<IVideoDownloadService, VideoDownloadService>();
            DependencyService.Register<ISqliteService, SqliteService>();

            DownloadBrodacast downloadBrodacast = new DownloadBrodacast();
            RegisterReceiver(downloadBrodacast, new IntentFilter(DownloadManager.ActionDownloadComplete));

            CrossMediaManager.Current.Init(this);

        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, Permission[] grantResults)
        {
            Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);
            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }


    }

主主题配置（styles.xml）

<style name="MainTheme" parent="MainTheme.Base">
    <!-- As of Xamarin.Forms 4.6 the theme has moved into the Forms binary -->
    <!-- If you want to override anything you can do that here. -->
    <!-- Underneath are a couple of entries to get you started. -->

    <!-- Set theme colors from https://aka.ms/material-colors -->
    <!-- colorPrimary is used for the default action bar background -->
    <!--<item name="colorPrimary">#2196F3</item>-->
    <!-- colorPrimaryDark is used for the status bar -->
    <!--<item name="colorPrimaryDark">#1976D2</item>-->
    <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
    <!--<item name="colorAccent">#FF4081</item>-->
    
  </style>

解决方案 #

1. 合并重复的TabBar定义 #

AppShell.xaml中定义了两个独立的TabBar，这是导致导航栏重复的核心原因。MAUI Shell要求所有底部标签页必须放在同一个TabBar容器内：

修改后的标签页部分：

<TabBar>
    <ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}" />
    <ShellContent Route="LessonsPage" ContentTemplate="{DataTemplate local:LessonsPage}" />
</TabBar>

2. 隐藏系统默认ActionBar #

Android系统自带的ActionBar会与MAUI Shell导航栏冲突，需在主题配置中强制隐藏：

在styles.xml的MainTheme中添加以下属性：

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

修改后的完整MainTheme：

<style name="MainTheme" parent="MainTheme.Base">
    <!-- 隐藏系统ActionBar和标题 -->
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    
    <!-- 其他原有配置 -->
</style>

3. 显式设置Shell导航栏状态 #

在AppShell根节点显式设置导航栏可见性，确保Shell样式完全覆盖系统默认：

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:ISAI.Lessons.Mobile.Views"
       Title="ISAI.Lessons.Mobile"
       x:Class="ISAI.Lessons.Mobile.AppShell"
       Shell.NavBarIsVisible="True">
    <!-- 原有内容 -->
</Shell>

4. 清理遗留配置 #

确保MainActivity中没有残留的导航栏相关代码（如已注释的TabLayoutResource和ToolbarResource无需改动），避免干扰MAUI Shell的渲染逻辑。

完成以上步骤后重新编译运行，Android端重复的紫色导航栏将消失，仅保留MAUI Shell控制的底部导航栏。

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