• Zuhause
  • Artikel
  • So gehen Sie mit der Navigation in Ihren Flutter-Apps um
Veröffentlicht am 22-02-2019

So gehen Sie mit der Navigation in Ihren Flutter-Apps um

Flutter ist ein Google-Produkt, mit dem mobile Hybrid-Apps mit Dart als Codiersprache erstellt werden.

Eine App-Seite in Flutter ist ein Widget, eine Beschreibung der dargestellten Benutzeroberfläche. Um eine seriöse App zu erstellen, benötigen Sie viele dieser Seiten mit einer Vielzahl von Funktionen. Nachdem Sie eine neue Seite erstellt haben, ist alles in Ordnung. Aber wie bewegst du dich zwischen ihnen?

Ganz einfach: Sie verwenden die Navigator-Klasse, die im Flutter-SDK integriert ist.

Navigator

Navigator ist ein weiteres Widget, das die Seiten einer App in einem stapelartigen Format verwaltet. Die Vollbildseiten werden bei Verwendung im Navigator als Routen bezeichnet. Der Navigator funktioniert wie eine normale Stack-Implementierung. Es gibt zwei bekannte Methoden, Push und Pop.

  1. Push: Mit der Push-Methode wird eine weitere Route oben im aktuellen Stapel hinzugefügt. Die neue Seite wird über der vorherigen angezeigt.
    1. Pop: Da der Navigator wie ein Stack arbeitet, verwendet er das LIFO-Prinzip (Last-In, First-Out). Die Pop-Methode entfernt die oberste Route vom Stapel. Dadurch wird dem Benutzer die vorherige Seite angezeigt.
    2. In diesem Beitrag werde ich Folgendes anzeigen:

    3. Zwei Möglichkeiten der Navigation und
      1. Daten an die nächste Seite übergeben.
      2. Normale Navigation.

        Es gibt zwei Möglichkeiten, dies zu tun:

        Eine neue Seite innerhalb der Push-Methode erstellen

        In dieser Methode wird eine neue Route mithilfe der MaterialPageRoute-Klasse erstellt. Darin wird eine neue Seite (Widget) erstellt. Diese beiden Erstellungsanweisungen sind in der Push-Methode eingeschlossen und fügen diese Seite am oberen Rand des Stapels hinzu.

        Um ein einfaches Beispiel anzuzeigen, verwende ich Code aus einem früheren Repo- und Blogbeitrag. Ich habe es so bearbeitet, dass die CustomCard-Komponente eine Schaltfläche enthält. Diese Schaltfläche verwendet die Push-Methode, während die neue Route und Seite darin erstellt werden.

        Widget erstellen (BuildContext-Kontext) {
          Retourkarte (
            Kind: Spalte (
              Kinder:  [
                Text ("Card $ index"),
                FlatButton (
                  Kind: Text ("Press Me"),
                  onPressed: () {
                    Navigator.push (Kontext, MaterialPageRoute  (
                      Builder: (BuildContext-Kontext) {
                        zurück Gerüst (
                          appBar: AppBar (Titel: Text ('Meine Seite')),
                          Körper: Zentrum (
                            Kind: FlatButton (
                              Kind: Text ('POP'),
                              onPressed: () {
                                Navigator.pop (Kontext);
                              },
                            )
                          )
                        );
                      },
                    ));
                  }),
            ]
          ));
        }

        Fügen Sie dem Einstiegspunkt der Apps Routen hinzu

        Im Nachhinein haben Apps viele Seiten und meistens auch komplexe Codierungen. Es wäre nicht leicht, eine neue Seite zu erstellen, in die Sie hineinschieben können. Dies gilt insbesondere, wenn auf die Seite aus vielen verschiedenen Bereichen zugegriffen wird. Sie könnten den Code für jede Route verlieren.

        Bei der zweiten Methode wird die Seite also einmal erstellt, jedoch als Route am Einstiegspunkt der App main.dart hinzugefügt. Diese Routen werden wie Dateipfade benannt, da die Stammseite der App der Pfad / ist.

        Du baust zuerst eine neue App-Seite auf:

        Die Klasse SecondPage erweitert StatelessWidget {
        @override
          Widget erstellen (BuildContext-Kontext) {
            zurück Gerüst (
              appBar: AppBar (
                Titel: Text ('Zweite Seite'),
              )
              Körper: Zentrum (
                Kind: RaisedButton (
                  Kind: Text ("Zurück zum Startbildschirm"),
                  color: Theme.of (context) .primaryColor,
                  textColor: Colors.white,
                  onPressed: () => Navigator.pop (Kontext)),
              )
            );
          }
        }

        Importieren Sie dann die neue Seite in die Datei "main.dart" und fügen Sie sie der Liste der Routen im MaterialApp-Konstruktor hinzu.

        Klasse MyApp erweitert StatelessWidget {
        // Dieses Widget ist das Stammverzeichnis Ihrer Anwendung.
          @override
          Widget erstellen (BuildContext-Kontext) {
            MaterialApp zurückgeben (
              Titel: "Flutter Demo",
              theme: ThemeData (
                primarySwatch: Colors.green,
              )
              home: MyHomePage (Titel: "Flutter Demo Home Page"),
              Routen:  {
                '/ a': (BuildContext-Kontext) => SecondPage (),
              });
          }
        }

        Wir bearbeiten die onPressed-Methode des FlatButton in der CustomCard folgendermaßen

        Navigator.pushNamed (Kontext, '/ a');

        In dem obigen Beispiel wird der Benutzer zu der erstellten SecondPage-Klasse umgeleitet, da es sich um die entsprechende Seite zum Pfad / a handelt.

        Übergeben von Daten zwischen Seiten

        Nun für den letzten Teil der Demo, Weitergabe der Daten an die nächste Seite. Dies erfordert auf einfache Weise eine Kombination der beiden oben genannten Navigationsmethoden.

        Die pushNamed-Methode unterstützt keine Weitergabe von Daten. Die erste Methode, eine neue Route innerhalb der Push-Methode zu erstellen, funktioniert jedoch. Es muss keine neue Seite erstellt werden. Der Builder-Parameter von MaterialPageRoute ruft jetzt den Konstruktor der SecondPage-Klasse auf.

        Aktualisieren Sie die SecondPage-Klasse, um die an sie übergebenen Daten zu akzeptieren, wie folgt:

        Die Klasse SecondPage erweitert StatelessWidget {
        SecondPage ({@ required this.title});
        Endtitel;
        @override
          Widget erstellen (BuildContext-Kontext) {
            zurück Gerüst (
              appBar: AppBar (
                Titel: Text ('Kartennr. $ Titel'),
              )
              Körper: Zentrum (...),
            );
          }
        }

        Die onPressed-Methode von FlatButtons wird jetzt wie folgt bearbeitet:

        Navigator.push (Kontext,
          MaterialPageRoute (
            Builder: (Kontext) => SecondPage (Titel: Index)
          )
        );

        Der Index der Karte wird nun an die SecondPage-Klasse übergeben und in der AppBar angezeigt.

        Danke fürs Lesen! Das Repo finden Sie hier.

        Hier finden Sie das Commit für die folgenden Änderungen.

Siehe auch

Lernen Sie Shane Lennox kennen und gestalten Sie Produkte für die Zukunft