Flutter：来自数据库的信息仅在代码保存/热重载后显示

Question

我的应用程序中的一些子页面没有立即显示数据库中的内容。不过，它们会在我保存内容（热重载）后显示内容。

我的应用程序中只有几个子页面，但我注意到了这种行为，它们都有一些共同点：来自数据库的显示信息。

我在我的代码中实现了一些打印语句，这些语句打印了我从数据库接收到的信息。所以，这不可能是因为缺少信息/尚未收到信息。

你知道如何解决它吗？

代码：

import 'dart:async';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:nutritious/custom_widgets/AppBar_Custom.dart';
import 'package:nutritious/custom_widgets/AppBar_SearchIcon.dart';
import 'package:nutritious/datenbank/firestore.dart';

import 'package:nutritious/custom_widgets/AppBar_ProfileIcon.dart';

class Krankheiten extends StatefulWidget {
  @override
  _KrankheitenState createState() => _KrankheitenState();
}

class _KrankheitenState extends State<Krankheiten> {
  _KrankheitenState();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    /*username.dispose();
    password.dispose();
    super.dispose();*/
  }

  List<String> krankheit_name = [];
  List<String> krankheit_beschreibung = [];

  getKrankheiten() async {
    await FirebaseFirestore.instance
        .collection("krankheiten")
        .orderBy("name")
        .get()
        .then((snapshot) => {
              snapshot.docs.forEach((doc) {
                krankheit_name.add(doc.data()["name"]);
                krankheit_beschreibung.add(doc.data()["beschreibung"]);
              })
            });

    for (int i = 0; i < krankheit_name.length; i++) {
      print("+++");
      print(krankheit_name.length);
      print(krankheit_name[i]);
      print(krankheit_beschreibung[i]);
    }
  }

  Container createKrankheiten(int i) {
    return Container(
      width: 500,
      color: Colors.white,
      margin: EdgeInsets.only(bottom: 15),
      padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
      child: Padding(
        padding: const EdgeInsets.only(top: 15, bottom: 15),
        child: Text(krankheit_name[i],
            textAlign: TextAlign.left, style: TextStyle(fontSize: 20.0)),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    getKrankheiten();

    return Scaffold(
        appBar: AppBarCustom(widgetTitle: "Krankheiten"),
        body: SingleChildScrollView(
            child: Container(
                color: Color.fromRGBO(218, 243, 186, 1),
                child: Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Column(
                    children: [
                      for (int i = 0; i < krankheit_name.length; i++)
                        createKrankheiten(i)
                    ],
                  ),
                ))));
  }
}

Answer 1

在

getKrankheiten

方法中调用了

build

函数，但它没有同步加载数据。所以数据最终在屏幕构建后被获取并且屏幕不会更新后新数据获取。

你应该为此使用

FutureBuilder

： https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

Answer 2

两个错误。

1. 因为你不是

   awaiting

   未来的功能

   getKrankheiten()

   .
2. 在以下行中添加到列表时，您没有使用

   setState

   ：

 krankheit_name.add(doc.data()["name"]);
 krankheit_beschreibung.add(doc.data()["beschreibung"]);

两个建议。

1. 不建议在

   build()

   内部调用future函数，可以考虑在

   initState()

   函数中调用
2. 并使用

   futureBuilder

   获得您想要的功能。

Answer 3

//不使用 async & await 你可以使用 FutureBuilder

//声明一个 Future varaibale;

未来的回应；

 @override
      void initState() {
    
        super.initState();
   //inside initState call method 
        getKrankheiten();
      }



    
  getKrankheiten()  {
    response = FirebaseFirestore.instance
        .collection("krankheiten")
        .orderBy("name")
        .get();


  }

//然后使用 FutureBuilder 如下

Container createKrankheiten() {
    return Container(
      width: 500,
      color: Colors.white,
      margin: EdgeInsets.only(bottom: 15),
      padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
      child: Padding(
        padding: const EdgeInsets.only(top: 15, bottom: 15),
        child: FutureBuilder(
            future: response,
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (!snapshot.hasData) {
                return const CircularProgressIndicator();
              } else if (snapshot.data.isEmpty) {
                return const SizedBox.shrink();
              } else {
                return ListView.builder(
                    itemCount: snapshot.data.docs.length,
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    itemBuilder: (BuildContext context, int index) {
                      return Text(snapshot.data.docs[i].data()["name"],
                          textAlign: TextAlign.left,
                          style: TextStyle(fontSize: 20.0));
                    });
              }
            }),
      ),
    );
  }

然后从您的构建中调用 createKrankheiten()