Flutter-BottomNavigationBar的使用说明
Flutter-BottomNavigationBar的使用说明
在目前的app使用过程中,使用最多的场景莫过于有一个底部的Tabbar,在Flutter中也有类似的Widget,这个Widget就是今天要为大家介绍的BottomNavigationBar;BottomNavigationBar这个Widget在Scaffold这个Widget下面。
讲这个Widget之前我们先温习一下之前两个Widgets
Flutter-AppBar的使用说明
Flutter-TabBar的使用说明
BottomNavigationBar的定义
BottomNavigationBar在使用之前,我们看下常用的属性有哪些:
BottomNavigationBar({ Key key, @required this.items,//必须要实现的,最少要有两个子widgets this.onTap,//点击事件,知道当前点击的是哪一个widget this.currentIndex = 0,//当前显示的是哪一个widget this.elevation = 8.0, BottomNavigationBarType type,//设置items的布局 Color fixedColor,//相当于selectedItemColor,但是不能跟selectedItemColor同时存在 this.backgroundColor,//设置背景颜色 this.iconSize = 24.0,//设置图标大小 Color selectedItemColor,//设置选中时的颜色 this.unselectedItemColor,//设置没选中时的颜色 this.selectedIconTheme = const IconThemeData(),//设置选中时的icon的主题 this.unselectedIconTheme = const IconThemeData(),//设置没选中时的icon的主题 this.selectedFontSize = 14.0,//设置选中时文字大小 this.unselectedFontSize = 12.0,//设置没选中时的文字大小 this.selectedLabelStyle,//设置选中时的labe样式 this.unselectedLabelStyle,//设置没选中时的labe样式 this.showSelectedLabels = true,//设置选中时是否显示文字 bool showUnselectedLabels,//设置没选中时是否显示文字 })
BottomNavigationBar的简单使用
BottomNavigationBar首先展示一下点击底部按钮没有反应的demo,就相当于是一个空白的纸张,等候后续再去填充。演示代码如下:
class NavigationBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: SimpleNavBarDemo(), ); }}class SimpleNavBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text('SimpleNavBarDemo'), ),// body: , bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('首页') ), BottomNavigationBarItem( icon: Icon(Icons.business), title: Text('商务') ), BottomNavigationBarItem( icon: Icon(Icons.my_location), title: Text('定位') ), ] ), ); }}
运行效果如下所示:
这个时候的底部Tabbar已经创建完成,点击按钮也有反应,但是在点击的时候不会进行切换,下面我们就对其进行完善。
BottomNavigationBar的完善
要想对底部TabBar的按钮点击进行页面切换,需要有状态的Widget,就要在创建的时候声明为StatefulWidget,下面请看代码:
class NavigationBarDemo extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return MaterialApp( home: ClickedNavBarDemo(), ); }}class ClickedNavBarDemo extends StatefulWidget { @override State<StatefulWidget> createState() => ClickedNavBarDemoState();}class ClickedNavBarDemoState extends State<ClickedNavBarDemo> { int _current_index = 0;//记录当前选择的是哪一个 final List<Widget> _pages = [//装在页面 HomePage(), BusinessPage(), MyLocationPage() ]; @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( appBar: AppBar( title: Text('ClickedNavBarDemoState'), ), body: _pages[_current_index],//展示组件 bottomNavigationBar: BottomNavigationBar( showSelectedLabels: true, type: BottomNavigationBarType.fixed,fixedColor: Colors.redAccent,// unselectedLabelStyle: TextStyle(color: Colors.orange), unselectedItemColor: Colors.grey,// selectedItemColor: Colors.orange, currentIndex: _current_index, onTap: (int index) {//点击事件 setState(() {//修改状态,会自动刷新Widget this._current_index = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.home), title: Text('首页') ), BottomNavigationBarItem( icon: Icon(Icons.business), title: Text('商务') ), BottomNavigationBarItem( icon: Icon(Icons.my_location), title: Text('定位') ), ] ), ); }}//首页页面class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( alignment: Alignment.center, color: Colors.redAccent, child: Text('首页', style: TextStyle( color: Colors.black, fontSize: 40.0 ),), ); }}//商务页面class BusinessPage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( alignment: Alignment.center, color: Colors.redAccent, child: Text('商务', style: TextStyle( color: Colors.black, fontSize: 40.0 ),), ); }}//定位页面class MyLocationPage extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build return Container( alignment: Alignment.center, color: Colors.redAccent, child: Text('定位', style: TextStyle( color: Colors.black, fontSize: 40.0 ),), ); }}
运行效果:
赞 (0)