Question

我想为每个屏幕设置状态栏颜色。例如。屏幕A中的状态栏颜色为红色，屏幕B中的颜色为蓝色。我尝试了许多解决方案。但是每个人都有自己的问题。喜欢：

AnnotatedRegion(
    value: SystemUiOverlayStyle(
        systemNavigationBarColor: navigationBarColor,
        statusBarColor: statusBarColor,
    ),
    child: child,
);

在构建方法中返回之前，

或

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

我最后的尝试：

  static void pushNamed({
    BuildContext context,
    String route,
    Object arguments,
    Color statusBarColor,
    Color navigationBarColor = Colors.black,
  }) async {
    if (statusBarColor != null) {
      await FlutterStatusbarcolor.setStatusBarColor(statusBarColor);
    }
    await Navigator.pushNamed(
      context,
      route,
      arguments: arguments,
    );
  }

但有时会失败。这个解决方案的另一个问题是使用后退按钮时，颜色没有改变（我在appbar中为后退按钮编写了代码）。甚至在热重装时，颜色也会更改为以前的颜色。我该如何解决这个问题？

更新＃2

我为路由创建了一个类。

static void pushNamedAndRemoveUntil({
    BuildContext context,
    String route,
    Object arguments,
    Color statusBarColor,
    Color popStatucBarColor,
    Color popNavigationBarColor,
    Color navigationBarColor,
}) async {
    changeSystemColor(statusBarColor, navigationBarColor);
    Navigator.pushNamedAndRemoveUntil(
        context,
        route,
        (Route<dynamic> route) => false,
        arguments: arguments,
    ).then((res) {
        changeSystemColor(popStatucBarColor, popNavigationBarColor);
    });
}

和：

void changeSystemColor(Color statusBarColor, Color navigationBarColor) {
  if (statusBarColor != null)
    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        systemNavigationBarColor: navigationBarColor ?? Colors.black,
        statusBarColor: statusBarColor,
      ),
    );
}

以及用于此

Routing.pushNamedAndRemoveUntil(
    context: context,
    route: Routes.homeScreen,
    arguments: user,
    statusBarColor: Colors.teal,
);

，现在在使用pushNamedAndRemoveUntil时不起作用。

Answer 1

~~您可以使用AppBar，但将其高度和仰角设置为0，以便它仅覆盖状态栏并且没有阴影。~~

~~appBar: PreferredSize( preferredSize: Size.fromHeight(0), child: new AppBar( brightness: Brightness.light, backgroundColor: backgroundColour, elevation: 0, ) ),~~

~~然后在initState()中，您可以使状态栏透明，以免其变色。~~

您需要在await Navigator.push()通话之前和之后致电。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
   statusBarColor: desiredColour
));

Answer 2

您不能在initState或任何其他有状态小部件生命周期方法上触发系统颜色更改。最好的方法似乎是在导航到新视图之前以及从该视图返回时设置颜色：

void goToWhiteView(){
  changeSystemColor(Colors.white);
  Navigator.pushNamed(
    context,
    route,
    arguments: arguments,
  ).then((result){
    changeSystemColor(Colors.blue);
  });
}

void changeSystemColor(Color color){
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    systemNavigationBarColor: color,
    statusBarColor: color
  ));
}

Answer 3

我创建ScreenContainer小部件并用它包裹屏幕：

    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: statusbarcolor ?? ColorPalette.accent,
        statusBarIconBrightness: statusBarIconBrightness ?? Brightness.light,
      ),
      child: child,
    );

更改每个屏幕的状态栏颜色

3 个答案: