Flattern: Halten BottomNavigationBar, Wenn Push-to-Neuen Bildschirm mit Navigator

In iOS haben wir eine UITabBarController die bleibt dauerhaft an der Unterseite des Bildschirms, wenn wir schieben Sie einen neuen ViewController.

In Flattern, haben wir eine bottomNavigationBar von einem Gerüst. Jedoch, im Gegensatz zu iOS, wenn wir Navigator.push zu einem neuen Bildschirm, dieser bottomNavigationBar verschwindet.

In meiner app möchte ich erfüllen diese Anforderung: Home-Bildschirm hat eine bottomNavigationBar mit 2 Positionen (eine & b) präsentieren Bildschirm Eine & B. Standardmäßig Bildschirm Eine wird angezeigt. Im inneren Bildschirm Eine, dort ist ein button. Tippen Sie auf diese Schaltfläche, Navigator.push Bildschirm C. Jetzt im Bildschirm C, wir können immer noch den bottomNavigationBar. Tippen Sie auf Element b, ich gehe zu Bildschirm B. Jetzt im Bildschirm B, Tippen Sie auf Element eine in der bottomNavigationBar ich gehen Sie zurück zum Bildschirm C (nicht Eine, Eine derzeit unter C in der Navigations-Hierarchie).

Wie kann ich dies tun? Danke, Jungs.

Edit: ich bin auch ein paar Bilder zur demonstration:

Bildschirm Ein
Bildschirm Ein

Tippen Gehen Sie zu C - Taste, push-to-screen C
Bildschirm C

Tippen Recht Element im unteren Navigationsleiste, gehen Sie zu screen B
Bildschirm B

Sind die button Sprachen Sie von innen BottomNavigationBar ?
Nein, der button ist nicht in der unteren Leiste. Es ist in Haupt-Bildschirm. Es ist einfach etwas auslösen Navigator zu push zu einem neuen Bildschirm.
Ich denke, es ist mehr eine UX-problem. Als C anzeigen sollte nicht die bottomnavigationbar. Oder alternativ C sollte zugänglich sein, die bottombar.
Ist es nicht üblich, für Bildschirm in der gleichen Hierarchie in der Lage sein, die Navigationsleiste unten. Nehmen Sie Twitter zum Beispiel (Bitte öffnen Sie die iOS-Twitter-app), Tippen Sie auf einen tweet, eine TweetViewController geschoben bekommen und der unteren Leiste ist immer sichtbar. Ich denke, fast alle populären apps haben dieses Verhalten.
Ich würde Zustimmen, Harry, dass dies durchaus eine gemeinsame Sache in iOS, und TBH flattern die Art und Weise zu animieren, der gesamte Bildschirm ist eigentlich ein bisschen im Gegensatz zu iOS die Möglichkeit der Behandlung der Navigationsleiste - obwohl iOS deckt der Navigationsleiste, wenn es funktioniert modal popup - Bildschirme.

InformationsquelleAutor kcatstack | 2018-04-03

7

tl;dr: Verwenden Sie CupertinoTabBar mit CupertinoTabScaffold

Das problem ist nicht Flattern, aber in UX genau wie Rémi Rousselet erwähnt hat.

Es stellte sich heraus Material Design nicht empfehlen, sub-Seiten in der Hierarchie Zugriff auf die Navigationsleiste Unten.

Jedoch, iOS Human Interface Guide empfehlen. So, um diese Funktion zu nutzen, musste ich passen Cupertino-widgets statt Materielle. Insbesondere in Haupt -, Rückgabe eines WidgetsApp/MaterialApp enthält eine CupertinoTabScaffold. Implementieren Sie die tab-Leiste mit einem CupertinoTabBar und jeder Bildschirm ist ein CupertinoTabView.

Ich habe das gleiche Problem, aber ich bin nicht in der Lage, es zu bekommen, um die Arbeit mit Cupertino.. Ist es möglich, setzen Sie den code, wie du die Dritte Seite zu zeigen, aber immer noch halten die navigation

InformationsquelleAutor kcatstack
5

Müssen Sie erstellen MaterialApp mit Routen und machen BottomNavigationBar ein Geschwisterchen. Dann nutzen Sie MaterialApp.navigatorKey, die Sie passieren zu BottomNavigationBar zu tun, navigation.

https://medium.com/@swav.kulinski/flutter-navigating-off-the-charts-e118562a36a5

InformationsquelleAutor robotoaster
2

Könnten Sie tatsächlich ein Platzhalter innerhalb des Körpers
also die Struktur wie diese
```
- AppBar
- body (dynamic content from placeholder)
- BottomNavigationBar
```
Dann hättest du eine andere Klasse als ein Platzhalter
Also jedes mal, wenn Sie Tippen Sie auf die BottomNavigationBar es aktualisieren von Inhalten des Körpers

Ein Beispiel, das ich gefunden ist hier
https://willowtreeapps.com/ideas/how-to-use-flutter-to-build-an-app-with-bottom-navigation

und hier aber ein bisschen zu Komplex und nicht für mich arbeiten
https://medium.com/@swav.kulinski/flutter-navigating-off-the-charts-e118562a36a5

und diese
https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf

InformationsquelleAutor stuckedoverflow

Ich denke, die #richtige Weg, dies zu tun wäre, haben die BottomNavigationBar verpackt in einem Held in beiden Fällen mit dem gleichen tag. Auf diese Weise, wenn die animation zwischen den Seiten passiert, Sie würde ausgeschlossen werden.

Diese so kurz als ein Beispiel, wie ich das machen könnte, aber ich würde empfehlen die Reinigung it up, d.h. die übergabe der held Zeichenfolge, die widgets zu nutzen, anstatt einen riesigen block aus zu bauen, dass Sie Ihr eigenes widget für BottomNavigationBar.

Beachten Sie, dass während der held den übergang tut es overflow by 0.0000191 pixels auf meinem Handy mindestens, aber in den release-Modus, dass sollte kein Problem sein, denke ich nicht.

import 'package:flattern/material.dart';

void main() => runApp(new MaterialApp(
      home: new Builder(
        builder: (context) => new Scaffold(
              bottomNavigationBar: new Hero(
                tag: "bottomNavigationBar",
                child: new BottomNavigationBar(items: [
                  new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
                  new BottomNavigationBarItem(icon: new Icon(Icons.ac_unit), title: new Text("AC Unit"))
                ]),
              ),
              body: new SafeArea(
                child: new Container(
                  constraints: new BoxConstraints.expand(),
                  color: Colors.green,
                  child: new Column(
                    children: <Widget>[
                      new RaisedButton(
                          child: new Text("Press me"),
                          onPressed: () {
                            Navigator.push(
                                context,
                                new MaterialPageRoute(
                                    builder: (context) => new Scaffold(
                                          bottomNavigationBar: new Hero(
                                            tag: "bottomNavigationBar",
                                            child: new BottomNavigationBar(items: [
                                              new BottomNavigationBarItem(icon: new Icon(Icons.home), title: new Text("Home")),
                                              new BottomNavigationBarItem(icon: new Icon(Icons.ac_unit), title: new Text("AC Unit"))
                                            ]),
                                          ),
                                          body: new SafeArea(
                                            child: new Container(
                                              constraints:
                                                  new BoxConstraints.expand(),
                                              color: Colors.red,
                                              child: new Column(
                                                children: <Widget>[
                                                  new RaisedButton(
                                                    onPressed: () =>
                                                        Navigator.pop(context),
                                                    child: new Text("Back"),
                                                  )
                                                ],
                                              ),
                                            ),
                                          ),
                                        )));
                          })
                    ],
                  ),
                ),
              ),
            ),
      ),
    ));

Ich weiß nicht, wie gut die hero system verarbeitet mehrere Helden etc, und wenn Sie sagen wollte, animieren Sie die Navigationsleiste, dies funktioniert möglicherweise nicht allzu gut.

Es ist ein weiterer Weg, dies zu tun, die es erlauben würde, Sie zu animieren, die Navigationsleiste unten; es ist tatsächlich eine Frage, die schon beantwortet wurde aber: Flattern: der Held übergang + widget-animation in der gleichen Zeit?

InformationsquelleAutor rmtmckenzie

Einen anderen Weg, dies zu erreichen (wenn auch nicht gute Praxis) nest material app in den Körper von Ihrem Gerüst. Und mit "sub-navigation" gibt.

So, Ihre Hierarchie wird wie folgt Aussehen

Material App
  - home
     - Scaffold
       - body
         - Material App
              - Scaffold
                  - AppBar
                  - body
                  ...
         - routes (internal)
       - bottomNavigationBar
  - routes (external)

Habe ich versucht, und es funktioniert perfekt. Leider kann ich nicht den Quellcode posten jetzt.

InformationsquelleAutor Kingsley Kbc Comics

0

Können Sie erstellen Navigator widget in einem Stack widget zu verwenden BottomNavigationBar mit Registerkarten " innere navigation. Sie können WillPopScope zu handhaben Android-Schaltfläche "zurück", um pop-innere Bildschirme tab. Auch Doppel-Tippen Sie unten in der navigation den Punkt zu knallen, innere Bilder einer Registerkarte.

Habe ich einen Beispiel-app
für diese.

Hoffe diese Hilfe!

InformationsquelleAutor Hemant Kaushik

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.