フラッターを開始し、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;
});
}
}