android - flutter 中的底部导航栏颜色恢复为黑色

Question

在 flutter 中使用 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 的值时，底部导航栏的颜色不会改变， 所以问题出在 expandedHeight 值内，那么为什么以及如何解决这个问题。

Answer 1

问题实际上不在 expandedHeight 值内，而是在 sliver app bar 内部使用 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