.NET MAUI Shell应用中TabBar被屏幕底部工具栏遮挡的解决方法

我开发了一个面向Android平台的MAUI应用，采用Shell导航搭配TabBar，Shell的XAML代码如下：

<Shell
    x:Class="MyApp.Mobile.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MyApp.Mobile"
    xmlns:views="clr-namespace:MyApp.Mobile.Views"
    Shell.FlyoutBehavior="Disabled"
    Shell.NavBarIsVisible="False" 
    Shell.TabBarBackgroundColor="{StaticResource Secondary}" 
    Shell.TabBarUnselectedColor="{StaticResource Primary}" 
    Shell.TabBarTitleColor="Black" 
    Shell.PresentationMode="Animated"
    Title="MyApp.Mobile">

    <TabBar Route="Landing">
        <ShellContent ContentTemplate="{DataTemplate local:MainPage}"/>
    </TabBar>
    <TabBar Route="Home">
        <Tab Title="Hem" Icon="house_solid.png">
            <ShellContent ContentTemplate="{DataTemplate views:DashboardPage}" />
        </Tab>
        <Tab Title="Undersökningar" Icon="heart_pulse_solid.png">
            <ShellContent ContentTemplate="{DataTemplate views:AssessmentStartPage}" />
        </Tab>
        <Tab Title="Verktyg" Icon="ruler_solid.png">
            <ShellContent ContentTemplate="{DataTemplate views:ToolsIndexPage}" />
        </Tab>
    </TabBar>

</Shell>

在模拟器运行应用时，TabBar的底部区域被系统底部导航栏遮挡，导致Tab的图标和文字显示不全。我尝试修改MainActivity.cs文件调整布局，代码如下：

public class MainActivity : MauiAppCompatActivity
{
    protected override void OnStart()
    {
        base.OnStart();

        Window.Attributes.LayoutInDisplayCutoutMode = LayoutInDisplayCutoutMode.Never;
        
    }

}

请问如何修改应用代码，让TabBar不侵入系统工具栏区域？

解决方案 #

方法1：启用MAUI安全区域适配 #

在Shell的XAML中添加Shell.UseSafeArea="True"，让应用自动适配系统安全区域，避免内容被系统栏遮挡：

<Shell
    ...
    Shell.UseSafeArea="True"
    ...>

如果需要更精细控制TabBar的安全区域，可以单独设置Shell.TabBarSafeAreaInsets属性，调整底部内边距（数值可根据设备实际情况调整）：

<Shell
    ...
    Shell.TabBarSafeAreaInsets="0,0,0,24"
    ...>

方法2：调整Android窗口布局配置 #

修改MainActivity.cs中的窗口设置，让内容区域避开系统导航栏：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);
    
    // 配置窗口布局，确保内容不覆盖系统导航栏
    Window.DecorView.SystemUiVisibility = SystemUiFlags.LayoutStable | SystemUiFlags.LayoutHideNavigation;
    Window.SetSoftInputMode(SoftInput.AdjustResize);
}

也可以修改Android主题配置，在Platforms/Android/Resources/values/styles.xml中调整主题属性：

<style name="Maui.SplashTheme" parent="Maui.BaseTheme">
    ...
    <item name="android:windowDrawsSystemBarBackgrounds">true</item>
    <item name="android:windowTranslucentNavigation">false</item>
    <item name="android:fitsSystemWindows">true</item>
</style>

方法3：移除硬编码的布局限制 #

检查是否有手动设置TabBar高度或布局边距的代码，移除所有硬编码的尺寸值，让MAUI自动计算TabBar的合适高度和位置。

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