我刚开始颤抖并尝试构建一个在 4 个页面之间导航的底部导航栏:
'.../pages/home.dart';
'.../pages/history.dart';
'.../pages/search.dart';
'.../pages/bookmarks.dart';
启动应用程序时,主页应始终显示为主屏幕。(明显地 !!)
我按照一些文档构建导航栏。导航栏似乎没有问题,但问题是
我不知道在哪里以及如何实现其余的导航和选项卡切换逻辑
这是我的main_screen.dart
class _MainScreenState extends State<MainScreen> {
PageController _pageController;
int _page = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
onPageChanged: onPageChanged,
children: List.generate(4, (index) => Home()),
),
bottomNavigationBar: Theme(
data: Theme.of(context).copyWith(
canvasColor: Theme.of(context).primaryColor,
primaryColor: Theme.of(context).accentColor,
textTheme: Theme.of(context).textTheme.copyWith(caption: TextStyle(color: Colors.grey[400]),),
),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Feather.getIconData("home"),
),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(
Feather.getIconData("file"),
),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(
Feather.getIconData("search"),
),
title: Container(height: 0.0),
),
BottomNavigationBarItem(
icon: Icon(
Feather.getIconData("bookmark"),
),
title: Container(height: 0.0),
),
],
onTap: navigationTapped,
currentIndex: _page,
),
),
);
}
void navigationTapped(int page){
_pageController.jumpToPage(page);
}
@override
void initState(){
super.initState();
_pageController = PageController(initialPage: 0);
}
@override
void dispose() {
super.dispose();
_pageController.dispose();
}
void onPageChanged(int page){
setState(() {
this._page = page;
});
}
}