为什么 Streambuilder 不更新 UI？

Question

我正在上传图像，然后将其存储在 Firebase 存储中，然后将链接存储在 Firebase 数据库中。我添加了 Streambuilder 来更新 UI。然而，当我这样做时，我会得到一个永无休止的圆形进度条。我确信我的 Streambuilder 代码有问题。

代码片段如下：

class EditProfile extends StatefulWidget {
  const EditProfile({
    super.key,
    required this.userData,
  });
  final UserModel userData;

  @override
  State<EditProfile> createState() => _EditProfileState();
}

class _EditProfileState extends State<EditProfile> {
.....

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
                      stream: FirebaseFirestore.instance
                          .collection('users')
                          .snapshots(),
                      builder: (context, snapshot) {
                        if (snapshot.hasData) {
                          return CircleAvatar(
                            radius: 75,
                            backgroundImage: NetworkImage(
                                widget.userData.profileImage.toString()),
                          );
                        } else {
                          return const CircularProgressIndicator();
                        }
                      }),

请让我知道我应该在哪里更改代码。

Answer 1

问题可能是由于

StreamBuilder

如何处理快照的不同状态造成的。

CircularProgressIndicator

看起来一直在运行，因为没有正确处理连接状态、错误和空数据情况。

具体来说，问题可能出在您的代码中，您正在执行的操作：

 if (snapshot.hasData) { // ---> Only if there's data
      return CircleAvatar(
        radius: 75,
        backgroundImage: NetworkImage(widget.userData.profileImage.toString()),
      );
    } else {
       // --> if there's no data or loading
      return const CircularProgressIndicator();
    }

这意味着，只有当有实际文档（例如，

.hasData

）时才会显示

CircleAvatar

。

相反，您可以使用，它将考虑所有正确的加载状态以及是否有数据（文档）：

StreamBuilder<QuerySnapshot<Map<String, dynamic>>>(
  stream: FirebaseFirestore.instance.collection('users').snapshots(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return const Text('Something went wrong');
    } else if (!snapshot.hasData || snapshot.data!.docs.isEmpty) {
      return const Text('No data available');
    } else {
      return CircleAvatar(
        radius: 75,
        backgroundImage: NetworkImage(widget.userData.profileImage.toString()),
      );
    }
  },
),