Question

我在第一个屏幕的build()方法中使用以下方法来更改状态栏的颜色，并且工作正常。

// 1st screen's build() method
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(statusBarColor: Colors.green),
);

但是，当我导航至第二屏幕时，第一屏幕状态栏颜色也会出现在第二屏幕上。在第二屏的build()方法中，我使用的是相同的代码，但颜色不同

// 2nd screen's build() method
SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(statusBarColor: Colors.red),
);

Answer 1

在对第二个屏幕进行Navigator.push之前，请尝试设置第二个状态栏的颜色。像这样

SystemChrome.setSystemUIOverlayStyle(
  SystemUiOverlayStyle(statusBarColor: Colors.red),
);
await Navigator.of(context).push(MaterialPageRoute(
  builder: (context) => SecondScreen();
));

来自Flutter Docs

以生命周期与所需系统UI样式相匹配的代码调用此API。例如，要更改新页面上的系统UI样式，请在推送/弹出新的PageRoute时考虑调用。

Answer 2

我遇到了类似的问题，并找到了解决方案。最好的方法是使用 Scaffold 下的 AnnotatedRegion 而没有 AppBar （appBar为空）而不是函数SystemChrome.setSystemUIOverlayStyle()设置系统ui颜色。

类似的东西：

Scaffold(
  body: AnnotatedRegion(
    value: SystemUiOverlayStyle(statusBarColor: Colors.red) 
    child: MyBodyWidget(),
  ),
);

顺便说一句，value可以是SystemUiOverlayStyle.dark或SystemUiOverlayStyle.light，如果您只想覆盖深色或浅色而不是颜色。请注意，statusBarColor到目前为止仅适用于Android。

还请注意，为使 AnnotatedRegion 正常工作，appBar必须为空（不存在）。您可以在 MyBodyWidget 中轻松编写自己的 MyAppBar 小部件。

Answer 3

它有一个简单的解决方案。这是几种方法之一。（AnnotatedRegion）

首先，Saffold中的顶级父页面buildcontext SystemChrome.setSystemUIOverlayStyle（SystemUiOverlayStyle（ statusBarColor：Colors.transparent，<----透明。

和第三页的第二页... 如果Appbar：Appbar（backgroundcolor：Colors.red <----想要颜色。

如果没有Appbar：支架（backgroundcolor：Colors.red <----想要颜色。

这样，如果您进行导航弹出，页面状态颜色将返回Appbar的背景颜色或支架的背景颜色。

这是我的捷径，希望对您有所帮助。

导航到新屏幕时状态栏颜色

3 个答案: