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

Question

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

Answer 1

问题实际上不在expandedHeight值里面，而是sliver app bar内部使用anAnnotatedRegion来设置系统ui覆盖样式的事实：https : //github.com/flutter/flutter/blob/master/packages/flutter/ lib/src/material/app_bar.dart#L599

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

因此，您可以做的是将您的 包裹FlexibleSpaceBar在您SliverAppBar的另一个 中AnnotatedRegion，以覆盖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