从火力基地加载数据缓慢导致"RangeError (index)"

Question

在这里，我尝试将图像链接从Firebase加载到Flutter应用程序中，然后将其传递到image.network((。 数据加载需要时间来加载数据，因此它给了我以下错误：范围错误(索引(： 无效值： 有效值范围为空：1但 5 秒后，数据成功加载并在控制台中打印，但不显示在屏幕上。 这是打印数据的代码

class _DataFetching extends State<MyHomePage> {
List<eyes> allCriminals=eyes.allcriminals();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("fetch"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Image.network(allCriminals[1].link
),
]// This trailing comma makes auto-formatting nicer for build methods.
)));
}
}

从火力库加载数据的功能是

static  List<eyes> allcriminals() {
var allEyes = new List<eyes>();
Future<Query>  queryUsers() async{
return await FirebaseDatabase.instance
.reference()
.child('Facial Parts/Eyes');
}
queryUsers().then((query) {
query.once().then((snapshot) {
var result =  snapshot.value.values as Iterable;
for (var item in result) {
print(result);
allEyes.add(new eyes(criminal_id: item["criminal_id"],
eye_size: item["eyesize"],
link: item["link"]));
print(item['link']);
}
});
});
return allEyes;
}

有什么方法可以帮助我加载所有数据，然后它应该转到 Widget build((？

Answer 1

数据是从 Firebase 异步加载的。运行return allEyes时，数据库中的.then()尚未运行。而且您现在无法返回尚未加载的内容。

这就是为什么你必须返回一个Future<List<eyes>>，这是承诺在未来的某个时候有一个眼睛列表。

static Future<List<eyes>> allcriminals() {
var query = FirebaseDatabase.instance.reference().child('Facial Parts/Eyes');
return query.once().then((snapshot) {
var allEyes = new List<eyes>();
var result = snapshot.value.values as Iterable;
for (var item in result) {
allEyes.add(new eyes(criminal_id: item["criminal_id"],
eye_size: item["eyesize"],
link: item["link"]));
}
return allEyes;
});
}

然后，您可以通过使用FutureBuilder或直接调用setState()在 render 方法中使用它。