Flutter基础篇03--底部tabbar实现
2019-07-25 本文已影响9人
wg刚
代码
实现效果如下:
![](https://img.haomeiwen.com/i5720820/f6a8f4c4f637a19e.gif)
![](https://img.haomeiwen.com/i5720820/5c39ce0e8db35a98.gif)
涉及知识点
1、自定义主题
2、BottomNavigationBar、FloatingActionButton(可交互的浮动的按钮)、BottomAppBar
3、级联符号..允许您在同一个对象上进行一系列操作。相当于返回调用者自己
1、自定义主题
![](https://img.haomeiwen.com/i5720820/711b9bab20c30618.png)
对应效果为
![](https://img.haomeiwen.com/i5720820/4f7663cd567059ca.png)
2、BottomNavigationBar、FloatingActionButton(可交互的浮动的按钮)、BottomAppBar
-
BottomNavigationBar
![](https://img.haomeiwen.com/i5720820/1bb82467ea2ba098.png)
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(可交互的浮动的按钮)
![](https://img.haomeiwen.com/i5720820/a2de5b83ab4ddc8c.png)
floatingActionButton: FloatingActionButton(
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=>BottomView('不规则加号')));
},
tooltip: '长按了...',
child: Icon(Icons.add, color: Colors.white,)
),
-
BottomAppBar
![](https://img.haomeiwen.com/i5720820/6a65fd28300bb4d0.png)
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'));