导航到新屏幕时状态栏颜色 [英] Status bar color when navigating to new screen

问题描述

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

I am using following in my build() method of 1st screen to change status bar color and it works fine.

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

但是，当我导航到第二个屏幕时，第一个屏幕状态栏的颜色也会出现在第二个屏幕上。在第二个屏幕的 build（）方法中，我正在使用具有不同颜色的相同代码

However when I navigate to 2nd screen the 1st screen status bar color appears on the 2nd screen too. And in 2nd screen's build() method, I am using the same code with different color

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

推荐答案

在进行 Navigator.push 到第二个屏幕。像这样

Try setting the 2nd status bar color before doing the Navigator.push to the second screen. Like this

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

来自 Flutter Docs

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

Call this API in code whose lifecycle matches that of the desired system UI styles. For instance, to change the system UI style on a new page, consider calling when pushing/popping a new PageRoute.

这篇关于导航到新屏幕时状态栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！