如何防止 AppBar 覆盖自定义状态栏颜色

Posted 2023-04-18

【中文标题】如何防止 AppBar 覆盖自定义状态栏颜色

【英文标题】：How to prevent AppBar from overriding custom status bar color

【发布时间】：2020-11-06 00:09:21

【问题描述】：

我无法更改状态栏颜色，似乎是因为 AppBar 一直在覆盖它。

Widget build(BuildContext context) 
  return Scaffold(
    appBar: AppBar(), // this component sets a status bar color and brightness
    body: AnnotatedRegion<SystemUiOverlayStyle>( // this component fails to
                                                 // override the status bar color
                                                 // and brightness set by the AppBar
      value: SystemUiOverlayStyle(
        statusBarColor: Colors.blue,
        statusBarIconBrightness: Brightness.light
      ),
      child: Container()
    )
  );

当我注释掉 AppBar 时，状态颜色变为蓝色。当我取消注释时，状态栏颜色保持蓝色，但无法再次更改。看起来 AppBar 锁定了当前颜色。

在子小部件中，我在返回组件之前尝试使用setSystemUIOverlayStyle，但它没有帮助：

Widget build(BuildContext context) 
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.blue,
    statusBarIconBrightness: Brightness.light
  ));
  return Container();

有AppBar时如何设置状态栏颜色？

【参考方案1】：

用SafeArea包装你的根小部件 有关小部件的更多详细信息click here