本文介绍了Flutter:使用导航器推到新屏幕时保持BottomNavigationBar的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 20:58