这篇文章介绍Flutter的底部Tabbar的实现，将从三种实现方式介绍
1、bottomNavigationBar + BottomAppBar 系统中间凸起（图1）
2、bottomNavigationBar + BottomNavigationBar 普通状态（图2）
3、bottomNavigationBar + BottomAppBar 自定义中间凸起（图3）
效果图
1.png
2.png
3.png
第一种：bottomNavigationBar + BottomAppBar 系统凸起
代码如下
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(page_title[_currentIndex]),
///导航栏标题
centerTitle: true,
///导航栏标题居中显示（IOS默认居中，Android默认靠左）
),
body: page_children[_currentIndex],
bottomNavigationBar: new BottomAppBar(
shape: CircularNotchedRectangle(), ///中间悬浮按钮嵌入BottomAppBar
notchMargin: 10,///缺口边距
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: Icon(Icons.home),
onPressed: (){
}
),
IconButton(
icon: Icon(Icons.person),
onPressed: (){
}
),
],
),
),
floatingActionButton: FloatingActionButton(
foregroundColor: Colors.white,
elevation: 10.0,///阴影
onPressed: (){
},
child: new Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//放在中间
);
}
由于系统提供的这种没法直接给Tabbar添加title，所以重新自定义了一下，如下：第三种
第二种：bottomNavigationBar + BottomNavigationBar 普通状态
代码如下：
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(page_title[_currentIndex]),
///导航栏标题
centerTitle: true,
///导航栏标题居中显示（IOS默认居中，Android默认靠左）
),
body: page_children[_currentIndex],
bottomNavigationBar: new BottomNavigationBar(
currentIndex: _currentIndex,
onTap: onChangePage,
items: [
new BottomNavigationBarItem(
icon: Icon(Icons.home),
label: page_title[_currentIndex],
),
new BottomNavigationBarItem(
icon: Icon(Icons.image),
label: page_title[_currentIndex],
),
new BottomNavigationBarItem(
icon: Icon(Icons.person),
label: page_title[_currentIndex],
),
],
),
);
}
void onChangePage(int index) {
setState(() {
_currentIndex = index;
});
}
第三种：bottomNavigationBar + BottomAppBar 自定义中间凸起
代码如下：
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(page_title[_currentIndex]),
///导航栏标题
centerTitle: true,
///导航栏标题居中显示（IOS默认居中，Android默认靠左）
),
body: page_children[_currentIndex],
bottomNavigationBar: new BottomAppBar(
shape: CircularNotchedRectangle(), ///中间悬浮按钮嵌入BottomAppBar
notchMargin: 8,///缺口边距
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
buildBottomBarItem(_currentIndex, 0, Icons.home, '首页'),
buildBottomBarItem(_currentIndex, -1, Icons.person, ''),
buildBottomBarItem(_currentIndex, 1, Icons.image, '我的'),
],
),
),
floatingActionButton: FloatingActionButton(
foregroundColor: Colors.white,
elevation: 10.0,///阴影
onPressed: (){
},
child: new Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,//放在中间
);
}
buildBottomBarItem(
int selectedIndex, int index, IconData iconData, String title) {
///未选中
TextStyle textStyle = TextStyle(fontSize: 11.0, color: Colors.grey);
MaterialColor iconColor = Colors.grey;
double iconSize = 20;
EdgeInsetsGeometry padding = EdgeInsets.only(top: 9.0);
//判断是否是选中
if (selectedIndex == index) {
textStyle = TextStyle(fontSize: 13.0, color: Colors.blue);
iconColor = Colors.blue;
iconSize = 25;
padding = EdgeInsets.only(top: 6.0);
}
Widget paddingItem = SizedBox();
if (iconData != null) {
paddingItem = Padding(
padding: padding,
child: Container(
color: Colors.white,
child: Center(
child: Column(
children: [
Icon(
iconData,
color: iconColor,
size: iconSize,
),
Text(
title,
style: textStyle,
),
],
),
),
),
);
}
Widget item = Expanded(
flex: 0,
child: new GestureDetector(
onTap: () {
if(index != _currentIndex) {
setState(() {
_currentIndex = index;
});
}
},
child: SizedBox(
height: 52,
child: paddingItem,
),
)
);
return item;
}
题外：
FloatingActionButton：悬浮按钮
FloatingActionButtonLocation：设置悬浮按钮的位置
elevation: 悬浮按钮的阴影大小，数值
flex: 0, 默认是1，设置为0，悬浮按钮中间为透明色
demo