Question

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

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值之内，以及为什么以及如何解决该问题。

Answer 1

问题实际上不在<nav class="nav_menu" role="navigation"> <ul> <li><a href="index.html">Home</a></li> <li><a href="nav/ingredients.html">Ingredients</a> <ul> <li><a href="nav/fish.html">Fish</a></li> <li><a href="nav/vegetables.html">Vegetables</a></li> <li><a href="nav/condiments.html">Condiments</a></li> <li><a href="nav/others.html">Others</a></li> </ul> </li> <li><a href="nav/history.html">History</a></li> <li><a href="nav/trivia.html">Trivia</a></li> <li class="drop_btn"> <a href="#">Contact</a> <div class="droptainer"> <h3>Sign up for the latest sushi news</h3> <form> <label>Name</label> <input type="text"> <input type="text"> <label>Email</label> <input type="text"> <input type="checkbox"> <input type="checkbox"> <label>I want to sign up for SushiNews.</label> <button>Submit</button> <button>Reset</button> </form> </div> </li> </ul> </nav>值内，而是事实是，条子应用程序栏内部使用expandedHeight来设置系统ui覆盖样式：https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/app_bar.dart#L599

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

因此，您可以做的是将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(), ), ),是更改ui覆盖样式的另一种方法，您可以在此处了解更多信息：https://stackoverflow.com/a/51013116/6064621

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

1 个答案:

仅供参考