BottomNavigationBar 自定义 底部导航条、以及实现页面切换

一、Flutter BottomNavigationBar 组件

BottomNavigationBar 是底部导航条，可以让我们定义底部 Tab 切换，bottomNavigationBar是 Scaffold 组件的参数。

 

 

BottomNavigationBar 常见的属性

属性名	说明
items	List<BottomNavigationBarItem> 底部导航条按钮集合
iconSize	icon
currentIndex	默认选中第几个
onTap	选中变化回调函数
fixedColor	选中的颜色
type	BottomNavigationBarType.fixed BottomNavigationBarType.shifting

  Scaffold(
     appBar: AppBar(
        title: Text('Flutter Demo')
      ),
      body: this._pagesList[this._curentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _curentIndex,
        onTap: _changePage,
        fixedColor: Colors.black,
        type: BottomNavigationBarType.fixed,
        items: [
          BottomNavigationBarItem(
            title:Text("首页"),
            icon:Icon(Icons.home)
          ),
          BottomNavigationBarItem(
            title:Text("分类"),
            icon:Icon(Icons.category)
          ),
          BottomNavigationBarItem(
            title:Text("设置"),
            icon:Icon(Icons.settings)
          ),
        ],

      ),
  )