微信公眾號:[程式設計師指北] 關注可瞭解更多的教程及排版技巧。問題或建議,請公眾號留言;
轉載請註明出處: 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方法進行重新整理介面的。
完整的程式碼暫時沒有上傳倉庫,如有需要可以後臺留言,我會發給你。後期會上傳倉庫。
感謝大家的閱讀,你的閱讀是我前進的動力。