flutter BottomAppBar實現(xiàn)不規(guī)則底部導航欄
本文實例為大家分享了flutter實現(xiàn)不規(guī)則底部導航欄的具體代碼,供大家參考,具體內(nèi)容如下
實現(xiàn)底部導航欄并點擊切換頁面可簡述為有三種方式
- TabBar + TabBarView
- BottomNavigationBar + BottomNavigationBarItem
- 自定義 BottomAppBar
在這里 使用 BottomAppBar 來實現(xiàn)
/** * 有狀態(tài)StatefulWidget * 繼承于 StatefulWidget,通過 State 的 build 方法去構(gòu)建控件 */ class BotomeMenumBarPage extends StatefulWidget { ////通過構(gòu)造方法傳值 BotomeMenumBarPage(); //主要是負責創(chuàng)建state @override BotomeMenumBarPageState createState() => BotomeMenumBarPageState(); } /** * 在 State 中,可以動態(tài)改變數(shù)據(jù) * 在 setState 之后,改變的數(shù)據(jù)會觸發(fā) Widget 重新構(gòu)建刷新 */ class BotomeMenumBarPageState extends State<BotomeMenumBarPage> { BotomeMenumBarPageState(); @override void initState() { ///初始化,這個函數(shù)在生命周期中只調(diào)用一次 super.initState(); } @override Widget build(BuildContext context) { //構(gòu)建頁面 return buildBottomTabScaffold(); } //當前顯示頁面的 int currentIndex = 0; //點擊導航項是要顯示的頁面 final pages = [ ChildItemView("首頁"), ChildItemView("發(fā)現(xiàn)"), ChildItemView("動態(tài)"), ChildItemView("我的") ]; Widget buildBottomTabScaffold() { return SizedBox( height: 100, child: Scaffold( //對應的頁面 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 當前選中的頁面 * @param index 每個條目對應的角標 * @param iconData 每個條目對就的圖標 * @param title 每個條目對應的標題 */ 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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能
這篇文章主要介紹了Android使用自定義屬性實現(xiàn)圖片自動播放滾動的功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05Android實現(xiàn)打開手機淘寶并自動識別淘寶口令彈出商品信息功能
最近項目經(jīng)理給我們安排一個活兒,基于Android開發(fā)實現(xiàn)打開手機淘寶,并自動識別淘口令,彈出商品信息,今天小編就抽空給大家分享下這個需求是怎么實現(xiàn)的,需要的朋友參考下吧2017-11-11Android Studio項目適配AndroidX(Android 9.0)的方法步驟
這篇文章主要介紹了Android Studio項目適配AndroidX(Android 9.0)的方法步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-11-11Android下的POS打印機調(diào)用的簡單實現(xiàn)
本篇文章主要介紹了Android下的POS打印機調(diào)用的簡單實現(xiàn),非常具有實用價值,需要的朋友可以參考下2017-04-04Android GridView中包含EditText的焦點重新獲取方法
這篇文章主要介紹了Android GridView中包含EditText的焦點重新獲取方法,實例分析了界面刷新時EditText重新獲取焦點的技巧,需要的朋友可以參考下2016-03-03Android 實現(xiàn)獲取手機里面的所有圖片詳解及實例
這篇文章主要介紹了Android 實現(xiàn)獲取手機里面的所有圖片詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-05-05