首页 文章

使用命名路由颤动持久性导航栏?

提问于
浏览
1

我一直在寻找Flutter的好导航/路由器示例,但我还没找到 .

我想要实现的非常简单:

  • 持久性底部导航栏,突出显示当前的顶级路线

  • 命名路线,以便我可以从应用程序内的任何位置导航到任何路线

  • Navigator.pop应该总是带我到我以前的视图

BottomNavigationBar的官方Flutter演示实现了1但后退按钮和路由不起作用 . 与PageView和TabView相同的问题 . 还有许多其他教程通过实现MaterialApp路由来实现2和3,但它们似乎都没有持久的导航栏 .

有没有满足所有这些要求的导航系统的例子?

2 回答

  • 0

    你要求的是违反material design specification .

    在Android上,“后退”按钮不会在底部导航栏视图之间导航 .

    导航抽屉会给你2和3,但不是1.它取决于对你更重要的东西 .

    您可以尝试使用LocalHistoryRoute . 这可以达到您想要的效果:

    class MainPage extends StatefulWidget {
      @override
      State createState() {
        return new MainPageState();
      }
    }
    
    class MainPageState extends State<MainPage> {
      int _currentIndex = 0;
      List<int> _history = [0];
    
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          appBar: new AppBar(
            title: new Text('Bottom Nav Back'),
          ),
          body: new Center(
            child: new Text('Page $_currentIndex'),
          ),
          bottomNavigationBar: new BottomNavigationBar(
            currentIndex: _currentIndex,
            items: <BottomNavigationBarItem>[
              new BottomNavigationBarItem(
                icon: new Icon(Icons.touch_app),
                title: new Text('keypad'),
              ),
              new BottomNavigationBarItem(
                icon: new Icon(Icons.assessment),
                title: new Text('chart'),
              ),
              new BottomNavigationBarItem(
                icon: new Icon(Icons.cloud),
                title: new Text('weather'),
              ),
            ],
            onTap: (int index) {
              _history.add(index);
              setState(() => _currentIndex = index);
              Navigator.push(context, new BottomNavigationRoute()).then((x) {
                _history.removeLast();
                setState(() => _currentIndex = _history.last);
              });
            },
          ),
        );
      }
    }
    
    class BottomNavigationRoute extends LocalHistoryRoute<void> {}
    
  • 2

    CupertinoTabBar的行为与您描述的完全相同,但是在iOS风格中 . 但它可以是used in MaterialApps .

    Sample Code

相关问题