Wie zu bewahren widget Staaten flattern, beim navigieren mit BottomNavigationBar?

Derzeit arbeite ich am Aufbau der Flutter-app, die beibehalten wird, die Staaten bei der Navigation von einem Bildschirm zum anderen und wieder zurück, wenn die Nutzung BottomNavigationBar. Nur wie funktioniert es in der Spotify mobile Anwendung; wenn Sie eine Navigation gestartet haben, bis zu einer bestimmten Ebene in der navigationshierarchie auf einem der hauptbildschirme, änderung der Bildschirm über der unteren Navigationsleiste, und später Wechsel zurück auf den alten screen, beibehalten wird, wobei der Benutzer in der Hierarchie, einschließlich der Erhaltung des Staates ist.

Habe ich meinen Kopf gegen die Wand, versucht, verschiedene Dinge ohne Erfolg.

Möchte ich wissen, wie kann ich verhindern, dass die Seiten in pageChooser(), wenn umgeschaltet wird, sobald der Benutzer tippt auf die BottomNavigationBar Element, vom Umbau selbst, und statt dessen Erhaltung der Staat Sie schon gefunden, sich in (die Seiten sind alle stateful-Widgets).

import 'package:flutter/material.dart';
import './page_plan.dart';
import './page_profile.dart';
import './page_startup_namer.dart';

void main() => runApp(new Recipher());

class Recipher extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Pages();
  }
}

class Pages extends StatefulWidget {
  @override
  createState() => new PagesState();
}

class PagesState extends State<Pages> {
  int pageIndex = 0;


  pageChooser() {
    switch (this.pageIndex) {
      case 0:
        return new ProfilePage();
        break;

      case 1:
        return new PlanPage();
        break;

      case 2:
        return new StartUpNamerPage(); 
        break;  

      default:
        return new Container(
          child: new Center(
            child: new Text(
              'No page found by page chooser.',
              style: new TextStyle(fontSize: 30.0)
              )
            ),
          );     
    }
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: pageChooser(),
        bottomNavigationBar: new BottomNavigationBar(
          currentIndex: pageIndex,
          onTap: (int tappedIndex) { //Toggle pageChooser and rebuild state with the index that was tapped in bottom navbar
            setState(
              (){ this.pageIndex = tappedIndex; }
              ); 
            },
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
              title: new Text('Profile'),
              icon: new Icon(Icons.account_box)
              ),
              new BottomNavigationBarItem(
                title: new Text('Plan'),
                icon: new Icon(Icons.calendar_today)
              ),
                new BottomNavigationBarItem(
                title: new Text('Startup'),
                icon: new Icon(Icons.alarm_on)
              )
            ],
          )
      )
    );
  }
}

halten Sie die einzelnen Seiten mithilfe von Stapel. Dies könnte hilfreich sein: stackoverflow.com/questions/45235570/...
Nett, danke. Dieser arbeitete. Habe ich eigentlich schon versucht, eine IndexedStack, aber ich sehe jetzt, dass dies nicht die gleiche Weise funktionieren wie auf der Bühne und Tickermode.

InformationsquelleAutor ArtBelch | 2018-03-22

dart flutter

Verwenden AutomaticKeepAliveClientMixin zu zwingen, Ihren Reiter Inhalte nicht entsorgt werden.

class PersistantTab extends StatefulWidget {
  @override
  _PersistantTabState createState() => _PersistantTabState();
}

class _PersistantTabState extends State<PersistantTab> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  //Setting to true will force the tab to never be disposed. This could be dangerous.
  @override
  bool get wantKeepAlive => true;
}

Stellen Sie sicher, dass Sie Ihr tab nicht entsorgt, wenn es nicht erforderlich ist, beibehalten werden, machen wantKeepAlive Gegenzug eine Klassenvariable. Rufen Sie updateKeepAlive() zum aktualisieren der keep-alive-status.

Beispiel mit dynamischen lebendig zu halten:

//class PersistantTab extends StatefulWidget ...

class _PersistantTabState extends State<PersistantTab>
    with AutomaticKeepAliveClientMixin {
  bool keepAlive = false;

  @override
  void initState() {
    doAsyncStuff();
  }

  Future doAsyncStuff() async {
    keepAlive = true;
    updateKeepAlive();
    //Keeping alive...

    await Future.delayed(Duration(seconds: 10));

    keepAlive = false;
    updateKeepAlive();
    //Can be disposed whenever now.
  }

  @override
  bool get wantKeepAlive => keepAlive;

  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

zu wem sollten wir gehen konform mit AutomaticKeepAliveClientMixin das übergeordnete widget oder das widget angezeigt werden soll, wenn die Taste gedrückt wird?

InformationsquelleAutor Charles Crete

Anstatt neue Instanz jedes mal, wenn Sie pageChooser, eine Instanz erstellt und zurück das gleiche.

Beispiel:

class Pages extends StatefulWidget {
  @override
  createState() => new PagesState();
}

class PagesState extends State<Pages> {
  int pageIndex = 0;

  //Create all the pages once and return same instance when required
  final ProfilePage _profilePage = new ProfilePage(); 
  final PlanPage _planPage = new PlanPage();
  final StartUpNamerPage _startUpNamerPage = new StartUpNamerPage();


  Widget pageChooser() {
    switch (this.pageIndex) {
      case 0:
        return _profilePage;
        break;

      case 1:
        return _planPage;
        break;

      case 2:
        return _startUpNamerPage;
        break;

      default:
        return new Container(
          child: new Center(
              child: new Text(
                  'No page found by page chooser.',
                  style: new TextStyle(fontSize: 30.0)
              )
          ),
        );
    }
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Scaffold(
            body: pageChooser(),
            bottomNavigationBar: new BottomNavigationBar(
              currentIndex: pageIndex,
              onTap: (int tappedIndex) { //Toggle pageChooser and rebuild state with the index that was tapped in bottom navbar
                setState(
                        (){ this.pageIndex = tappedIndex; }
                );
              },
              items: <BottomNavigationBarItem>[
                new BottomNavigationBarItem(
                    title: new Text('Profile'),
                    icon: new Icon(Icons.account_box)
                ),
                new BottomNavigationBarItem(
                    title: new Text('Plan'),
                    icon: new Icon(Icons.calendar_today)
                ),
                new BottomNavigationBarItem(
                    title: new Text('Startup'),
                    icon: new Icon(Icons.alarm_on)
                )
              ],
            )
        )
    );
  }
}

Oder Sie können Gebrauch machen von widgets wie Angezeigten oder Stack, um das gleiche zu erreichen.

Hoffe, das hilft!

Danke für deine Antwort. Ich löste das problem mit einem Stack kombiniert mit Off-und Tickermode. :-))
wenn die Antwort befriedigen, Ihre Frage, bitte markieren Sie es als richtig 🙂
könnten Sie Ihre Lösung bitte?

InformationsquelleAutor Hemanth Raj

1

Der bequemste Weg, die ich gefunden habe, das zu tun, ist mit PageStorage widget zusammen mit PageStorageBucket, das wirkt wie ein Schlüssel-Wert-beständigen Schicht.

Gehen Sie durch diesen Artikel eine schöne Erklärung -> https://steemit.com/utopian-io/@tensor/persisting-user-interface-state-and-building-bottom-navigation-bars-in-dart-s-flutter-framework
- In diesem Fall, meine Seiten sind noch Daten laden
InformationsquelleAutor Anirudh Agarwal

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.