MAUI应用中如何设置设备顶部OS信息栏的backcolor

我在进行MAUI应用开发时，想要明确应当在哪个位置配置设备顶部OS信息栏所使用的backcolor属性。下方是我所指区域的截图，红圈标注的部分即为我想要修改的目标区域：

目标区域标注截图

你需要修改的红圈区域是移动端系统级状态栏（显示时间、电量、信号的OS顶层栏），不属于MAUI页面内的可控元素，可通过以下两种方式配置：

方案1：使用MAUI社区工具包（跨平台统一配置，推荐） #

• 先安装与当前项目MAUI版本匹配的CommunityToolkit.Maui NuGet包
• 在MauiProgram.cs中完成工具包注册：

var builder = MauiApp.CreateBuilder();
builder
    .UseMauiApp<App>()
    .UseMauiCommunityToolkit() // 新增该行注册工具包
    .ConfigureFonts(fonts =>
    {
        fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
        fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
    });

• 直接调用工具包提供的API设置颜色即可，比如需要应用启动就生效，可在App.xaml.cs构造函数中添加如下代码：

public App()
{
    InitializeComponent();
    // 传入你需要的背景色值即可
    CommunityToolkit.Maui.Core.Platform.StatusBar.SetColor(Colors.DarkSlateBlue);
    // 可配套设置状态栏文字/图标明暗样式，深色背景建议设置为浅色内容
    CommunityToolkit.Maui.Core.Platform.StatusBar.SetStyle(StatusBarStyle.LightContent);
    MainPage = new AppShell();
}

方案2：分平台原生配置（无需引入额外依赖） #

Android 平台 #

• 静态配置：打开Platforms/Android/Resources/values/colors.xml，修改对应色值即可：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#512BD4</color>
    <color name="colorPrimaryDark">#311B92</color> <!-- 适配Android 9及以下版本状态栏色 -->
    <color name="colorAccent">#2196F3</color>
    <color name="android:statusBarColor">#311B92</color> <!-- 适配Android 10及以上版本状态栏色 -->
</resources>

• 动态修改：可直接在MainActivity.cs中调用原生API设置：

// 替换为你需要的十六进制色值即可
Window.SetStatusBarColor(Android.Graphics.Color.ParseColor("#311B92"));

iOS 平台 #

• 先打开Platforms/iOS/Info.plist添加权限配置，允许代码控制状态栏样式：

<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>

• 动态修改颜色可在AppDelegate.cs的FinishedLaunching方法中添加如下代码：

// 自定义状态栏视图覆盖实现背景色修改
UIView statusBar = new UIView(UIApplication.SharedApplication.StatusBarFrame);
statusBar.BackgroundColor = UIColor.FromRGB(49, 27, 146); // 对应十六进制色值#311B92
UIApplication.SharedApplication.KeyWindow.AddSubview(statusBar);
// 配套设置状态栏文字为浅色
UIApplication.SharedApplication.SetStatusBarStyle(UIStatusBarStyle.LightContent, false);

Windows、Mac端的MAUI应用不存在移动端这类系统顶层信息栏，无需额外配置。

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