Flutter：在用户使用流查看页面时更新最近的值

Question

我的思考方式正确吗？

我创建了一个函数，它从 firebase 中获取一个值，以秒为单位，并将其转换为 hours:minutes:seconds，这工作正常。我已经为我的函数使用了 Streams，为我的文本小部件使用了 StreamBuilder 来显示值，但是如果没有 setState，我不知道如何在用户积极查看页面时始终显示更新的值。如果没有 setState，我将不得不导航到另一个页面，然后返回查看 UI 更新最新值。

使用 setState 是正确的方法吗？它会导致垃圾邮件写入 firebase，导致我超过限制（我有一个免费的 firebase 帐户）。

是否有更好的方法始终在屏幕上显示最新值？

Stream<String> printDuration() async* {
   FirebaseFirestore.instance
        .collection("users")
        .doc(user!.uid)
        .snapshots()
        .listen(
          (event) => someVar = event.data()!['timeActive'], 
          onError: (error) => print("Listen failed: $error")
        );

    Duration duration = Duration(seconds: someVar ?? loggedInUser.timeActive);
      String twoDigits(int n) => n.toString().padLeft(2, "0");
    String twoDigitMinutes = twoDigits(duration.inMinutes.remainder(60));
    String twoDigitSeconds = twoDigits(duration.inSeconds.remainder(60));
    String _getData = "${twoDigits(duration.inHours)}:$twoDigitMinutes:$twoDigitSeconds";
    setState(() {});
    yield _getData;
  }

文本小部件


StreamBuilder<String>(
                                  stream: printDuration(),
                                  builder: ((context, snapshot) {
                                    if (snapshot.data != null) {
                                      return Center(
                                        child: Text(
                                          snapshot.hasData ? snapshot.data!.toString(): 'no data yet',
                                          style: TextStyle(
                                            color: Color(0xff516395),
                                            fontSize: 26.0,
                                            letterSpacing: 2.0,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      );
                                    } else {
                                      return Text('0',
                                          style: TextStyle(
                                            color: Color(0xff516395),
                                            fontSize: 30.0,
                                            letterSpacing: 2.0,
                                            fontWeight: FontWeight.bold,
                                          ));
                                    }
                                  }),
                                )

Answer 1

无需调用 setState，StreamBuilder 基于最新更新自行构建。尝试这样的事情。

  Stream<String> timeActive(String userUid) {
    return FirebaseFirestore.instance
      .collection("users")
      .doc(userUid)
      .snapshots()
      .map((e) => e.data()?['timeActive'])
      .map((timeActive) { <convert to hours:minutes:seconds> });
  }

Flutter：在用户使用流查看页面时更新最近的值

Flutter: Updating the more recent value while the user in viewing the page with streams

dart

firebase

flutter