显示在应用程序底部的材料窗口小部件,用于在少量视图中进行选择,通常在三到五之间。
底部导航栏由文本标签,图标或两者形式的多个项目组成,布置在一块材料的顶部。它提供应用程序顶级视图之间的快速导航。对于较大的屏幕,侧面导航可能更适合。
底部导航栏通常与Scaffold结合使用,它作为Scaffold.bottomNavigationBar参数提供。
效果图
代码:
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'),
)
);
}
}