flutter BottomAppBar實(shí)現(xiàn)不規(guī)則底部導(dǎo)航欄
本文實(shí)例為大家分享了flutter實(shí)現(xiàn)不規(guī)則底部導(dǎo)航欄的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)底部導(dǎo)航欄并點(diǎn)擊切換頁面可簡述為有三種方式
- TabBar + TabBarView
- BottomNavigationBar + BottomNavigationBarItem
- 自定義 BottomAppBar
在這里 使用 BottomAppBar 來實(shí)現(xiàn)
/** * 有狀態(tài)StatefulWidget * 繼承于 StatefulWidget,通過 State 的 build 方法去構(gòu)建控件 */ class BotomeMenumBarPage extends StatefulWidget { ////通過構(gòu)造方法傳值 BotomeMenumBarPage(); //主要是負(fù)責(zé)創(chuàng)建state @override BotomeMenumBarPageState createState() => BotomeMenumBarPageState(); } /** * 在 State 中,可以動(dòng)態(tài)改變數(shù)據(jù) * 在 setState 之后,改變的數(shù)據(jù)會(huì)觸發(fā) Widget 重新構(gòu)建刷新 */ class BotomeMenumBarPageState extends State<BotomeMenumBarPage> { BotomeMenumBarPageState(); @override void initState() { ///初始化,這個(gè)函數(shù)在生命周期中只調(diào)用一次 super.initState(); } @override Widget build(BuildContext context) { //構(gòu)建頁面 return buildBottomTabScaffold(); } //當(dāng)前顯示頁面的 int currentIndex = 0; //點(diǎn)擊導(dǎo)航項(xiàng)是要顯示的頁面 final pages = [ ChildItemView("首頁"), ChildItemView("發(fā)現(xiàn)"), ChildItemView("動(dòng)態(tài)"), ChildItemView("我的") ]; Widget buildBottomTabScaffold() { return SizedBox( height: 100, child: Scaffold( //對(duì)應(yīng)的頁面 body: pages[currentIndex], //appBar: AppBar(title: const Text('Bottom App Bar')), //懸浮按鈕的位置 floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, //懸浮按鈕 floatingActionButton: FloatingActionButton( child: const Icon(Icons.add), onPressed: () { print("add press "); }, ), //其他菜單欄 bottomNavigationBar: BottomAppBar( //懸浮按鈕 與其他菜單欄的結(jié)合方式 shape: CircularNotchedRectangle(), // FloatingActionButton和BottomAppBar 之間的差距 notchMargin: 6.0, color: Colors.white, child: Row( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[ buildBotomItem(currentIndex, 0, Icons.home, "首頁"), buildBotomItem(currentIndex, 1, Icons.library_music, "發(fā)現(xiàn)"), buildBotomItem(currentIndex, -1, null, "發(fā)現(xiàn)"), buildBotomItem(currentIndex, 2, Icons.email, "消息"), buildBotomItem(currentIndex, 3, Icons.person, "我的"), ], ), ), )); } // ignore: slash_for_doc_comments /** * @param selectIndex 當(dāng)前選中的頁面 * @param index 每個(gè)條目對(duì)應(yīng)的角標(biāo) * @param iconData 每個(gè)條目對(duì)就的圖標(biāo) * @param title 每個(gè)條目對(duì)應(yīng)的標(biāo)題 */ buildBotomItem(int selectIndex, int index, IconData iconData, String title) { //未選中狀態(tài)的樣式 TextStyle textStyle = TextStyle(fontSize: 12.0,color: Colors.grey); MaterialColor iconColor = Colors.grey; double iconSize=20; EdgeInsetsGeometry padding = EdgeInsets.only(top: 8.0); if(selectIndex==index){ //選中狀態(tài)的文字樣式 textStyle = TextStyle(fontSize: 13.0,color: Colors.blue); //選中狀態(tài)的按鈕樣式 iconColor = Colors.blue; iconSize=25; padding = EdgeInsets.only(top: 6.0); } Widget padItem = SizedBox(); if (iconData != null) { padItem = Padding( padding: padding, child: Container( color: Colors.white, child: Center( child: Column( children: <Widget>[ Icon( iconData, color: iconColor, size: iconSize, ), Text( title, style: textStyle, ) ], ), ), ), ); } Widget item = Expanded( flex: 1, child: new GestureDetector( onTap: () { if (index != currentIndex) { setState(() { currentIndex = index; }); } }, child: SizedBox( height: 52, child: padItem, ), ), ); return item; } }
//子頁面 class ChildItemView extends StatefulWidget { String _title; ChildItemView(this._title); @override _ChildItemViewState createState() => _ChildItemViewState(); } class _ChildItemViewState extends State<ChildItemView> { @override Widget build(BuildContext context) { return Container( child: Center(child: Text(widget._title)), ); } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android使用自定義屬性實(shí)現(xiàn)圖片自動(dòng)播放滾動(dòng)的功能
這篇文章主要介紹了Android使用自定義屬性實(shí)現(xiàn)圖片自動(dòng)播放滾動(dòng)的功能,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05Android編程實(shí)現(xiàn)的手寫板和涂鴉功能
這篇文章主要介紹了Android編程實(shí)現(xiàn)的手寫板和涂鴉功能,涉及Android界面布局及圖形繪制功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01Android實(shí)現(xiàn)打開手機(jī)淘寶并自動(dòng)識(shí)別淘寶口令彈出商品信息功能
最近項(xiàng)目經(jīng)理給我們安排一個(gè)活兒,基于Android開發(fā)實(shí)現(xiàn)打開手機(jī)淘寶,并自動(dòng)識(shí)別淘口令,彈出商品信息,今天小編就抽空給大家分享下這個(gè)需求是怎么實(shí)現(xiàn)的,需要的朋友參考下吧2017-11-11Android Studio項(xiàng)目適配AndroidX(Android 9.0)的方法步驟
這篇文章主要介紹了Android Studio項(xiàng)目適配AndroidX(Android 9.0)的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Kotlin新手基礎(chǔ)學(xué)習(xí)之Elvis操作符
Kotlin 是一種在 Java 虛擬機(jī)上運(yùn)行的靜態(tài)類型編程語言,被稱之為 Android 世界的Swift,由 JetBrains 設(shè)計(jì)開發(fā)并開源,下面這篇文章主要給大家介紹了關(guān)于Kotlin新手基礎(chǔ)學(xué)習(xí)之Elvis操作符的相關(guān)資料,需要的朋友可以參考下。2017-12-12Android下的POS打印機(jī)調(diào)用的簡單實(shí)現(xiàn)
本篇文章主要介紹了Android下的POS打印機(jī)調(diào)用的簡單實(shí)現(xiàn),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-04-04Android計(jì)時(shí)器控件Chronometer應(yīng)用實(shí)例
這篇文章主要為大家詳細(xì)介紹了Android計(jì)時(shí)器控件Chronometer應(yīng)用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09Android GridView中包含EditText的焦點(diǎn)重新獲取方法
這篇文章主要介紹了Android GridView中包含EditText的焦點(diǎn)重新獲取方法,實(shí)例分析了界面刷新時(shí)EditText重新獲取焦點(diǎn)的技巧,需要的朋友可以參考下2016-03-03Android 實(shí)現(xiàn)獲取手機(jī)里面的所有圖片詳解及實(shí)例
這篇文章主要介紹了Android 實(shí)現(xiàn)獲取手機(jī)里面的所有圖片詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05