Flutter系统导航栏和状态栏颜色[重复]

Posted 2023-02-23

【中文标题】Flutter系统导航栏和状态栏颜色[重复]

【英文标题】：Flutter System Navigation bar and Status bar color [duplicate]

【发布时间】：2018-12-03 08:57:24

【问题描述】：

如何使用 android Studio 和 Flutter 更改系统 NavBar？

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

任何帮助将不胜感激，我希望有一个轻型 NavBar 与一个轻型底部 AppBar。

【参考方案1】：

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

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

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

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

SystemChrome.setSystemUiOverlayStyle(mySystemTheme);

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

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

如果您弹出路线，这不会将您的主题更改回之前的值

【讨论】：

太棒了！但是，如果您有多个具有冲突值的 AnnotatedRegion 会发生什么？如果前面的路由包含AnnotatedRegion，那么你最后的语句是否仍然有效？

目前flutter视图结合了实际层树中屏幕顶部和底部相交的系统chrome值。因此，如果您在屏幕顶部有 3 个带注释的区域，则将选择最后一个。这是一种低级 API，我们打算在其上用 material 和 cupertino 构建一个更简单的 API

"last" 意思是最深的，除非它没有大小:)

@JonahWilliams 您说过，“但是，如果您弹出路线，这不会将您的主题更改回以前的值”。弹出或推送到新路由后是否有更改状态栏颜色的选项？

@JonahWilliams 我尝试使用AnnotatedRegion 作为Scaffold 的父级，定义statusBarColor: Colors.transparent,，但它不起作用，似乎AppBar 始终具有优先权。

【参考方案2】：

Flutter 2.4+（更新）

使用systemOverlayStyle 属性

class MyPage extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle(
          systemNavigationBarColor: Colors.blue, // Navigation bar
          statusBarColor: Colors.pink, // Status bar
        ),
      ),
    );
  

【讨论】：

它不起作用

不知道你是怎么做的。你能把它作为一个问题发布吗

我刚刚将您的代码复制到 main.js 中。非常感谢！

这应该被接受为答案。 obs：仅适用于最近的 android 版本。

不适用于最新的安卓版本

【参考方案3】：

您可以直接拨打SystemChrome.setSystemUIOverlayStyle：

import 'package:flutter/services.dart'

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

【讨论】：

这行得通，但有时它会奏效，而且通常只有在几次热重载之后才会奏效，但现在总比没有好！

ios不行

@Tom 你能在 ios 上运行这段代码吗？