问题描述
在iOS中,我们有一个,它始终位于屏幕底部当我们推送到新的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
点击转到C 按钮,将其推到屏幕C
Tap Go to C button, push to screen CScreen C
点击底部导航栏中的右项,转到屏幕B
Tap Right item inside bottom navigation bar, go to screen BScreen B
推荐答案
tl ; dr:将与
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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!