flutter BottomAppBar实现不规则底部导航栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
/**
 * 有状态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;
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//子页面
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)),
  );
 }
}