Question

有人对在Flutter中弄清楚嵌套导航有什么建议吗？

我想要的是即使在重定向到新屏幕时也保持一个持久的BottomNavigationBar。与YouTube类似，即使您更深入地浏览菜单，底部的栏始终始终存在。

我无法从文档中找出答案。

到目前为止，我能找到的唯一深入到我的要求的唯一教程是https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf (source code)。但是，这非常令人困惑。

现在我正在使用

Navigator.push(context,
                MaterialPageRoute(builder: (BuildContext context) {
              return Container()

但是，它只是将新的窗口小部件推入整个堆栈中，使BottomNavigationBar受宠若惊。

任何提示将不胜感激！

Answer 1

这是一个简单的示例，甚至还支持使用标签栏弹出到第一个屏幕。

a = sign (e.g. ("=2+5"))

Answer 2

以下是持久性BottomNavigationBar作为启动器的示例代码：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(),
    );
  }
}

class MainPage extends StatelessWidget {
  final navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Expanded(
            child: Navigator(
              key: navigatorKey,
              onGenerateRoute: (route) => MaterialPageRoute(
                    settings: route,
                    builder: (context) => PageOne(),
                  ),
            ),
          ),
          BottomNavigationBar(navigatorKey)
        ],
      ),
    );
  }
}

class BottomNavigationBar extends StatelessWidget {
  final GlobalKey<NavigatorState> navigatorKey;

  BottomNavigationBar(this.navigatorKey) : assert(navigatorKey != null);

  Future<void> push(Route route) {
    return navigatorKey.currentState.push(route);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: ButtonBar(
        alignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          RaisedButton(
            child: Text("PageOne"),
            onPressed: () {
              push(MaterialPageRoute(builder: (context) => PageOne()));
            },
          ),
          RaisedButton(
            child: Text("PageTwo"),
            onPressed: () {
              push(MaterialPageRoute(builder: (context) => PageTwo()));
            },
          )
        ],
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Page One"),
          RaisedButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text("Pop"),
          ),
        ],
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("Page Two"),
          RaisedButton(
            onPressed: (){
              Navigator.of(context).pop();
            },
            child: Text("Pop"),
          ),
        ],
      ),
    );
  }
}

这是屏幕记录的方式

如何在Flutter中进行嵌套导航

2 个答案: