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

Question

我正在尝试使用 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 医生没有显示任何问题。

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

Answer 1

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

1) 你打电话给getData()

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

3) 您在屏幕上看到空栏

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

要实际显示包含来自网络调用的数据的列，您应该 return 一个小部件在加载时加载另一个小部件。一种方法是使用 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

中的详细信息

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

How to pass update UI value in buildResults of SearchDelegate?

android

flutter

dart

mobile

mobile-application