Question

我在MaterialApp中有一个底部导航栏，其中一个页面使用FutureBuilder从我的RESTful API中检索数据。我的底部导航栏需要保存页面的状态，因此我遇到了this guide，该如何使用PageStorage保持底部导航栏的状态。

我遇到的问题是，每当我导航出FutureBuilder页面并再次返回时，它都会重建整个页面并重新执行我的Future方法。

我还阅读了another guide，该书使用AsyncMemoizer仅运行一次我的Future方法（它仍然可以重建页面，但是速度更快）。下面的代码段是我的实现方式。

//Unsure why AsyncMemoizer somehow only works if I use StatelessWidget, and not StatefulWidget
class FuturePage extends StatelessWidget {

    /*I had to comment this constructor out because AsyncMemoizer must be
      initialised with a constant value */
    //const FuturePage({Key key}) : super(key: key);

    //To store my PageStorageKey into bucket
    FuturePage({Key key}) : super(key: key);

    final _memoizer = new AsyncMemoizer();

     _fetchData() => this._memoizer.runOnce(_myFutureMethod);

    Future<MyType> _myFutureMethod() async => print("Executed"); //await post and return data

    @override
    Widget build(BuildContext context) {
        return Container(
          child: FutureBuilder(
            future: _fetchData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                  //set up my widgets
              }
              return Center(child: CircularProgressIndicator());
            }
        );
    }
}

在输出日志中，Executed仅显示一次。但是，我需要使用StatefulWidget而不是StatelessWidget，并且在我的情况下AsyncMemoizer无法正常工作。

class FuturePage extends StatefulWidget {

    FuturePageState createState() => FuturePageState();

    const FuturePage({Key key}) : super(key: key);
}

如何使用StatefulWidget保存FutureBuilder页面的状态？我对颤振和反应式编程的概念还比较陌生。如果我碰巧做错了事，致以最诚挚的歉意！

Answer 1

要实现此行为，您可以使用 AutomaticKeepAliveClientMixin

.csv

您需要实现 AutomaticKeepAliveClientMixin

class FuturePage extends StatefulWidget {

     const FuturePage({Key key}) : super(key: key);

     @override
     FuturePageState createState() => FuturePageState();
}

使用底部导航栏在页面之间导航时，FutureBuilder会继续执行

1 个答案: