flutter Bottom AppBar如何實現不規則底部導航欄

flutter Bottom AppBar如何實現不規則底部導航欄，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

實現底部導航欄并點擊切換頁面可簡述為有三種方式

TabBar + TabBarView  BottomNavigationBar + BottomNavigationBarItem  自定義 BottomAppBar

在這里 使用 BottomAppBar 來實現

/** * 有狀態StatefulWidget * 繼承于 StatefulWidget，通過 State 的 build 方法去構建控件 */class BotomeMenumBarPage extends StatefulWidget { ////通過構造方法傳值 BotomeMenumBarPage(); //主要是負責創建state @override BotomeMenumBarPageState createState() => BotomeMenumBarPageState();}/** * 在 State 中,可以動態改變數據 * 在 setState 之后，改變的數據會觸發 Widget 重新構建刷新 */class BotomeMenumBarPageState extends State<BotomeMenumBarPage> { BotomeMenumBarPageState(); @override void initState() {  ///初始化，這個函數在生命周期中只調用一次  super.initState(); } @override Widget build(BuildContext context) {  //構建頁面  return buildBottomTabScaffold(); } //當前顯示頁面的 int currentIndex = 0; //點擊導航項是要顯示的頁面 final pages = [  ChildItemView("首頁"),  ChildItemView("發現"),  ChildItemView("動態"),  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(      //懸浮按鈕 與其他菜單欄的結合方式      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, "發現"),        buildBotomItem(currentIndex, -1, null, "發現"),        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) {  //未選中狀態的樣式  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){   //選中狀態的文字樣式   textStyle = TextStyle(fontSize: 13.0,color: Colors.blue);   //選中狀態的按鈕樣式   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)),  ); }}

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。