如何在 SearchDelegate 的 buildResults 中传递更新 UI 值？

Posted 2023-02-23

【中文标题】如何在 SearchDelegate 的 buildResults 中传递更新 UI 值？

【英文标题】：How to pass update UI value in buildResults of SearchDelegate?

【发布时间】：2020-07-23 15:19:46

【问题描述】：

我正在尝试使用buildResults 显示实时http json 数据mtgCardNames。数据似乎已成功传递（它们被正确打印）但不知何故它们没有显示在屏幕上。为了了解情况，我尝试显示一些其他数据（搜索query 和testList），它们按预期显示在屏幕上。

为什么会这样？

我重写了所有必需的 4 种方法，但只是将buildResults 粘贴到此处以作简要说明。

  @override
  Widget buildResults(BuildContext context) 
    List<MTGCard> mtgCards = [];
    List<Text> mtgCardNames = [];
    GetHTTP getHTTP = GetHTTP();
    getHTTP.getData().then((usersFromServer) 
      mtgCards = usersFromServer;
      for (MTGCard c in mtgCards)
        print(c.name);    // <= can print out as expected
        mtgCardNames.add(Text(c.name));
      
    );
    List<Text> testList = [
      Text('a'),
      Text('aa'),
      Text('aaa'),
    ];

    return Column(
      children: <Widget>[
        Text(query),
        Column(
          children: mtgCardNames,
        ),
        Column(
          children: testList,
        ),
      ],
    );
  

目前，http 数据不是基于查询的，它是硬编码的 url，而是实时数据。我在 Ubuntu 上运行，我的颤振医生没有显示任何问题。

非常感谢任何建议或帮助！

【问题讨论】：

flutter.dev/docs/cookbook/networking/fetch-data

感谢@Pavel，数据已正确获取，因为它们可以按预期打印出来。但它们只是没有显示在屏幕上。

then(...) 在网络调用返回响应后执行，但return Column(...) 立即执行。因此，您在列中看不到网络调用的结果。考虑使用我链接的教程中的方法

您也可以在 return Column(...) 之前打印 mtgCards 或 mtgCardNames 来检查

谢谢！你能告诉我如何解决吗？我尝试在 then() 中移动返回，但 buildResults 方法需要一个小部件返回。是的，如果我在返回之前打印 mtgCardNames 它将不起作用，但我不明白为什么，这也是我将 for 循环移到里面的原因。

【参考方案1】：

问题是网络调用getData()是异步执行的：

1) 你拨打getData()

2) 同步代码继续执行：return Column(...) 被调用，而mtgCardNames 仍为空

3) 您在屏幕上看到空列

4) 网络调用完成，then(...) 被执行，mtgCardNames 被填充

---

要实际显示包含来自网络调用的数据的列，您应该在加载时返回一个小部件，然后再返回一个。一种方法是使用FutureBuilder。基本思路是

@override
Widget buildResults(BuildContext context) 
  GetHTTP getHTTP = GetHTTP();
  return FutureBuilder<List<MTGCard>>(
    future: getHTTP.getData(),
    builder: (context, snapshot) 
      if (!snapshot.hasData)
        return Text('Loading...');
      return Column(
        children: <Widget>[
          Text(query),
          for (MTGCard c in snapshot.data)
            Text(c.name),
        ],
      );
    ,
  );

但还有更多细节。例如。将网络调用放在 build() 方法中并不是一个好主意。如果网络调用失败，您也可以显示一些错误小部件。详情见tutorial