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

本文介绍了导航到新屏幕时状态栏颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在第一个屏幕的 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.