和尚今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar,使用方式很简单,和尚感觉效果比原生的 Android 要好一些。
BottomNavigationBar 为底部导航栏控件,可以包含文字标签和图标等基本信息,通常在三到五个之间;据了解,iOS 的规范底部导航栏最多可设置五个,所以大部分应用均在五个以内;现在很多应用都是以底部导航栏 + 中部主内容 Content 方式来展示。 官网建议,BottomNavigationBar 底部导航栏通常与 Scaffold 一起使用,其中它作为Scaffold.bottomNavigationBar 参数提供。
bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.category), title: new Text('签到')),
BottomNavigationBarItem(
icon: new Icon(Icons.account_circle), title: new Text('我')),
],
),
body: new PageView.builder(
itemBuilder: (BuildContext context, int index) {
var str =
(index == 0) ? "这里是【HomePage】->【签到】页面" : "这里是【HomePage】->【我】页面";
return new Center(
child: new Container(
width: 340.0,
child: new Card(
color: Colors.blue,
elevation: 16.0,
child: new FlatButton(
child:
new Text(str, style: new TextStyle(color: Colors.white)),
)),
));
},
itemCount: 2,
),
int _currentIndex = 0;
var _pageController = new PageController(initialPage: 0);
void _pageChange(int index) {
if (_currentIndex != index) {
_currentIndex = index;
}
}
// 添加 PageView 的 PageController
body: new PageView.builder(
onPageChanged: _pageChange,
controller: _pageController,
itemBuilder: (BuildContext context, int index) {
...
}
),
// 添加 BottomNavigationBar 的 onTap
bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
...
],
//设置当前的索引
currentIndex: _currentIndex,
//tabBottom的点击监听
onTap: (int index) {
_pageController.animateToPage(index,
duration: new Duration(seconds: 2),
curve: new ElasticOutCurve(0.8));
_pageChange(index);
_currentIndex = index;
},
),
var _bottomText = ['签到', '我'];
var _bottomIcons = [
[
new Icon(Icons.category, color: Colors.grey),
new Icon(Icons.category, color: Colors.blue),
],
[
new Icon(Icons.account_circle, color: Colors.grey),
new Icon(Icons.account_circle, color: Colors.blue),
]
];
Icon changeIconStyle(int curIndex) {
if (curIndex == _currentIndex) {
return _bottomIcons[curIndex][1];
}
return _bottomIcons[curIndex][0];
}
Text changeTextStyle(int curIndex) {
if (curIndex == _currentIndex) {
return new Text(_bottomText[curIndex],
style: new TextStyle(color: Colors.blue));
} else {
return new Text(_bottomText[curIndex],
style: new TextStyle(color: Colors.grey));
}
}
bottomNavigationBar: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: [
new BottomNavigationBarItem(
icon: changeIconStyle(0), title: changeTextStyle(0)),
new BottomNavigationBarItem(
icon: changeIconStyle(1), title: changeTextStyle(1)),
],
...
),
class HomePage extends StatefulWidget {
String result;
HomePage(this.result);
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new HomePageState();
}
}
class HomePageState extends State<HomePage> {
int _currentIndex = 0;
...
}
至此,底部状态栏 BottomNavigationBar 配合滑动 PageView 的基本功能已经完成。
onTap: (int index) {
// 切换时没有动画效果
// _pageController.jumpToPage(index);
// 切换时添加动画效果
_pageController.animateToPage(index,
duration: new Duration(seconds: 2),
curve: new ElasticOutCurve(0.8));
_pageChange(index);
_currentIndex = index;
},
type: BottomNavigationBarType.fixed,
type: BottomNavigationBarType.shifting,
shifting 样式
fixed 样式
GitHub Demo
和尚刚接触 Flutter 时间不长,还有很多不清楚和不理解的地方,如果又不对的地方还希望多多指出。以下是和尚公众号,欢迎闲来吐槽~