Flutter：使用导航器推到新屏幕时保持BottomNavigationBar [英] Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator

问题描述

在iOS中，我们有一个 UITabBarController ，它始终位于屏幕底部当我们推送到新的ViewController时。

In iOS, we have a UITabBarController which stays permanently at the bottom of the screen when we push to a new ViewController.

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

In Flutter, we have a bottomNavigationBar of a Scaffold. However, unlike iOS, when we Navigator.push to a new screen, this bottomNavigationBar disappears.

在我的应用中，我想满足此要求：主屏幕上有一个 bottomNavigationBar ，其中包含2个项目（ a 和 b ）屏幕 A & B 。默认情况下，显示屏幕 A 。在屏幕 A 中，有一个按钮。点击该按钮 Navigator.push 以显示 C 。现在，在屏幕 C 中，我们仍然可以看到 bottomNavigationBar 。点击项目 b ，我进入屏幕 B 。现在在屏幕 B 中，点击 bottomNavigationBar 中的项目 a ，然后返回屏幕 C （不是 A ， A 当前在导航层次结构中的 C 以下）。

In my app, I want to fulfil this requirement: Home screen has a bottomNavigationBar with 2 items (a & b) presenting screen A & B. By default, screen A is displayed. Inside screen A, there is a button. Tap that button, Navigator.push to screen C. Now in screen C, we can still see the bottomNavigationBar. Tap item b, I go to screen B. Now in screen B, tap item a in the bottomNavigationBar, I go back to screen C (not A, A is currently below C in the navigation hierarchy).

我该怎么做？谢谢大家。

How can I do this? Thanks, guys.

编辑：我包括一些图片供演示：

I'm including some pictures for demonstration:

屏幕A
屏幕A

点击转到C 按钮，将其推到屏幕C
屏幕C

Tap Go to C button, push to screen C Screen C

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

Tap Right item inside bottom navigation bar, go to screen B Screen B

推荐答案

tl ; dr：将 CupertinoTabBar 与 CupertinoTabScaffold

tl;dr: Use CupertinoTabBar with CupertinoTabScaffold

问题不在Flutter中，而在UX就像RémiRousselet提到的那样。

The problem is not in Flutter but in UX just like Rémi Rousselet has mentioned.

事实证明，Material Design不建议层次结构中的子页面o访问底部导航栏。

It turned out Material Design doesn't recommend sub-pages in the hierarchy to access the Bottom navigation bar.

但是，《 iOS人机界面指南》建议这样做。因此，要使用此功能，我必须改编Cupertino小部件而不是Material部件。具体来说，主要是返回一个 WidgetsApp / MaterialApp ，其中包含一个 CupertinoTabScaffold 。用 CupertinoTabBar 实现标签栏，每个屏幕都是 CupertinoTabView 。

However, iOS Human Interface Guide recommend this. So, to use this feature, I had to adapt Cupertino widgets instead of Material ones. Specifically, in main, return a WidgetsApp/MaterialApp which contains a CupertinoTabScaffold. Implement the tab bar with a CupertinoTabBar and each screen is a CupertinoTabView.

这篇关于Flutter：使用导航器推到新屏幕时保持BottomNavigationBar的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！