如何解决仅在热重载后才检索数据
我是Flutter的新手,我正在尝试从Firebase实时数据库中检索数据。但是,只有在执行热重装时才从firebase检索数据。我不知道该怎么办...这是代码:
import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'Posts.dart';
class HomePage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return HomePageState();
}
}
class HomePageState extends State<HomePage>{
List <Posts> postsList = [];
void initState() {
super.initState();
_fetchList();
}
_fetchList() async {
DatabaseReference postsRef = FirebaseDatabase.instance.reference().child("Posts");
postsRef.once().then((DataSnapshot snap){
// ignore: non_constant_identifier_names
var KEYS = snap.value.keys;
var DATA = snap.value;
for(var individualKey in KEYS){
Posts posts = Posts(
DATA[individualKey]["date"],DATA[individualKey]["description"],DATA[individualKey]["time"],);
postsList.add(posts);
}
} );}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,title: Text(
"Home",)
),body: Container(
child: postsList.length==0? Text("Nothing available!") : ListView.builder(
itemCount: postsList.length,itemBuilder:(context,int index){
return postsUI(postsList[index].description,postsList[index].date,postsList[index].time);
}
),));
}
Widget postsUI ( String description,String date,String time){
return Card(
elevation: 20.0,margin: EdgeInsets.only(left: 25.0,right:25.0,top:15.0,bottom:15.0),child: Container(
padding: EdgeInsets.all(20.0),child: Column(
crossAxisAlignment: CrossAxisAlignment.start,children:<Widget> [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,children: <Widget>[
Text(
date,style: Theme.of(context).textTheme.subtitle1,textAlign: TextAlign.center,),Text(
time,],SizedBox(height: 15.0,Text(
description,style: Theme.of(context).textTheme.subtitle2,);
}
}
PS:仅在执行热重装时才从数据库中检索值。
解决方法
我假设您要检索的数据来自_fetchList()
调用?之所以只能在热重装中工作,是因为只有_fetchList
调用了initState
-仅在运行时调用。
如果要获取实时更新(当数据库中的某些内容发生更改时,小部件将在其中更新),则需要使用Streams和StreamBuilder。
如果您希望使用fetchData
Firestore数据构建UI而不进行实时更新,则需要Futures和FutureBuilder。从代码的外观来看,我认为这将满足您的需求。
除了J. Saw的出色答案之外,您还可以选择将postsList
存储在小部件的状态。
为此,请在数据加载后调用setState()
:
_fetchList() async {
DatabaseReference postsRef = FirebaseDatabase.instance.reference().child("Posts");
postsRef.once().then((DataSnapshot snap){
// ignore: non_constant_identifier_names
var KEYS = snap.value.keys;
var DATA = snap.value;
for(var individualKey in KEYS){
Posts posts = Posts(
DATA[individualKey]["date"],DATA[individualKey]["description"],DATA[individualKey]["time"],);
postsList.add(posts);
}
setState((){
this.postsList = postsList;
});
});
}
调用setState()
会使Flutter重新绘制窗口小部件,然后您就可以在访问数据时对其进行访问了。
您也许可以简单地调用setState(() {})
而没有任何参数,但是我总是更喜欢传递被修改的状态-即使不需要时也是如此。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。