Flutter自定义底部导航栏

技术分享 专栏收录该内容
9 篇文章 0 订阅

一、原因

之前一直使用(Flutter SDK 1.2.1稳定版),遇到一个很不爽的问题——BottomNavigationBarItem 选中时 title中的文字会放大。有什么设置可以去掉这个放大呢? 国内的APP中很少有navigation item 有动画的!!!
问题图片
即搜索比首页的字号大,而且切换的时候是有动画的。

二、解决

在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;
          });
        },
      ),
    );
  }

最后将_buildBottomNavigationBar()函数在Scaffold下的bottomNavigationBar属性后面执行就行了。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
       body: ...     // 这部分我用的PageView,就不贴出来了
       bottomNavigationBar:_buildBottomNavigationBar(),
    );
  }
  • 0
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本套视频目标从UI分类开始讲起,结合网易新闻功能点实例讲解每一大类组件布局的使用。最后以一个完整的仿网易新闻的UI实战讲解,教会大家如何合理选择UI组件,并且使用组件快速实现我们的需求,完成一个完整的Flutter项目。 </p> <p> <br /> </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/26150"></a><a href="https://edu.csdn.net/course/detail/27286"></a><a href="https://edu.csdn.net/course/detail/26858">https://edu.csdn.net/course/detail/26858</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值