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]