.NET MAUI iPhone 16状态栏与内容间距异常问题求助

问题场景 #

未使用Shell的.NET MAUI应用，仅在iPhone 16这类顶部状态栏较大的机型上，出现状态栏（已通过CommunityToolkit.Maui 9.0.3设置为红色）与页面内容之间的黄色间距，iPad及Android设备无此问题。

已尝试无效操作：

• 重写OnAppearing添加iOS原生状态栏视图
• 给Grid设置IgnoreSafeArea="True"，导致内容完全覆盖状态栏安全区域
• 调整Grid布局结构，问题未解决

需求：消除黄色间距，或让红色状态栏区域覆盖该间距。

可行解决方案 #

方案1：iOS平台安全区域适配 #

在iOS项目的AppDelegate.cs的FinishedLaunching方法中添加状态栏基础配置：

UIViewController.StatusBarStyle = UIStatusBarStyle.LightContent;
UIApplication.SharedApplication.SetStatusBarBackgroundColor(UIColor.Red);

然后在MainPage后台代码中处理页面布局：

protected override void OnAppearing()
{
    base.OnAppearing();
#if IOS
    var window = UIApplication.SharedApplication.KeyWindow;
    if (window != null)
    {
        var safeAreaInsets = window.SafeAreaInsets;
        // 让页面内容顶部对齐状态栏底部，同时用背景色覆盖间距
        this.Padding = new Thickness(0, safeAreaInsets.Top, 0, 0);
        if (Content is Grid grid)
        {
            grid.BackgroundColor = Colors.Red;
        }
    }
#endif
}

方案2：结合CommunityToolkit.Maui调整布局 #

确保MauiProgram.cs已正确初始化工具包：

builder.UseMauiApp<App>()
       .UseMauiCommunityToolkit();

在MainPage的OnAppearing中设置状态栏并调整布局：

protected override async void OnAppearing()
{
    base.OnAppearing();
    // 设置状态栏颜色和文字样式
    await CommunityToolkit.Maui.Core.StatusBarManager.SetColorAsync(Colors.Red);
    await CommunityToolkit.Maui.Core.StatusBarManager.SetStyleAsync(CommunityToolkit.Maui.Core.StatusBarStyle.LightContent);

#if IOS
    var safeAreaInsets = UIApplication.SharedApplication.KeyWindow?.SafeAreaInsets ?? new UIEdgeInsets();
    // 只忽略顶部安全区域，保留底部
    this.IgnoreSafeArea = new Thickness(0, 0, 0, safeAreaInsets.Bottom);
    if (Content is Grid grid)
    {
        // 让Grid顶部上移覆盖间距，同时设置背景色匹配状态栏
        grid.Margin = new Thickness(0, -safeAreaInsets.Top, 0, 0);
        grid.BackgroundColor = Colors.Red;
    }
#endif
}

方案3：自定义iOS页面渲染器 #

创建iOS平台的页面渲染器，直接控制页面延伸范围：

using Microsoft.Maui.Controls.Platform;
using UIKit;

[assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))]
namespace YourAppNamespace.Platforms.iOS.Renderers;

public class CustomPageRenderer : PageRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);
        if (ViewController != null)
        {
            // 让页面内容延伸到状态栏下方
            ViewController.ExtendedLayoutIncludesOpaqueBars = true;
            ViewController.EdgesForExtendedLayout = UIRectEdge.Top;
        }
        // 设置状态栏背景色
        UIApplication.SharedApplication.SetStatusBarBackgroundColor(UIColor.Red);
    }
}

此方案会让页面内容自然延伸到状态栏底部，配合状态栏红色背景，黄色间距会被完全覆盖。

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