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

Question

我正在尝试显示实时 http json 数据 mtgCardNames使用 buildResults .数据似乎已成功传递(它们被正确打印)但不知何故它们没有显示在屏幕上。为了了解情况，我尝试显示一些其他数据(搜索 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被填充

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