Flutter 系统导航栏和状态栏颜色 [英] Flutter System Navigation bar and Status bar color

查看:209
本文介绍了Flutter 系统导航栏和状态栏颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用 Android Studio 和 Flutter 更改系统 NavBar?

How do I change the system NavBar using Android Studio and flutter?

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

I presume it's not in the main.dart, and I need to go through the android system files, but when I tried to edit the style.xml, the theme editor didn't let me edit any of the colors.

任何帮助将不胜感激,我想要一个轻的 NavBar 搭配一个轻的底部 AppBar.

Any help would be appreciated, I wanted to have a light NavBar to go with a light bottom AppBar.

推荐答案

注意:这需要更新版本的 Flutter,因为它引用了 2018 年 6 月添加的 API.

您可以使用默认构造函数创建自定义 SystemUiOverlayStyle.系统导航栏的颜色在那里定义.但是为了避免设置大量空值,请使用 copyWith 方法从现有的浅色/深色主题更新值.

You can create a custom SystemUiOverlayStyle using the default constructor. The color of the system nav bar is defined there. But to avoid setting a lot of null values, use the copyWith method to update the values from an existing light/dark theme.

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

您可以使用 SystemChrome 静态方法强制设置系统导航颜色.

You can imperatively set the system nav color using the SystemChrome static methods.

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

但是,如果您有多个设置此值的小部件,或者使用 AppBar 或 Cupertino NavBar 材质,您的值可能会被它们覆盖.相反,您可以使用新的 AnnotatedRegion API 来告诉 flutter 在某些小部件可见时自动切换到此样式.例如,如果您想在特定路线中的任何时候使用上述主题,您可以像这样将其包装在 AnnotatedRegion 小部件中.

However, if you have multiple widgets which set this value, or use the material AppBar or Cupertino NavBar your value may be overwritten by them. Instead, you could use the new AnnotatedRegion API to tell flutter to automatically switch to this style anytime certain widgets are visible. For example, if you wanted to use the theme above anytime you are in a certain route, you could wrap it in an AnnotatedRegion widget like so.

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

如果你弹出路由,这不会将你的主题改回之前的值

This won't change your theme back to the previous value if you pop the route however

这篇关于Flutter 系统导航栏和状态栏颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆