怎么在flutter中利用BottomAppBar實(shí)現(xiàn)不規(guī)則底部導(dǎo)航欄

今天就跟大家聊聊有關(guān)怎么在flutter中利用BottomAppBar實(shí)現(xiàn)不規(guī)則底部導(dǎo)航欄，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

實(shí)現(xiàn)底部導(dǎo)航欄并點(diǎn)擊切換頁(yè)面可簡(jiǎn)述為有三種方式

• TabBar + TabBarView

• BottomNavigationBar + BottomNavigationBarItem

• 自定義 BottomAppBar

在這里 使用 BottomAppBar 來(lái)實(shí)現(xiàn)

/**
 * 有狀態(tài)StatefulWidget
 * 繼承于 StatefulWidget，通過(guò) State 的 build 方法去構(gòu)建控件
 */
class BotomeMenumBarPage extends StatefulWidget {
 ////通過(guò)構(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)建頁(yè)面
  return buildBottomTabScaffold();
 }

 //當(dāng)前顯示頁(yè)面的
 int currentIndex = 0;
 //點(diǎn)擊導(dǎo)航項(xiàng)是要顯示的頁(yè)面
 final pages = [
  ChildItemView("首頁(yè)"),
  ChildItemView("發(fā)現(xiàn)"),
  ChildItemView("動(dòng)態(tài)"),
  ChildItemView("我的")
 ];

 Widget buildBottomTabScaffold() {
  return SizedBox(
    height: 100,
    child: Scaffold(
     //對(duì)應(yīng)的頁(yè)面
     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, "首頁(yè)"),
        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)前選中的頁(yè)面
  * @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;
 }
}

//子頁(yè)面
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ì)怎么在flutter中利用BottomAppBar實(shí)現(xiàn)不規(guī)則底部導(dǎo)航欄有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。