Flutter:使用导航器推送到新屏幕时保持底部导航栏

Question

在 iOS 中，我们有一个 UITabBarController当我们推送到新的 ViewController 时，它会永久保持在屏幕底部。

在 Flutter 中，我们有一个 Scaffold 的 bottomNavigationBar。但是，与 iOS 不同的是，当我们 Navigator.push 到一个新屏幕时，这个 bottomNavigationBar 会消失。

在我的应用程序中，我想满足这个要求:主屏幕有一个 bottomNavigationBar 与 2 个项目 (a & b) 呈现屏幕A & B。默认情况下会显示屏幕A。在屏幕A内，有一个按钮。点击那个按钮，Navigator.push 到屏幕C。现在在屏幕 C 中，我们仍然可以看到 bottomNavigationBar。点击项目b，我进入屏幕B。现在在屏幕B中，点击bottomNavigationBar中的项目a，我回到屏幕C(不是A，A 当前在导航层次结构中位于 C 之下)。

我该怎么做？谢谢各位。

编辑:我包含一些图片用于演示:

屏幕 A Screen A

点击转到C按钮，推到屏幕C Screen C

点击底部导航栏中的右项，转到屏幕B Screen B

Answer 1

截图:

---

起点:

void main() => runApp(MaterialApp(home: HomePage()));

HomePage [BottomNavigationBar + Page1 ]

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.orange,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.call), label: 'Call'),
          BottomNavigationBarItem(icon: Icon(Icons.message), label: 'Message'),
        ],
      ),
      body: Navigator(
        onGenerateRoute: (settings) {
          Widget page = Page1();
          if (settings.name == 'page2') page = Page2();
          return MaterialPageRoute(builder: (_) => page);
        },
      ),
    );
  }
}

第一页:

class Page1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page1')),
      body: Center(
        child: RaisedButton(
          onPressed: () => Navigator.pushNamed(context, 'page2'),
          child: Text('Go to Page2'),
        ),
      ),
    );
  }
}

第二页:

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(appBar: AppBar(title: Text('Page2')));
}