扑。当我从未来函数收到值时，我的 UI 没有更新答案

【问题标题】：Flutter. My UI is not updated when I receive a value from a Future Function扑。当我从未来函数收到值时，我的 UI 没有更新
【发布时间】：2020-12-17 23:18:40
【问题描述】：

我的问题是，当我从 Firestore 收到信息时，我在控制台中看到它打印但我的 UI 没有更新。但是直到我再次按下显示我的屏幕的图标。我的小部件列表包含在底部导航栏中的屏幕。

我希望代码会发生的情况是，当我在 BottomNavigationBar 中选择包含我的屏幕的选项卡时，小部件列表会出现，其中包含 DocumentID 的名称。好吧，目前我必须再次选择选项卡才能显示它们。

我附上我的代码。

class PruebasVarias extends StatefulWidget {
  @override
  _PruebasVariasState createState() => _PruebasVariasState();
}

class _PruebasVariasState extends State<PruebasVarias> {


  List<String> myData        = [];
  List<Widget> myListWidget  = [];

  @override
  void initState() { 
    super.initState();
    getallDocument();
  }

  Future getallDocument()async{
    final QuerySnapshot result = await Firestore.instance
                                      .collection("Users")
                                      .getDocuments();
    final List<DocumentSnapshot> documentos = result.documents;
    documentos.forEach((data) {
      myData.add(data.documentID);
      print(myData);
    });

    for (int i = 0; i < (myData.length); i++){
      myListWidget.add(Text("${myData[i]}"));
    } 
  }

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Documents"),
        actions: <Widget>[
        ],
      ),
      body: Center(
        child: 
        Column(children: myListWidget),
      )
    );
  }
}

【问题讨论】：

您要么使用 FutureBuilder，要么在 getallDocument 方法的末尾使用 setState

标签： firebase flutter dart google-cloud-firestore

【解决方案1】：

您可以通过调用setState(() {}) 方法来解决此问题；设置状态通知框架此对象的内部状态已更改。

  Future getallDocument() async {
    final QuerySnapshot result =
        await Firestore.instance.collection("Users").getDocuments();
    final List<DocumentSnapshot> documentos = result.documents;
    documentos.forEach((data) {
      myData.add(data.documentID);
      print(myData);
    });

    for (int i = 0; i < (myData.length); i++) {
      myListWidget.add(Text("${myData[i]}"));
    }
    setState(() {});
  }

【讨论】：

您的答案也对我有用，但平台不允许我标记两个正确答案。非常感谢！

【解决方案2】：

一个简单的解决方法：使用then 调用回调函数，内部回调函数使用setState 更新UI。

class PruebasVarias extends StatefulWidget {
  @override
  _PruebasVariasState createState() => _PruebasVariasState();
}

class _PruebasVariasState extends State<PruebasVarias> {


  List<String> myData        = [];
  List<Widget> myListWidget  = [];

  @override
  void initState() { 
    super.initState();
    getallDocument().then(()=>updateUI()).catchError((error)=>print(error));
  }

  Future<void> getallDocument()async{
    final QuerySnapshot result = await Firestore.instance
                                      .collection("Users")
                                      .getDocuments();
    final List<DocumentSnapshot> documentos = result.documents;
    documentos.forEach((data) {
      myData.add(data.documentID);
      print(myData);
    });

    for (int i = 0; i < (myData.length); i++){
      myListWidget.add(Text("${myData[i]}"));
    } 
  }


void updateUI()
{
setState((){});
 
}
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Documents"),
        actions: <Widget>[
        ],
      ),
      body: Center(
        child: 
        Column(children: myListWidget.isEmpty?[Text("Waiting...")]:myListWidget),
      )
    );
  }
}

【讨论】：