Flutter底部导航栏之BottomNavigationBar

实现的方式

​ 因为Flutter的widget分为StatelessWidget和StatefulWidget.我们使用底部导航栏肯定是通过点击底部的导航按钮来实现页面的更改,所以包含BottomNavigationBar的Widget必须是一个StatefulWidget.

​ 因为Scaffold这个widget中默认对BottomNavigationBar支持.所以直接用Scaffold就可以了.

效果图

直接贴代码

class BottomNavigationWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => BottomNavigationWidgetState();
}

class BottomNavigationWidgetState extends State<BottomNavigationWidget> {
  final _bottomNavigationColor = primaryColor;
  int _currentIndex = 0;
  List<Widget> bodyList = List();

  @override
  void initState() {
    super.initState();
    bodyList
      ..add(HomeScreen())
      ..add(DiscoverScreen())
      ..add(WorldScreen())
      ..add(MineScreen());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: bodyList[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: _bottomNavigationColor),
            title: Text(
              '主页',
              style: _bottomNavigationTextStyle(),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera, color: _bottomNavigationColor),
            title: Text(
              '发现',
              style: _bottomNavigationTextStyle(),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.language, color: _bottomNavigationColor),
            title: Text(
              '世界',
              style: _bottomNavigationTextStyle(),
            ),
          ),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.supervised_user_circle,
              color: _bottomNavigationColor,
            ),
            title: Text(
              '我的',
              style: _bottomNavigationTextStyle(),
            ),
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  //底部导航栏的样式
  TextStyle _bottomNavigationTextStyle() => TextStyle(color: primaryColor);
}

解析

​ 先在底部设置四个BottomNavigationBarItem,然后我们点击不同的item,更改_currentIndex的值,然后通过setState来使页面重绘.重绘以后bodyList就会根据改变过的 _currentIndex获取到不同body,这就完成了页面的更改

参数解析

Key key,
@required this.items,
this.onTap,
this.currentIndex = 0,
BottomNavigationBarType type,
this.fixedColor,
this.iconSize = 24.0,

• item 就是底部的四个按钮

• onTap 就是按钮的点击方法,会传递一个index参数,index就是点击了第几个按钮

• iconSize 底部icon的大小

• fixedColor:如果你的icon没有设置color,选中的时候就会用到fixedColor的颜色,当BottomNavigationBarType是BottomNavigationBarType.shifting的时候,这个属性是不起作用的

• type BottomNavigationBarType.两个字段,一个是只有选中的时候才显示icon下面的text,另一个是不管选中不选中都显示text.