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

Posted 2023-04-18

【中文标题】更改每个屏幕的状态栏颜色

【英文标题】：Change statusbar color for each screen

【发布时间】：2020-06-08 23:12:17

【问题描述】：

我想为每个屏幕设置状态栏颜色。 例如。在屏幕 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 时不起作用。

【问题讨论】：

@Eugene 一些屏幕没有应用栏，并且在使用应用栏时，状态栏颜色比应用栏颜色深。

你有什么解决办法吗？

@SumitShukla 我发布了我的解决方法。在大多数情况下，这可能不是最好的解决方案。

【参考方案1】：

您不能在 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
  ));

【讨论】：

它会检查它，但有时会失败并且颜色与之前的屏幕保持一致。

你能分享一下你是如何实现它的吗？

【参考方案2】：

您可以使用 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
));

【讨论】：

它不起作用！颜色来自您的代码的第一个屏幕。

【参考方案3】：

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

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

【参考方案4】：

对要设置 statusBarColor 的页面使用focus_detector。

@override
Widget build(BuildContext context) =>
    FocusDetector(
      onVisibilityGained: () 
        //Here you can change statusBarColor as you like
        SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle.dark
        .copyWith(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
      ,
      child: YourOwnPage(),
    );

更多信息可以查看visibility_detector。