BottomNavigationBar 是 Flutter 的一个组件,可以实现底部导航栏的功能,其中 currentIndex 属性为显示页面的序号,由于不同页面显示的 AppBar 和 body 都不同,所以可以根据 currentIndex 的值来动态加载显示的视图。
Demo 实现底部三个导航栏,然后点击后切换不同的 AppBar 和 body
先来效果图:
下面是代码部分:
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
//当前页面索引
var _currentIndex = 0;
//当前页面对象,需要自己创建
HomePage homePage;
VideoPage videoPage;
PersonPage personPage;
//当前页面appBar样式
getCurrentAppBar() {
if (_currentIndex == 0) {
return homeAppBar;
} else if (_currentIndex == 1) {
return vedioAppBar;
} else if (_currentIndex == 2) {
return personAppBar;
}
}
//当前页面body样式
getCurrentBoby() {
if (_currentIndex == 0) {
//??运算,当homePage为空时将new HomePage()赋值给homePage,否则保持不变
homePage ??= new HomePage();
return homePage;
} else if (_currentIndex == 1) {
videoPage ??= new VideoPage();
return videoPage;
} else if (_currentIndex == 2) {
personPage ??= new PersonPage();
return PersonPage();
}
}
//底部导航栏items
var bottomNavigationBarItems = [
new BottomNavigationBarItem(
title: Text(
'首页',
),
icon: Icon(Icons.home,),
),
new BottomNavigationBarItem(
title: Text(
'发现',
),
icon: Icon(Icons.explore,),
),
new BottomNavigationBarItem(
title: Text(
'我',
),
icon: Icon(Icons.perm_identity,),
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: getCurrentAppBar(),
body: getCurrentBoby(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
items: bottomNavigationBarItems,
type: BottomNavigationBarType.fixed,
onTap: ((index) {
setState(() {
_currentIndex = index;
});
}),
),
);
}
}
其中各页面的 appbar 的样式如下:
//首页appbar
final Widget homeAppBar = new AppBar(
title: Text('首页'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
print("转跳搜索页面");
},
),
],
);
//发现页appbar
final Widget vedioAppBar = new AppBar(
title: Text('视频'),
);
//我的页面appbar
final Widget personAppBar = new AppBar(
title: Text('我'),
);
其中 AppBar 和 body 部分都是通过函数根据当前页面的索引来加载的,达到点击底部导航栏的不同 item 显示不同页面 。