Question

我的无状态窗口小部件中有3个Future构建器。他们每个人都返回一个列表。

对于每个列表，数据来自1个外部Rest调用，因此总计3个Rest调用。

平均而言，每个剩余调用大约需要800毫秒才能返回响应。

这意味着我需要花费800ms x 3（2秒以上）的时间来填满我的页面，

我只想打一个电话（我可以从后端进行此操作），它将保存所有3个FutureBuilder的数据。

然后我将从那里提取所有小部件的相关数据。但是我该怎么办呢？

因为FutureBuilder中的future参数需要对某些对象的Future调用

每个FutureBuilder的

方法。我不能只传递这个新的Rest调用，该调用将为所有中的人获取数据

一个调用，并在每个FutureBuilder中重复3次。那将毫无意义。有办法吗

可以解决这个问题吗？

请注意，我希望避免将其变成有状态的小部件。谢谢。

您将在下面看到，我进行了3次休息电话。

SELECT id,
       (SELECT id2 FROM table2 INNER JOIN [...] WHERE column.foreignkey = t.id) as queryResult
FROM (SELECT t.*
      FROM table t
      WHERE status = 5
      ORDER BY column
      LIMIT 10
     ) t

相反，我想进行单个rest调用，例如restService.SingleCall（）并使用它相应地填充数据。或欢迎任何其他替代解决方案。就目前而言，我需要2秒钟的时间来绘制UI。希望将其降低到800ms或更短。

restService.restCallOne(), 
restService.restCallTwo(), 
restService.restCallThree().

PS

嗅探文档以获取信息，但是如果有人可以建议这些剩余调用是否将针对每个FutureBuilder依次发生，那将是很棒的，因此这意味着要花费2秒以上的时间（从我的经验看来，UI会填满）或它们会异步发生吗？

================================================ =========

已更新：

添加以下内容以显示完整的ListView的构造方式。

如前所述，将会有3个列表，每个列表都在其自己的未来构建器中。

当我说60张图片时，我的意思是每个列表将加载约20张低分辨率图片。

在上述FutureBuilders中，我在其中发表了以下评论：

class Home extends StatelessWidget {

  final RestService restService = RestService();

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          child: FutureBuilder(
            future: restService.restCallOne(),
            builder: (context, snapshot) {
                return ListView.builder(
                    itemBuilder: (context, index) {
                      return // some widget which extracts relevant data from rest call data and draws the UI
                    },
                );
            },
          ),
        ),
        Container(
          child: FutureBuilder(
            future: restService.restCallTwo(),
            builder: (context, snapshot) {
                return ListView.builder(
                  itemBuilder: (context, index) {
                    return // some widget which extracts relevant data from rest call data and draws the UI
                  },
                );
            },
          ),
        ),
        Container(
          child: FutureBuilder(
            future: restService.restCallThree(),
            builder: (context, snapshot) {
                return ListView.builder(
                  itemBuilder: (context, index) {
                    return // some widget which extracts relevant data from rest call data and draws the UI
                  },
                );
            },
          ),
        ),
      ],
    );
  }
}

我在该部分中返回以下小部件，该小部件从该rest调用中获取图像URL并构建图像。因此，对于每个列表，此小部件都会被构造20次X 3个列表= 60张低分辨率图像。

return // some widget which extracts relevant data

这是剩下的电话。

class SideScrollImage extends StatelessWidget {

  final String link;
  final int id;

  const SideScrollImage({this.link, this.id});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(left: 8),
      child: InkWell(
        onTap: () {
          print('image id is ${this.id}');
          Navigator.push(context, MaterialPageRoute(builder: (context) => ShowPage(movies[0])),);
        },
        child: Image(
          image: NetworkImage(link),
        ),
      ),
    );
  }

显示屏将显示以下内容，其中包含3个水平滚动的图像列表。

有效地致电Futurebuilder

0 个答案: