Flutter基础篇03--底部tabbar实现

代码

实现效果如下：

涉及知识点
1、自定义主题
2、BottomNavigationBar、FloatingActionButton(可交互的浮动的按钮)、BottomAppBar
3、级联符号..允许您在同一个对象上进行一系列操作。相当于返回调用者自己

1、自定义主题

对应效果为

2、BottomNavigationBar、FloatingActionButton(可交互的浮动的按钮)、BottomAppBar

• BottomNavigationBar

bottomNavigationBar: BottomNavigationBar(
  items: <BottomNavigationBarItem>[
    BottomNavigationBarItem(
      icon: Icon(Icons.home, color: Colors.redAccent,),
      title: Text('Home',style: TextStyle(color: Colors.redAccent),),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.email,color: Colors.redAccent,),
        title: Text('Email',style: TextStyle(color: Colors.redAccent),),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.map,color: Colors.redAccent,),
        title: Text('Map',style: TextStyle(color: Colors.redAccent),),
    ),
    BottomNavigationBarItem(
        icon: Icon(Icons.dashboard,color: Colors.redAccent,),
        title: Text('Dashboard',style: TextStyle(color: Colors.redAccent),),
    ),
  ],
  currentIndex: _currentIndex,
  type: BottomNavigationBarType.fixed,
  onTap: (int index){
    setState(() {
      _currentIndex = index;
    });
  }
),

• FloatingActionButton(可交互的浮动的按钮)

floatingActionButton: FloatingActionButton(
  onPressed: (){
    Navigator.push(context, MaterialPageRoute(builder: (context)=>BottomView('不规则加号')));
  },
  tooltip: '长按了...',
  child: Icon(Icons.add, color: Colors.white,)
),

• BottomAppBar

bottomNavigationBar: BottomAppBar(
  color: Colors.purple,
  //预留一个间隙，用来存放floatingActionButton
  shape: CircularNotchedRectangle(),
  child: Row(
    //主轴对齐方式
    mainAxisAlignment: MainAxisAlignment.spaceAround,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      IconButton(
        onPressed: (){
          setState(() {
            currentIndex = 0;
          });
        },
        icon: Icon(Icons.home),
        color: Colors.white,
        iconSize: 30,
      ),
      //后面三个代码同上IconButton
      
    ],
  ),
),

3、级联符号..允许您在同一个对象上进行一系列操作。

dataList = List();
//点语法
dataList..add(BottomView('Home'))
..add(BottomView('love'))
..add(BottomView('launch'))
..add(BottomView('dashboard'));