/**
 * 有狀態(tài)StatefulWidget
 * 繼承于 StatefulWidget，通過 State 的 build 方法去構建控件
 */
class BotomeMenumBarPage extends StatefulWidget {
 ////通過構造方法傳值
 BotomeMenumBarPage();

 //主要是負責創(chuàng)建state
 @override
 BotomeMenumBarPageState createState() => BotomeMenumBarPageState();
}

/**
 * 在 State 中,可以動態(tài)改變數(shù)據(jù)
 * 在 setState 之后，改變的數(shù)據(jù)會觸發(fā) Widget 重新構建刷新
 */
class BotomeMenumBarPageState extends State<BotomeMenumBarPage> {
 BotomeMenumBarPageState();

 @override
 void initState() {
  ///初始化，這個函數(shù)在生命周期中只調用一次
  super.initState();
 }

 @override
 Widget build(BuildContext context) {
  //構建頁面
  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(
      //懸浮按鈕 與其他菜單欄的結合方式
      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)),
  );
 }
}