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) 
          ),
        ],
  
      ), 
  )