Flutter仿閒魚底部導航欄實現

微信公衆號：[程序員指北] 關注可瞭解更多的教程及排版技巧。問題或建議，請公衆號留言;

轉載請註明出處: learnandfish.com/

概述

本文主要實現一個仿閒魚底部導航欄實現，這種效果在項目中常常用到，接下來咱們就從頭開始實現。

效果圖

仿閒魚底部導航欄

要實現閒魚底部導航欄的效果咱們須要使用到BottomNavigationBar和FloatingActionButton,前面咱們說過FloatingActionButton 這個組件，接下來咱們先說一下BottomNavigationBar這個組件。

BottomNavigationBar

BottomNavigationBar是屬於Scaffold中的一個位於頁面底部的組件。一般和BottomNavigationBarItem配合使用。 其中BottomNavigationBarItem是BottomNavigationBar的子選項。

BottomNavigationBar構造方法及經常使用屬性簡介

BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
  });
複製代碼

屬性名	屬性值類型	說明
items	BottomNavigationBarItem類型的集合	底部導航欄的子顯示項
onTap	ValueChanged	點擊底部導航欄子顯示項的回調，返回的int值爲選中子項的下標
currentIndex	int	當前顯示項的下標
type	BottomNavigationBarType	包含fixed和shifting類型，顯示效果不一樣
iconSize	double	子項圖標的大小

BottomNavigationBarItem構造方法及經常使用屬性簡介

該組件配合BottomNavigationBar使用，用做底部導航欄要顯示的子項，由圖標和文字組成。

const BottomNavigationBarItem({
    @required this.icon,
    this.title,
    Widget activeIcon,
    this.backgroundColor,
  });
複製代碼

屬性名	屬性值類型	說明
icon	Widget	須要顯示的圖標組件，多爲Icon
title	Widget	須要顯示的文字組件，多爲Text
activeIcon	Widget	選中時顯示的icon，多爲Icon
backgroundColor	Color	BottomNavigationBarType爲shifting時的背景顏色

接下來咱們開始實現仿閒魚底部導航欄的效果，通常來說，點擊底部導航欄都會進行頁面切換或者更新數據，須要動態的改變一些 頁面狀態，因此咱們須要繼承StatefulWidget。

class BottomNavigationPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BottomNavigationPageState();
  }
}
複製代碼

接下來，咱們須要準備導航欄要顯示的子項和點擊每一個子項對應的界面。

// 切換底部導航欄須要跳轉的頁面
final pages = <Widget>[
  HomePage(),
  SecondPage(),
  ThirdPage(),
  FourPage(),
  FivePage()
];

// 底部導航欄要顯示的全部子項
final List<BottomNavigationBarItem> bottomNavBarItems = [
  BottomNavigationBarItem(
    icon: Icon(Icons.home),
    title: Text("閒魚")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.blur_circular),
      title: Text("魚塘")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.add),
      title: Text("賣閒置")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.message),
      title: Text("消息")
  ),
  BottomNavigationBarItem(
      icon: Icon(Icons.person),
      title: Text("個人")
  ),
];
複製代碼

爲了方便顯示，在每一個界面在頁面中間都只顯示一個text文本。這些都準備完成以後，直接在BottomNavigationPage頁面的 Scaffold中使用bottomNavigationBar，而後指定items，type等屬性便可。

Scaffold(
      appBar: AppBar(
        title: Text("底部導航欄頁面"),
      ),
      body: pages[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavBarItems,
        onTap: _changePage,
        currentIndex: this._currentIndex,
        type: BottomNavigationBarType.fixed, 
      ),
複製代碼

至此，基本的底部導航欄功能已經實現，可是，此處有一個必須注意的點，BottomNavigationBar若是子項超過4個，不指定type類型 的話，默認爲BottomNavigationBarType.shifting類型，不超過4個爲BottomNavigationBarType.fixed類型，超過了4個，若是 不指定type: BottomNavigationBarType.fixed的話，底部導航欄顏色會消失，此坑須要注意。

優化

細心的同窗可能發現這和閒魚也不像啊，沒有中間的懸浮加號，接下來咱們經過Scaffold中floatingActionButton屬性進行實現。

Scaffold(
      appBar: AppBar(
        title: Text("底部導航欄頁面"),
      ),
      body: pages[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: bottomNavBarItems,
        onTap: _changePage,
        currentIndex: this._currentIndex,
        type: BottomNavigationBarType.fixed,
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.add,
          size: 36,
        ),
        onPressed: _pressAdd,
        backgroundColor: Colors.yellow,
        foregroundColor: Colors.black,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
複製代碼

上述floatingActionButtonLocation是爲了指定FloatingActionButton按鈕位置的，centerDocked值正好實現了咱們 須要的效果，其餘值你們能夠自行嘗試一下。 其中_changePage和_pressAdd方法都是爲了更改當前下標值進行刷新界面的，都是經過setState方法進行刷新界面的。

完整的代碼暫時沒有上傳倉庫，若有須要能夠後臺留言，我會發給你。後期會上傳倉庫。

感謝你們的閱讀，你的閱讀是我前進的動力。