Flutter 学习之底部导航栏选中会放大的问题

简介

在学习Flutter的底部导航栏的时候发现一个问题就是底部图标之间切换的时候，当前状态是选中的时候会有一个放大的效果。

完成修改前的效果

完成修改后的效果

BottomNavigationBar 的内容

首先看看BottomNavigationBar里面有啥东西

BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    this.elevation = 8.0,
    BottomNavigationBarType type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  }) : assert(items != null),

这里注意到两个属性 this.selectedFontSize = 14.0和 this.unselectedFontSize = 12.0。有这两个属性 选中是是14，不选中时是12 。所以才导致了选中时会放大。

修改一下

在创建 BottomNavigationBar 的地方

    final BottomNavigationBar bottomNavigationBar = new BottomNavigationBar(
      items: _navigationViews
          .map((NavigationIconView navigationIconView) => navigationIconView.item)
          .toList(),
      currentIndex: _currentIndex,  // 当前点击的索引值
      type: BottomNavigationBarType.fixed,
      selectedFontSize:12.0,       //选中时的大小 ☆☆
      unselectedFontSize:12.0,     //未选中时的大小 ☆☆
      onTap: (int index){
        setState((){
          _navigationViews[_currentIndex].controller.reverse();
          _currentIndex = index;
          _navigationViews[_currentIndex].controller.forward();
          _currentPage = _pageList[_currentIndex];
        });
      },
    );
   

加上 如下两行代码就可以了，其中12这个值可以根据自己的项目进行更改。

selectedFontSize:12.0,           //选中时的大小
unselectedFontSize:12.0,      //未选中时的大小

至此解决底部导航栏选中的时候会有一个放大的效果的问题。

结束语

本人也在不断的学习以及摸索中，不断成长，望达到跬步以至千里的目的。如有不对的地方欢迎大家指出，在下方回复或者邮件都可以，谢谢大家在百忙之中阅读，再次感谢！！

邮箱：[email protected]