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

debugcn 发表于 Dev

Elhoucine Ayoub

使用main方法中的以下几行代码在flutter中更改底部导航栏颜色时：

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

它工作正常，但是在主页内使用SilverAppBar时，底部的navBar颜色在一段时间后恢复为黑色：

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值上，所以为什么以及如何解决此问题。

CZX

问题实际上不在expandedHeight值内，而是事实是，sliver应用程序栏内部使用AnnotatedRegion来设置系统ui覆盖样式：https : //github.com/flutter/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(),
  ),
),