【Flutter 专题】10 图解底部状态栏小尝试

2021 年 11 月 13 日
本文字数：2691 字
阅读完需：约 9 分钟

小菜今天来整理一下在学习测试 Flutter 时需用到的底部导航栏 BottomNavigationBar，使用方式很简单，小菜感觉效果比原生的 Android 要好一些。

何为 BottomNavigationBar ?

BottomNavigationBar 为底部导航栏控件，可以包含文字标签和图标等基本信息，通常在三到五个之间；据了解，iOS 的规范底部导航栏最多可设置五个，所以大部分应用均在五个以内；现在很多应用都是以底部导航栏 + 中部主内容 Content 方式来展示。官网建议，BottomNavigationBar 底部导航栏通常与 Scaffold 一起使用，其中它作为 Scaffold.bottomNavigationBar 参数提供。

如何应用 BottomNavigationBar ?

与 body 同级的位置添加 BottomNavigationBar，BottomNavigationBarItem 中可以添加文字标签或图标 (Icons/Image) 等，若图片不存在时会显示空白；这样就可以添加底部状态栏内容，文字和图标的样式也可以随意调整；如下：

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('我')),  ],),

复制代码

只有底部状态栏是不够的，还需要对应的中间展示内容块，可以跟 Android 的思路一样，添加几个 Page() 页作为 Fragment，小菜因为测试内容相对简单，尝试使用了 PageView，即对应 Android 中的 ViewPager，小菜会在今后的测试中详细说明，今天主要是使用基本方法展示主模块内容；如下：

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,),

复制代码

此时主模块 PageView 可以滑动切换内容，但是对应的底部状态栏不会变化；因为目前没有绑定对应的点击事件等；此时需要添加 PageController 和状态栏的 onTap 点击事件；如下：

int _currentIndex = 0;var _pageController = new PageController(initialPage: 0);void _pageChange(int index) {    if (_currentIndex != index) {      _currentIndex = index;    }}// 添加 PageView 的 PageControllerbody: new PageView.builder(  onPageChanged: _pageChange,  controller: _pageController,  itemBuilder: (BuildContext context, int index) {    ...  }),// 添加 BottomNavigationBar 的 onTapbottomNavigationBar: 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;  },),

复制代码

此时，点击底部状态栏对应的 PageView 会切换内容，但是底部状态栏并没有改变样式，因为目前用的时固定的图标和文字，此时需要处理图标和文字切换时的样式，如下：

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)),  ],  ...),

复制代码

然而小菜添加了更改状态时的样式，点击底部状态栏时依旧不会变色；小菜查了很久突然发现，小菜的 HomePage() 继承的是 StatelessWidget 无状态样式，此时更换为 StatefulWidget 有状态样式，并实现对应方法；如下：

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 的基本功能已经完成。

实用小贴士

通过点击 BottomNavigationBar 对 PageView 切换过程中，可以设置动画过程，也可以直接跳转到对应页面，需要设置 animateToPage 或 jumpToPage；如下：

onTap: (int index) {    // 切换时没有动画效果//    _pageController.jumpToPage(index);    // 切换时添加动画效果    _pageController.animateToPage(index,        duration: new Duration(seconds: 2),        curve: new ElasticOutCurve(0.8));    _pageChange(index);    _currentIndex = index;},

复制代码