Flattern Wechseln Sie zur Registerkarte neu Geladen Widgets und läuft FutureBuilder

Das Problem:

Habe ich 2 Registerkarten mit Standard-Registerkarten-Controller, etwa so:

Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        drawer: Menu(),
        appBar: AppBar(
          title: Container(
            child: Text('Dashboard'),
          ),
          bottom: TabBar(
            tabs: <Widget>[
              Container(
                padding: EdgeInsets.all(8.0),
                child: Text('Deals'),
              ),
              Container(
                padding: EdgeInsets.all(8.0),
                child: Text('Viewer'),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            DealList(),
            ViewersPage(),
          ],
        ),
      ),
    );
  }
}

Den DealList() ist ein StatefulWidget was ist so gebaut:

Widget build(BuildContext context) {
    return FutureBuilder(
      future: this.loadDeals(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        print('Has error: ${snapshot.hasError}');
        print('Has data: ${snapshot.hasData}');
        print('Snapshot data: ${snapshot.data}');
        return snapshot.connectionState == ConnectionState.done
            ? RefreshIndicator(
                onRefresh: showSomething,
                child: ListView.builder(
                  physics: const AlwaysScrollableScrollPhysics(),
                  itemCount: snapshot.data['deals'].length,
                  itemBuilder: (context, index) {
                    final Map deal = snapshot.data['deals'][index];
                    print('A Deal: ${deal}');
                    return _getDealItem(deal, context);
                  },
                ),
              )
            : Center(
                child: CircularProgressIndicator(),
              );
      },
    );
  }
}

Mit den oben genannten, hier ist, was passiert, wenn ich wechseln Sie zurück zu den DealList() Registerkarte: Es lädt.

Flattern Wechseln Sie zur Registerkarte neu Geladen Widgets und läuft FutureBuilder

Gibt es eine Möglichkeit zu verhindern, re-run der FutureBuilder, wenn einmal getan? (der plan ist für Benutzer, die in der RefreshIndicator neu zu laden. So ändern tabs sollte nicht lösen nichts, es sei denn, explizit getan durch den Benutzer.)

InformationsquelleAutor KhoPhi | 2018-07-07
  1. 50

    Gibt es hier zwei Probleme, das erste:

    Wenn die TabController schaltet, tabs, entlädt es die alte widget-Baum Speicher zu speichern. Wenn Sie dieses Verhalten ändern möchten, müssen Sie mixin AutomaticKeepAliveClientMixin Ihrem tab-widget ist-Zustand.

    class _DealListState extends State<DealList> with AutomaticKeepAliveClientMixin<DealList> {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); //need to call super method.
    return /* ... */
  }
}

    Das zweite Problem ist, bei Ihrer Nutzung der FutureBuilder -
    Wenn Sie eine neue Future zu einem FutureBuilder es nicht sagen können, dass die Ergebnisse wären die gleichen wie beim letzten mal, so hat es neu zu erstellen. (Denken Sie daran, dass Flattern können rufen Sie Ihren build-Methode bis zu einmal pro frame).

    return FutureBuilder(
  future: this.loadDeals(), //Creates a new future on every build invocation.
  /* ... */
);

    Statt, die Sie zuweisen möchten, in der Zukunft zu einem Mitglied auf die State-Klasse in initState, und dann diesen Wert übergeben, um die FutureBuilder. Das sorgt dafür, dass die Zukunft sind die gleichen, die auf spätere Umbauten. Wenn Sie erzwingen möchten, dass der Staat, um neu zu laden Sie die Angebote, können Sie immer erstellen Sie eine Methode, die eine Neuzuordnung der _loadingDeals Mitglied und fordert setState.

    Future<...> _loadingDeals;

@override
void initState() {
  _loadingDeals = loadDeals(); //only create the future once.
  super.initState();
}

@override
Widget build(BuildContext context) {
  super.build(context); //because we use the keep alive mixin.
  return new FutureBuilder(future: _loadingDeals, /* ... */);
}
    • In der Tat, Sie töteten zwei meiner Probleme mit einer Klappe. Dank so viel. Wirklich auf dem Punkt und die Erklärung macht Sinn, genau wie die Lösung funktioniert. Jetzt funktioniert es.
    • Vielen Dank mein Freund, das war eine sehr hilfreiche Informationen.
    • gibt es eine Lösung ohne initState? Denn ich bin mit streamBuilder mit Block-Muster. alle Daten-fetch-Logik ist in meinem bloc-Klasse.
    • überprüfen vermeiden, initState, verwenden Sie AsyncMemoizer::runOnce() medium.com/saugo360/...
    • Ich habe versucht zu implementieren, das in meiner app, dass bottomNavigationBar, aber wenn ich die Seite wechseln, ist es immer noch feuert die API.
    • Ist es möglich, um diese arbeiten für max 3 tabs? Die vorherigen und der nächsten?

    InformationsquelleAutor Jonah Williams
Schreibe einen Kommentar