如何在 Flutter 中将 Future 转换为 Stream，数据实时更新

Question

我有一个 Future 方法 (getUserProfileData)，我用它来检索用户帖子的数量、关注者的数量、用户名、profileImage 等。它非常适合一次性检索数据。 如果用户添加帖子，我希望 UI 上的帖子数量能够实时更新，而无需导航到新页面并返回以刷新 UI。 我已经查看了不同的 SO 线程，阅读了文档并且 Firestore 运行良好。 问题是我有限的经验水平使我很难弄清楚如何重构我的代码以获得我正在寻找的行为。 我删除了填充、容器和其他布局代码以缩短提交的代码。 任何帮助将不胜感激。

class ProfileTabExample extends StatefulWidget {
  const ProfileTabExample({
    Key? key,
    required this.profileID,
    required this.userProfileKey,
  }) : super(key: key);

  final String profileID;
  final Key userProfileKey;

  @override
  State<ProfileTabExample> createState() => _ProfileTabExampleState();
}

class _ProfileTabExampleState extends State<ProfileTabExample> {
  Map<String, dynamic> userData = {};
  int postLength = 0;
  int followers = 0;
  int following = 0;
  bool isFollowing = false;
  bool isLoading = false;
  final String currentUser = Auth().currentUser?.uid as String;

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

  Future _getUserProfileData() async {
    setState(() {
      isLoading = true;
    });
    try {
      DocumentSnapshot<Map<String, dynamic>> userSnap = await FirebaseFirestore
          .instance
          .collection('users')
          .doc(widget.profileID)
          .get();
      QuerySnapshot<Map<String, dynamic>> postSnap = await FirebaseFirestore
          .instance
          .collection('posts')
          .where('userID', isEqualTo: Auth().currentUser?.uid)
          .get();
      postLength = postSnap.docs.length;
      userData = userSnap.data() as Map<String, dynamic>;
      followers = userData['followers'].length;
      following = userData['following'].length;
      isFollowing = userData['followers'].contains(Auth().currentUser?.uid);
      setState(() {});
    } catch (e) {
      SnackBarUtil.showSnackBar(
        context,
        e.toString(),
      );
    }
    setState(() {
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return isLoading
        ? const AdaptiveCircularProgress()
        : CustomScrollView(
            slivers: [
              SliverToBoxAdapter(
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    ProfileStatColumn(
                      count: postLength,
                      label: ProfilePageString.posts,
                    ),
                    ProfileStatColumn(
                      count: followers,
                      label: ProfilePageString.followers,
                    ),
                    ProfileStatColumn(
                      count: following,
                      label: ProfilePageString.following,
                    ),
                  ],
                ),
              ),
            ],
          );
  }
}

Answer 1

snapshots方法提供stream ，它通知更改。 使用StreamBuilder重建一个小部件。

像这样的东西：

StreamBuilder<QuerySnapshot>(
  stream: Firestore.instance.collection('posts').snapshots(),
  builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
...
  },
);