仅在热重载后才检索数据

问题描述

我是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(() {})而没有任何参数，但是我总是更喜欢传递被修改的状态-即使不需要时也是如此。