BottomNavigationBar在皮革上显示溢出警告

时间:2019-06-26 14:16:55

标签: flutter dart appbar

我在滚动时隐藏了bottomnavigationbar。隐藏工作按预期进行,但是导航栏认为这是一个问题,并且正在显示渲染溢出警告消息。我如何解决它?

我正在使用 scopedModel 来滚动收听booleanmainModel是我的scopedModel班。
mainModel.getShowAppBar只是我在scopedModel类中设置的boolean

表明问题的应用当前行为:

BottomNavigatorBar Overflow

这是我的代码实现:

  List <BottomNavigationBarItem> _showIconsOrNot(){
     var iconList = [
     BottomNavigationBarItem(
        icon: new Container(
          child: new Icon(Icons.list)
        ),
       title: new Text("Forums"),
     ),
     BottomNavigationBarItem(
        icon: new Container(
           child: new Icon(Icons.home)
        ),
        title: new Text("Home"),
     ),
     BottomNavigationBarItem(
        icon: new Container(
          child: new Icon(Icons.person)
        ),
        title: new Text("Profile")
     ),
     BottomNavigationBarItem(
        icon: new Container(
          child: new Icon(Icons.notifications)
        ),
        title: new Text("Notifications")
    )
   ];

return iconList;
}



@override
Widget build(BuildContext context) {
  return new ScopedModel<MainModel>(
    model: mainModel,
    child: new Scaffold(
      body: new ScopedModelDescendant<AppModel>(
          builder: (context, child, model){
            return SomeListView(model);
          }
      ),
      bottomNavigationBar:
      new ScopedModelDescendant<AppModel>(
          builder: (context, child, model){
            return AnimatedContainer(
                curve: Curves.bounceOut,
                duration: Duration(milliseconds: 800),
                height: mainModel.getShowAppBar ? 60.0 : 0.0,
                child: BottomNavigationBar(
                  type: BottomNavigationBarType.fixed,
                  currentIndex: currentIndex,
                  iconSize: mainModel.getShowAppBar ? 24.0 : 0.0,
                  selectedItemColor: Colors.black,
                  unselectedItemColor: Colors.grey,
                  items: _showIconsOrNot
              )
            );
          }
      )
  )
);

}

我希望溢出的警告消息会消失。隐藏动画可以按预期正常工作。

1 个答案:

答案 0 :(得分:0)

只需用BottomNavigationBar小部件包装Wrap。将AnimatedContainer的高度设置为56.0。

.......
return AnimatedContainer(
  curve: Curves.bounceOut,
  duration: Duration(milliseconds: 800),
  height: mainModel.getShowAppBar ? 56.0 : 0.0,
  child:  Wrap(
    children: <Widget>[
      BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        iconSize: mainModel.getShowAppBar ? 24.0 : 0.0,
        selectedItemColor: Colors.black,
        unselectedItemColor: Colors.grey,
        items: _showIconsOrNot
      ),
    ],
  ),
);
.......

需要全面实施吗?转到Hide bottom navigation bar on scroll down and vice versa