显示在应用程序底部的材料窗口小部件,用于在少量视图中进行选择,通常在三到五之间。

底部导航栏由文本标签,图标或两者形式的多个项目组成,布置在一块材料的顶部。它提供应用程序顶级视图之间的快速导航。对于较大的屏幕,侧面导航可能更适合。

底部导航栏通常与Scaffold结合使用,它作为Scaffold.bottomNavigationBar参数提供。
效果图
#####代码:

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
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "title",
theme: ThemeData.light(),
home: _home(),
);
}
}
class _home extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return _homeState();
}
}
class _homeState extends State<_home>{
final selectionColor=Colors.blue;//选中的颜色
final unSelectionColor=Colors.grey;//未选中的颜色
List<Widget> widgetList=List();//一个装切换页面的集合
int _curIndex=0;//默认选中的页下标
@override
void initState() {//重写initState 添加b布局
widgetList..add(HomeScreen())
..add(EmailScreen())//.. 返回调用者本身
..add(BlankScreen());
super.initState();
}

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
bottomNavigationBar: BottomNavigationBar(//创建BottomNavigationBar
type: BottomNavigationBarType.fixed,//fixed点击时不移动,默认样式,shifting点击时动画和标签会淡入
currentIndex: _curIndex,//默认页下标
onTap: (int index){//点击时切换下标
setState(() {
_curIndex=index;
});
},
items: [//装入BottomNavigationBarItem 并设置样式
BottomNavigationBarItem(
icon: Icon(Icons.home,color:_curIndex==0?selectionColor:unSelectionColor,),
title: Text("home",style: TextStyle(color: _curIndex==0?selectionColor:unSelectionColor),)
),
BottomNavigationBarItem(
icon: Icon(Icons.account_balance,color: _curIndex==1?selectionColor:unSelectionColor,),
title: Text("blank",style: TextStyle(color: _curIndex==1?selectionColor:unSelectionColor),)
),
BottomNavigationBarItem(
icon: Icon(Icons.email,color: _curIndex==2?selectionColor:unSelectionColor,),
title: Text("email",style: TextStyle(color: _curIndex==2?selectionColor:unSelectionColor),)
),
]
),
body: widgetList[_curIndex],//主页面
);
}
}
//随便生成的3个页面
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('HOME'),
),
body:Center(
child: Text('HOME'),
)
);
}
}
class EmailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('EmailScreen'),
),
body:Center(
child: Text('EmailScreen'),
)
);
}
}
class BlankScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(
title: Text('BlankScreen'),
),
body:Center(
child: Text('BlankScreen'),
)
);
}
}