Flutter中使用AnnotatedRegion<SystemUiOverlayStyle>后状态栏颜色未改变

核心修复方案 #

1. 正确嵌套AnnotatedRegion

没有AppBar时，必须将AnnotatedRegion<SystemUiOverlayStyle>作为页面的最外层容器，包裹住Scaffold（而非嵌套在body内部）。修改home.dart代码如下：

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle.light.copyWith(
      statusBarColor: Colors.white, // 明确指定状态栏背景色
      statusBarIconBrightness: Brightness.dark, // 图标设为深色，与白色状态栏形成对比
    ),
    child: Scaffold(
      // 此处不设置appBar属性
      body: YourPageContent(), // 替换为你的页面内容Widget
    ),
  );
}

2. 排查全局Theme干扰

检查main.dart中的ThemeData配置，如果存在systemOverlayStyle或appBarTheme的全局设置，可能会覆盖页面级的AnnotatedRegion配置。示例：

MaterialApp(
  theme: ThemeData(
    // 移除或注释掉全局的systemOverlayStyle设置
    // systemOverlayStyle: SystemUiOverlayStyle.dark,
    // 若有appBarTheme也需确保未设置状态栏相关属性
    // appBarTheme: AppBarTheme(systemOverlayStyle: ...),
  ),
  home: HomePage(),
);

3. Android端额外配置（可选）

如果上述方案仍不生效，可修改Android原生配置文件android/app/src/main/res/values/styles.xml，强制设置状态栏样式：

<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
  <item name="android:statusBarColor">@android:color/white</item>
  <item name="android:windowLightStatusBar">true</item> <!-- 启用深色状态栏图标 -->
</style>

关键注意点 #

• SystemUiOverlayStyle.light默认仅设置图标为深色，不会主动修改状态栏背景色，需手动添加statusBarColor: Colors.white
• 确保AnnotatedRegion的层级在Scaffold之上，否则Scaffold的默认样式会覆盖它

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