Flutter自定义底部导航栏
发布时间
阅读量：
阅读量
一、原因
之前一直依赖于（Flutter SDK 1.2.1稳定版）这一工具，在操作过程中遇到了一个让人非常不愉快的问题——当BottomNavigationBarItem 点击后，标题中的文字会突然变大。有没有办法关闭这种字体大小变化？实际上，在国内的应用程序中几乎没有导航条项带动画效果。
即搜索比首页的字号大，而且切换的时候是有动画的。
二、解决
在BottomNavigationBar类别的API中完全没有发现对应的配置项设置后门入口,于是乎不得不重构了一个Widget,代码如下,仅供参考!
int _currentIndex = 0;
Widget _buildBottomNavigationBar(){
return Container(
color: Colors.white,
child: SafeArea(
child: SizedBox(
height: 54.0,
child: Card(
elevation: 0.0,
shape: RoundedRectangleBorder(),
margin: EdgeInsets.all(0.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
_buildBottomItem(title: '首页',icon: Icons.home,index: 0),
_buildBottomItem(title: '搜索',icon: Icons.search,index: 1),
_buildBottomItem(title: '消息',icon: Icons.message,index: 2),
_buildBottomItem(title: '我的',icon: Icons.account_circle,index: 3),
],
),
),
),
),
);
}
Widget _buildBottomItem({String title,IconData icon, int index}){
Color _colors = index == _currentIndex ? Colors.blue : Colors.grey;
return Expanded(
child: InkResponse(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(icon,color: _colors,),
Text(
title,
style: TextStyle(color: _colors,fontSize: 12.0),
)
],
),
onTap: (){
_controller.jumpToPage(index); // PageView 页面跳转
setState(() {
_currentIndex = index;
});
},
),
);
}最终，在构建过程中，在Scaffold的bottomNavigationBar属性之后（即在其后），负责设置该功能的行为将会被触发。
@override
Widget build(BuildContext context) {
return Scaffold(
body: ... // 这部分我用的PageView,就不贴出来了
bottomNavigationBar:_buildBottomNavigationBar(),
);
}全部评论 (0)
还没有任何评论哟~