当窗口大小改变时，flutter web 上的 Futurebuilder 不断触发

Question

我正在尝试 Flutter Web，刚刚遇到了一个有趣的现象 - 这个现象耗尽了我的业余项目的免费 API 调用津贴，但是嘿嘿:)

当窗口大小发生变化时，futurebuilder 会再次触发并重新加载。这是如预期的那样吗？如果是这样，有办法阻止吗？

FutureBuilder(
            future: _fetchMarketData(
                'BOO.XLON,BBOX.XLON,DGE.XLON,GROW.XLON,GSK.XLON,IBM,IEM.XLON,NIO,ULVR.XLON'),
            builder: (context, snapshot) {
              print('Building');
              if (snapshot.hasData) {
                List<MarketData> md = snapshot.data;

                List<MarketData> _boo =
                    md.where((md) => md.symbol == 'BOO.XLON').toList();

                List<MarketData> _dge =
                    md.where((md) => md.symbol == 'DGE.XLON').toList();

                List<MarketData> _grow =
                    md.where((md) => md.symbol == 'GROW.XLON').toList();

                List<MarketData> _gsk =
                    md.where((md) => md.symbol == 'GSK.XLON').toList();

                List<MarketData> _iem =
                    md.where((md) => md.symbol == 'IEM.XLON').toList();

                List<MarketData> _tri =
                    md.where((md) => md.symbol == 'BBOX.XLON').toList();

                List<MarketData> _ibm =
                    md.where((md) => md.symbol == 'IBM').toList();

                List<MarketData> _nio =
                    md.where((md) => md.symbol == 'NIO').toList();

                List<MarketData> _ulvr =
                    md.where((md) => md.symbol == 'ULVR.XLON').toList();

                List<MarketData> combinedData = [
                  _boo[0],
                  _dge[0],
                  _grow[0],
                  _gsk[0],
                  _tri[0],
                  _ibm[0],
                  _iem[0],
                  _nio[0],
                  _ulvr[0],
                ];

                return Padding(
                  padding: const EdgeInsets.all(32.0),
                  child: ListView.builder(
                    itemBuilder: (context, index) {
                      return Text(
                          '${combinedData[index].symbol} - HIGH ${combinedData[index].high}, LOW ${combinedData[index].low}');
                    },
                    itemCount: combinedData.length,
                    shrinkWrap: true,
                  ),
                );
              } else if (snapshot.hasError) {
                return Text(
                    'Could not fetch data :-/ ${snapshot.error.toString()}');
              } else {
                return Text('Fetching!');
              }
            })

Answer 1

是的，这是故意的……或者至少你是这样构建的。

如果你这样做：

future: _fetchMarketData()

然后每次调用 build 函数时，都会生成一个新的 Future。

您需要做的是拥有一个Future<>您设置过一次的类型变量，最好是在 中initState，然后将此变量传递给您的FutureBuilder. 这样，即使您的构建函数被多次调用，它仍然拥有它等待的 Future。