我正在尝试显示实时 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 医生没有显示任何问题。
任何建议或帮助都非常感谢!
最佳答案
问题是网络调用 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
关于android - 如何在 SearchDelegate 的 buildResults 中传递更新 UI 值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61147682/