Question

我一直在为Flutter寻找一个好的导航/路由器示例，但我还没有设法找到它。

我想要实现的目标非常简单：

突出显示当前顶级路线的持久性底部导航栏
命名路线，以便我可以从应用内的任何位置导航到任何路线
Navigator.pop应该总是带我到我之前的观点

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

是否有满足所有这些要求的导航系统示例？

Answer 1

使用自定义Navigator可以满足您的所有3个要求。

Flutter团队对此做了video，他们关注的文章在这里：https://medium.com/flutter/getting-to-the-bottom-of-navigation-in-flutter-b3e440b9386

基本上，您需要将脚手架的主体包装在自定义Navigator中：

class _MainScreenState extends State<MainScreen> {
  final _navigatorKey = GlobalKey<NavigatorState>();

  // ...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        initialRoute: '/',
        onGenerateRoute: (RouteSettings settings) {
          WidgetBuilder builder;
          // Manage your route names here
          switch (settings.name) {
            case '/':
              builder = (BuildContext context) => HomePage();
              break;
            case '/page1':
              builder = (BuildContext context) => Page1();
              break;
            case '/page2':
              builder = (BuildContext context) => Page2();
              break;
            default:
              throw Exception('Invalid route: ${settings.name}');
          }
          // You can also return a PageRouteBuilder and
          // define custom transitions between pages
          return MaterialPageRoute(
            builder: builder,
            settings: settings,
          );
        },
      ),
      bottomNavigationBar: _yourBottomNavigationBar,
    );
  }
}

在底部导航栏中，要导航到新的自定义Navigator中的新屏幕，只需调用以下名称：

_navigatorKey.currentState.pushNamed('/yourRouteName');

要达到第三个要求，即Navigator.pop带您到上一个视图，您将需要用Navigator包装自定义WillPopScope：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: WillPopScope(
      onWillPop: () async {
        if (_navigatorKey.currentState.canPop()) {
          _navigatorKey.currentState.pop();
          return false;
        }
        return true;
      },
      child: Navigator(
        // ...
      ),
    ),
    bottomNavigationBar: _yourBottomNavigationBar,
  );
}

就应该这样！无需手动处理弹出或管理自定义历史记录列表。

Answer 2

您要求的内容会违反material design specification。

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

导航抽屉会给你2和3，但不会给你。这取决于你对什么更重要。

您可以尝试使用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> {}

Answer 3

CupertinoTabBar表现与您描述的完全相同，但是在iOS风格中。但它可以是used in MaterialApps。

Sample Code

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

3 个答案: