Flutter切换到选项卡重新加载小部件并运行FutureBuilder [英] Flutter Switching to Tab Reloads Widgets and runs FutureBuilder

问题描述

问题：

我有2个使用默认标签控制器的标签，例如：

I have 2 tabs using Default Tabs Controller, like 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(),
          ],
        ),
      ),
    );
  }
}

DealList（）是 StatefulWidget ，其构建方式如下：

The DealList() is a StatefulWidget which is built like this:

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(),
              );
      },
    );
  }
}

使用上述方法，每当我切换回去时，都会发生以下情况到 DealList（）标签：

With the above, here's what happens whenever I switch back to the DealList() tab: It reloads.

是否可以防止一次完成后重新运行FutureBuilder？ （该计划是供用户使用RefreshIndicator来重新加载的。因此，除非用户明确这样做，否则更改选项卡不应触发任何操作。）

Is there a way to prevent re-run of the FutureBuilder when done once? (the plan is for user to use the RefreshIndicator to reload. So changing tabs should not trigger anything, unless explicitly done so by user.)

推荐答案

这里有两个问题，第一个：

There are two issues here, the first:

当 TabController 切换选项卡时，它将卸载旧的小部件树以节省内存。如果要更改此行为，则需要混入 AutomaticKeepAliveClientMixin 到标签小部件的状态。

When the TabController switches tabs, it unloads the old widget tree to save memory. If you want to change this behavior, you need to mixin AutomaticKeepAliveClientMixin to your tab widget's state.

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 /* ... */
  }
}

第二个问题是您在使用 FutureBuilder -
的情况下，如果将新的 Future 提供给 FutureBuilder ，它无法确定结果与上次相同，因此必须重新构建。 （请记住，Flutter可能最多一次调用您的构建方法）。

The second issue is in your use of the FutureBuilder - If you provide a new Future to a FutureBuilder, it can't tell that the results would be the same as the last time, so it has to rebuild. (Remember that Flutter may call your build method up to once a frame).

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

相反，您想将未来分配给initState上的State类成员，然后通过该值分配给 FutureBuilder 。确保以后的重建中的将来是相同的。如果要强制State重新加载交易，则始终可以创建重新分配 _loadingDeals 成员并调用 setState

Instead, you want to assign the future to a member on your State class in initState, and then pass this value to the FutureBuilder. The ensures that the future is the same on subsequent rebuilds. If you want to force the State to reload the deals, you can always create a method which reassigns the _loadingDeals member and calls 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, /* ... */);
}

这篇关于Flutter切换到选项卡重新加载小部件并运行FutureBuilder的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！