时间戳

首页 > 解决方案 > 更新 Firestore 中的字段时如何在按钮中显示“保存”文本？

flutter - 更新 Firestore 中的字段时如何在按钮中显示“保存”文本？

问题描述

我正在做一个项目。我需要实现这个功能。我有一个简单的屏幕按钮中心。它有一个Text小部件的孩子。当小部件树重建时，它会从 Cloud Firestore 获取一个文档。同时，Text小部件说“正在加载”。获取文档后，它会显示文档的基本数字字段，如“值：0”。

当我按下按钮时，它将增加valueCloud Firestore 中调用的字段。它工作正常。

但是，我还想显示一个Text小部件，说明Saving...我何时实际更新value.

总而言之，更新过程应该是这样的：值：11 -> 按下按钮 -> 保存... -> 正在加载... -> 值：12

我怎样才能做到这一点？

到目前为止我做了什么？

Future<String> getData() async {
  var fb = Firestore.instance;

  DocumentSnapshot dr =
      (await fb.collection("records").document("the record").get());

  return dr.data["value"].toString();
}

void updateData(int value) async {
  var fb = Firestore.instance;

  await fb.collection("records").document("the record").updateData({
    "value": value + 1,
  });
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Homework 4"),
      ),
      body: Center(
          child: FutureBuilder(
              future: getData(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return RaisedButton(
                    child: Text("Loading"),
                    onPressed: null,
                  );
                }

                if (snapshot.connectionState == ConnectionState.done) {
                  return RaisedButton(
                    child: Text("Value: " + snapshot.data),
                    onPressed: () {
                      setState(() {
                        updateData(int.parse(snapshot.data));
                      });
                    },
                  );
                }

                return RaisedButton(
                  child: Text("saving"),
                  onPressed: null,
                );
              })),
     
    );
  }

标签： flutterdartgoogle-cloud-firestore

解决方案

首先，setState在执行之前调用并显示“Loading...”updateDate()

然后您可以使用....get().then((result){ })(not whenComplete(); 这是一个很好的做法，因为它确保只有成功的期货才能继续下一步)。

在里面.then()你可以设置状态显示“Saving ...”并调用获取函数。

fetch 函数本身可以再次.then()调用另一个函数setState并显示“Value: 0”</p>

虽然使用它可能看起来很明智，但FutureBuilder我会说在更新期间必须显示“正在保存”的要求会使解决方案同样复杂。

我在想涉及 a 的解决方案FutureBuilder需要某种标志变量来指示我们正在保存，Text如果标志表明我们正在等待更新，则在构建函数内部显示一个带有“正在保存”的按钮。

推荐阅读