先看效果：
BottomNavigationBarType.fixed的效果图.gif
BottomNavigationBarType.shifting的效果图.gif
该效果使用Scaffold = PageView+BottomNavigationBar
BottomNavigationBar的type分为：
1.BottomNavigationBarType.fixed:（代表tab固定不变，也是默认格式）
(1).底部tab数： 不超过4个
(2).导航栏背景色，默认由Material 控件的ThemeData.canvasColor决定，具体实现可以看下面代码
2.BottomNavigationBarType.shifting（代表tab是浮动的）
(1).底部tab数： 至少4个以上
(2).导航栏背景色，由每个item自己定义
BottomNavigationBarType.fixed:
代码如下：
import 'package:flutter/material.dart';
import 'home_page.dart';
import 'find_page.dart';
import 'msg_page.dart';
import 'my_page.dart';
class JiContainerPage extends StatefulWidget {
@override
_JiContainerPageState createState() {
return new _JiContainerPageState();
}
}
class _JiContainerPageState extends State
with SingleTickerProviderStateMixin {
final PageController _pageController = new PageController(initialPage: 0);
int _tabIndex = 0;
_onPageChange(int index) {
setState(() {
_tabIndex = index;
});
}
Image _getBarIcon(int index, bool isActive) {
if (index == 0) {
return _getAssetIcon(
isActive ? "images/ic_bar_home_ed.png" : "images/ic_bar_home.png");
} else if (index == 1) {
return _getAssetIcon(
isActive ? "images/ic_bar_find_ed.png" : "images/ic_bar_find.png");
} else if (index == 2) {
return _getAssetIcon(isActive
? "images/ic_bar_notify_ed.png"
: "images/ic_bar_notify.png");
} else {
return _getAssetIcon(
isActive ? "images/ic_bar_me_ed.png" : "images/ic_bar_me.png");
}
}
Image _getAssetIcon(String path) {
return Image.asset(path, width: 24.0, height: 24.0);
}
Text _getBarText(int index) {
if (index == 0) {
return Text("首页",style: TextStyle(color: Colors.black87));
} else if (index == 1) {
return Text("发现",style: TextStyle(color: Colors.black87));
} else if (index == 2) {
return Text("消息",style: TextStyle(color: Colors.black87));
} else {
return Text("我的",style: TextStyle(color: Colors.black87));
}
}
@override
Widget build(BuildContext context) {
/**
* 当BottomNavigationBar的type: BottomNavigationBarType.fixed，
* 背景色由ThemeData.canvasColor决定
*/
return new MaterialApp(
theme: ThemeData(
canvasColor: Color(0xffEEEFF2)
),
home: new Scaffold(
body: PageView.builder(
onPageChanged: _onPageChange,
controller: _pageController,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return new JiHomePage("0000");
} else if (index == 1) {
return new JiFindPage("1111");
} else if (index == 2) {
return new JiMsgPage("2222");
} else if (index == 3) {
return new JiMyPage("3333");
}
},
itemCount: 4,
),
bottomNavigationBar: new BottomNavigationBar(
fixedColor: Colors.black87,
type: BottomNavigationBarType.fixed,
iconSize: 24,
items: [
new BottomNavigationBarItem(
icon: _getBarIcon(0, false),
title: _getBarText(0),
activeIcon: _getBarIcon(0, true),
),
new BottomNavigationBarItem(
icon: _getBarIcon(1, false),
title: _getBarText(1),
activeIcon: _getBarIcon(1, true),
),
new BottomNavigationBarItem(
icon: _getBarIcon(2, false),
title: _getBarText(2),
activeIcon: _getBarIcon(2, true),
),
new BottomNavigationBarItem(
icon: _getBarIcon(3, false),
title: _getBarText(3),
activeIcon: _getBarIcon(3, true),
),
],
currentIndex: _tabIndex,
onTap: (index) {
_pageController.jumpToPage(index);
// _pageController.animateToPage(index, duration: Duration(milliseconds: 100), curve: Curves.ease);
_onPageChange(index);
},
)),
);
}
}
BottomNavigationBarType.shifting
代码如下：
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Scaffold(
body: PageView.builder(
onPageChanged: _onPageChange,
controller: _pageController,
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return new JiHomePage("0000");
} else if (index == 1) {
return new JiFindPage("1111");
} else if (index == 2) {
return new JiMsgPage("2222");
} else if (index == 3) {
return new JiMyPage("3333");
}
},
itemCount: 4,
),
bottomNavigationBar: new BottomNavigationBar(
fixedColor: Colors.black87,
type: BottomNavigationBarType.shifting,
iconSize: 24,
items: [
new BottomNavigationBarItem(
icon: _getBarIcon(0, false),
title: _getBarText(0),
activeIcon: _getBarIcon(0, true),
backgroundColor: Color(0xffEAEAEA)
),
new BottomNavigationBarItem(
icon: _getBarIcon(1, false),
title: _getBarText(1),
activeIcon: _getBarIcon(1, true),
backgroundColor: Color(0xffEAEAEA)
),
new BottomNavigationBarItem(
icon: _getBarIcon(2, false),
title: _getBarText(2),
activeIcon: _getBarIcon(2, true),
backgroundColor: Color(0xffEAEAEA)
),
new BottomNavigationBarItem(
icon: _getBarIcon(3, false),
title: _getBarText(3),
activeIcon: _getBarIcon(3, true),
backgroundColor: Color(0xffEAEAEA)
),
],
currentIndex: _tabIndex,
onTap: (index) {
_pageController.jumpToPage(index);
// _pageController.animateToPage(index, duration: Duration(milliseconds: 100), curve: Curves.ease);
_onPageChange(index);
},
)),
);
}
注意：
BottomNavigationBar作为底部导航栏，并不是最优选择（可以看看我的另一篇文章），有它的局限性：
1.icon和text无法设置间距
2.整个导航栏的高度不可更改，只能通过内部的icon等撑开