Flutter-底部导航栏

BottomNavigationBar

会在模拟器下部有一个导航栏

class BottomNavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.explore),
          title: Text('Explore')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.history),
            title: Text('History')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('List')
        ),
      ],
    );
  }
}

预览

但是，当导航栏里的item大于3时，会出现一片空白

class BottomNavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.explore),
          title: Text('Explore')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.history),
            title: Text('History')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('List')
        ),
        // 如果底部导航栏的数量大于3，则会显示空白
        BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('My')
        )
      ],
    );
  }
}

预览

要解决这种问题，需要设置导航栏的类型

class BottomNavigationBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed, // 设置导航栏的类型
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.explore),
          title: Text('Explore')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.history),
            title: Text('History')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('List')
        ),
        // 如果底部导航栏的数量大于3，则会显示空白
        BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('My')
        )
      ],
    );
  }
}

这样就可以正常显示了

预览

      fixedColor: Colors.black, // 将导航栏的颜色设置为黑色

预览

选择激活

class BottomNavigationBarDemo extends StatefulWidget {
  @override
  _BottomNavigationBarDemoState createState() => _BottomNavigationBarDemoState();
}

class _BottomNavigationBarDemoState extends State<BottomNavigationBarDemo> {
  int _currentIndex = 0;

  void _onTapHandler(int index){
  setState((){ // setState这个函数只有StatefulWidget才有
    _currentIndex = index;
  });
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _currentIndex, // 激活状态
      onTap: _onTapHandler, // 点击后执行的函数
      type: BottomNavigationBarType.fixed, // 设置导航栏的类型
//      fixedColor: Colors.black, // 将导航栏的颜色设置为黑色
      items: [
        BottomNavigationBarItem(
            icon: Icon(Icons.explore),
            title: Text('Explore')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.history),
            title: Text('History')
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.list),
            title: Text('List')
        ),
        // 如果底部导航栏的数量大于3，则会显示空白
        BottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('My')
        )
      ],
    );
  }
}

预览