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

Question

我无法更改状态栏颜色，似乎是因为 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时如何设置状态栏颜色？

Answer 1

包裹您的根小部件以SafeArea
了解有关小部件的更多详细信息，请单击此处