Flutter：FlatButton不会在onPressed上更改子代

Question

我想通过按下一个按钮来更改Firestore中的值。我知道可能会有几秒钟的延迟，我想在等待时显示一个circularProgressIndicator窗口小部件。但这是行不通的。

这是我的小部件：

Widget save(String id) {
    return new FutureBuilder(
      future: PostController().isAlreadySaved(id),
      builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
        if (snapshot.hasData) {
          if (snapshot.data) {
            return FlatButton(
              onPressed: () {
                setState(() {
                  isSaveLoading = true;
                });

                PostController().deleteSaved(id);

                setState(() {
                  isSaveLoading = false;
                });
              },
              child: !isSaveLoading
                  ? Icon(
                      MyFlutterApp.star,
                      size: 30,
                      color: Colors.redAccent,
                    )
                  : SizedBox(
                      height: 15,
                      width: 15,
                      child: CircularProgressIndicator(
                        strokeWidth: 1,
                      ),
                    ),
            );
          } else {
            return FlatButton(
              onPressed: () {
                setState(() {
                  isSaveLoading = true;
                });

                PostController().save(context, id);

                setState(() {
                  isSaveLoading = false;
                });
              },
              child: !isSaveLoading
                  ? Icon(
                      MyFlutterApp.star,
                      size: 30,
                      color: Colors.grey,
                    )
                  : SizedBox(
                      height: 15,
                      width: 15,
                      child: CircularProgressIndicator(
                        strokeWidth: 1,
                      ),
                    ),
            );
          }
        } else {
          return Container(
            //color: Colors.white,
            width: Adapt.screenW(),

            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Flexible(
                  child: Shimmer.fromColors(
                    baseColor: Colors.grey[400],
                    highlightColor: Colors.grey[50],
                    enabled: true,
                    child: Row(
                      children: <Widget>[
                        Padding(
                          padding: const EdgeInsets.fromLTRB(5, 0, 0, 0),
                          child: new Icon(
                            MyFlutterApp.star,
                            size: 30,
                            color: Colors.white,
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          );
        }
      },
    );
  }

这是我的isAlreadySaved（）函数：

Future<bool> isAlreadySaved(String id) async {
    bool isSaved = false;

    QuerySnapshot snapshot =
        await databaseReference.collection('saved').getDocuments();

    snapshot.documents.forEach((a) async {
      if (a.data['postID'] == id&&
          a.data['saver'] == globals.currentUser.uid) {
        isSaved = true;
      }
    });
    return isSaved;
  }

删除功能实际上是从我在Firestore中保存的集合中删除文档，而保存功能会创建一个文档并保存。

谢谢你！

Answer 1

我认为问题是因为您太快地更新了窗口小部件树，或者通过等待PostController作业完成而使颤动的UI线程被锁定了...

在这些行中：

onPressed: () {
 setState(() {
   isSaveLoading = true;
 });

 PostController().deleteSaved(id);

 setState(() {
   isSaveLoading = false;
 });
},

这里，您看到要更新按钮的loading状态。但是问题在于，当您将isSaveLoading设置为true时，您无需等待PostController().deleteSaved(id)完成，然后再将isSaveLoading重置为false。

另一方面，如果PostController().deleteSaved()做得很长，因为它不是异步的，它可以锁定UI线程一段时间，因此您将永远看不到循环进度条。

您可以使onPressed回调异步，并等待PostController作业。

onPressed: () async {
 setState(() {
   isSaveLoading = true;
 });

 // The deleteSaved function have to be async too
 await PostController().deleteSaved(id);

 setState(() {
   isSaveLoading = false;
 });
},

希望这会有所帮助！