Dart 颤振系统导航栏和状态栏颜色

如何使用Android Studio和Flatter更改系统导航栏

我想它不在main.dart中，我需要查看android系统文件，但是当我试图编辑style.xml时，主题编辑器不允许我编辑任何颜色

---

任何帮助都将不胜感激，我希望有一个轻导航栏和一个轻底部应用程序栏。

您只需调用

SystemChrome.setsystemmuioverlaystyle

：

import 'package:flutter/services.dart'

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

注：这需要更新版本的颤振，因为它引用了2018年6月添加的API

您可以使用默认构造函数创建自定义的

systemuioverlystyle

。系统导航栏的颜色在此处定义。但为了避免设置大量空值，请使用

copyWith

方法更新现有明暗主题中的值

const mySystemTheme= SystemUiOverlayStyle.light
 .copyWith(systemNavigationBarColor: Colors.red);

您可以使用

SystemChrome

静态方法强制设置系统导航颜色

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

但是，如果您有多个设置此值的小部件，或者使用材质AppBar或Cupertino导航栏，则它们可能会覆盖您的值。相反，您可以使用新的AnnotatedRegion API告诉Flatter在某些小部件可见时自动切换到这种样式。例如，如果您想在任何时候在某条路线上使用上面的主题，您可以将其包装在一个AnnotatedRegion小部件中，如下所示

Widget myRoute(BuildContext context) {
  return new AnnotatedRegion<SystemUiOverlayStyle>(
    value: mySystemTheme,
    child: new MyRoute(),
  );
}

小部件myRoute（构建上下文）{
返回新德里区(
值：mySystemTheme，
子项：新建MyRoute（），
);
}

---

如果弹出路线，这不会将主题更改回以前的值，但是可以使用

SystemChrome

类更改状态栏和导航栏的颜色

import'package:flatter/services.dart'；
SystemChrome.setSystemUIOverlayStyle（SystemUiOverlayStyle(
systemNavigationBarColor:Colors.blue，//导航栏颜色
statusBarColor:Colors.pink，//状态栏颜色
));

---

例如：

类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
//在这里粘贴上面的代码
返回物料app（）；
}
}

太棒了！但是，如果您有多个带有冲突值的

AnnotatedRegion

，会发生什么？如果上一条路线包含一个

注释区域

，那么您的最后一条语句是否仍然有效？当前，颤振视图结合了在实际图层树中屏幕顶部和底部相交的系统chrome值。因此，如果在屏幕顶部有3个带注释的区域，将选择最后一个。这是一种低级API，我们打算在材质和cupertino“last”的意思上构建一个更简单的API，除非它没有大小：）@JonahWilliams你说，“如果你弹出路线，这不会将你的主题更改回以前的值”。在弹出或推到新路线后，是否有更改状态栏颜色的选项？@JonahWilliams我试图使用

AnnotatedRegion

作为

Scaffold

的父级，定义

statusBarColor:color.transparent，

，但它不起作用，似乎

AppBar

始终具有优先权。这起到了作用，但有时它会让人喜怒无常，而且通常只有在几次热加载后才会出现，但现在看来这总比什么都没有好吧！它不工作IOS@Tom你能在ios上运行此代码吗？它不起作用。我不知道你是如何运行的。我刚把你的代码复制到main里了。太多了！这应该被接受为答案。obs：仅适用于最新的android版本。