Flutter仿閑魚底部導航欄實現

概述

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

效果圖

dv0pa-i5098.gif

仿閑魚底部導航欄

要實現閑魚底部導航欄的效果我們需要使用到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> 點擊底部導航欄子顯示項的回調,返回的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方法進行刷新界面的。

完整的代碼暫時沒有上傳倉庫,如有需要可以后臺留言,我會發給你。后期會上傳倉庫。

感謝大家的閱讀,你的閱讀是我前進的動力。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。