导航和路由颤振

托瓦尔德·奥拉夫森

我刚刚开始颤动并尝试构建一个在 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;
    });
  }
}
fstof

因此,在PageView您的列表中,children这些页面应该与您的选项卡相对应。

目前,您的Home小部件已列出 4 次,当您单击选项卡时,这显然不会显示任何差异。

如果你替换 make 你children喜欢这个它应该可以正常工作

children: [Home(), History(), Search(), Bookmarks()]

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章