Flutter 专题10 图解底部状态栏小尝试 #yyds干货盘点#

实践是知识的母亲，知识是生活的明灯。这篇文章主要讲述Flutter 专题10 图解底部状态栏小尝试 #yyds干货盘点#相关的知识，希望能为你提供帮助。
小菜今天来整理一下在学习测试 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 的 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; }, ),
此时，点击底部状态栏对应的 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)),
],
...
),

![](https://s4.51cto.com/images/blog/202111/17090658_619455b2c079054345.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)5. 然而小菜添加了更改状态时的样式，点击底部状态栏时依旧不会变色；小菜查了很久突然发现，小菜的 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;
...
}

![](https://s4.51cto.com/images/blog/202111/17090659_619455b31e9756446.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 至此，底部状态栏 BottomNavigationBar 配合滑动 PageView 的基本功能已经完成。 ### 实用小贴士 1. 通过点击 BottomNavigationBar 对 PageView 切换过程中，可以设置动画过程，也可以直接跳转到对应页面，需要设置 animateToPage 或 jumpToPage；如下：

【Flutter 专题10 图解底部状态栏小尝试 #yyds干货盘点#】onTap: (int index) {
// 切换时没有动画效果
//_pageController.jumpToPage(index);
// 切换时添加动画效果
_pageController.animateToPage(index,
duration: new Duration(seconds: 2),
curve: new ElasticOutCurve(0.8));
_pageChange(index);
_currentIndex = index;
},

2. BottomNavigationBar 有两种样式分别为 **shifting** 和 **fixed**；直接效果图，**shifting** 样式时会突出显示选中的 item，其他的 item 文字隐藏；**fixed** 样式均分，没有突出效果；如下：**type: BottomNavigationBarType.shifting,** ![shifting](https://s4.51cto.com/images/blog/202111/17090658_619455b2b598626500.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)![shifting](https://s4.51cto.com/images/blog/202111/17090658_619455b2c98fe56867.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)**type: BottomNavigationBarType.fixed,**![fixed](https://s4.51cto.com/images/blog/202111/17090659_619455b37950527384.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)![fixed](https://s4.51cto.com/images/blog/202111/17090659_619455b354b5d41961.jpg?x-oss-process=image/watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=)& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; [**GitHub Demo**](https://github.com/ACE-YANGCE/FlutterSign)*** & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; 小菜刚接触 **Flutter** 时间不长，还有很多不清楚和不理解的地方，如果又不对的地方还希望多多指出。> 来源：阿策小和尚