Flutter无AppBar时如何设置状态栏颜色（已尝试方案无效）

你遇到的问题其实很常见：直接在build方法里调用SystemChrome.setSystemUIOverlayStyle时，Scaffold会因为没有AppBar而自动设置默认的系统UI样式，覆盖了你手动设置的内容，所以才会出现截图里的白色状态栏。

下面给你两种可靠的解决方案：

方案一：用AnnotatedRegion包裹Scaffold（推荐） #

AnnotatedRegion是Flutter专门用来控制系统UI样式的组件，它能直接和系统层交互，不会被Scaffold的默认样式覆盖。代码示例如下：

Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    // 自定义状态栏样式
    value: SystemUiOverlayStyle(
      statusBarColor: UniQueryColors.colorBackground, // 和页面背景色保持一致，消除白色状态栏
      statusBarIconBrightness: Brightness.dark, // 状态栏图标设为深色
    ),
    child: Scaffold(
      backgroundColor: UniQueryColors.colorBackground,
      body: ListView.builder(
        itemCount: 7,
        itemBuilder: (BuildContext context, int index) {
          if (index == 0) {
            return addTopInfoSection();
          }
          // 记得补充其他index的返回组件，避免报错
          return Container();
        },
      ),
    ),
  );
}

方案二：在initState中延迟设置 #

如果更习惯用SystemChrome的方式，可以在页面初始化时延迟设置，确保Scaffold构建完成后再覆盖它的默认样式：

@override
void initState() {
  super.initState();
  // 等待组件构建完成后再设置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: UniQueryColors.colorBackground,
      statusBarIconBrightness: Brightness.dark,
    ));
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: UniQueryColors.colorBackground,
    body: ListView.builder(
      itemCount: 7,
      itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
          return addTopInfoSection();
        }
        return Container();
      },
    ),
  );
}

额外提示：页面退出后恢复样式 #

如果这个页面的状态栏样式和全局样式不同，记得在dispose方法里重置，避免影响其他页面：

@override
void dispose() {
  // 恢复为你需要的全局默认样式，比如浅色状态栏
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  super.dispose();
}

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