颤动中的底部导航栏颜色恢复为黑色答案

【问题标题】：Bottom Navigation bar color in flutter revert to black颤动中的底部导航栏颜色恢复为黑色
【发布时间】：2020-03-25 09:47:57
【问题描述】：

在使用 main 方法中的这些代码行更改底部导航栏颜色时：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  systemNavigationBarColor: Colors.white,
  statusBarColor: Colors.transparent,
));

效果很好，但在主页内使用 SilverAppBar 时，底部导航栏颜色会在一段时间后恢复为黑色：

body: CustomScrollView(
    slivers: <Widget>[
      SliverAppBar(
        expandedHeight: 300,
        floating: false,
        pinned: true,
        snap: false,
        backgroundColor: Colors.white,
        flexibleSpace: FlexibleSpaceBar(),
      ),
      SliverList(
        delegate: SliverChildListDelegate(<Widget>[

        ]),
      )
    ],
  ),

当改变expandedHeight: 250的值时底部navBar的颜色不会改变，所以问题出在expandedHeight value 里面，那么为什么以及如何解决这个问题。

【问题讨论】：

标签： android flutter dart

【解决方案1】：

问题其实不在expandedHeight值内部，而是sliver应用栏内部使用AnnotatedRegion来设置系统ui覆盖样式：https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart#L599

由于您在main方法中只设置了一次覆盖样式，因此应用栏中AnnotatedRegion暴露的新覆盖样式将覆盖旧的覆盖样式。

所以你可以做的是用另一个AnnotatedRegion 将FlexibleSpaceBar 包裹在SliverAppBar 中，以覆盖应用栏中已经存在的AnnotatedRegion：

SliverAppBar(
  expandedHeight: 300,
  floating: false, 
  pinned: true,
  snap: false,
  backgroundColor: Colors.white,
  flexibleSpace: AnnotatedRegion<SystemUiOverlayStyle>(
    value: SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.white,
      statusBarColor: Colors.transparent,
    ),
    child: FlexibleSpaceBar(),
  ),
),

仅供参考

AnnotatedRegion是另一种改变ui覆盖样式的方法，你可以在这里了解更多：https://stackoverflow.com/a/51013116/6064621

【讨论】：

它运行良好，我想知道我们是否可以将其视为一个错误。