来自Firestore的数据未在屏幕上显示（扑响）

Question

我试图在流构建器中从Firestore中获取数据（全部在列表视图中）。我现在使用的方法的问题在于屏幕上没有显示任何内容。我尝试设置状态（检查屏幕是否已安装后，但无济于事）。 我知道正在拉出正确的数据是因为它打印到屏幕上，但是由于某种原因，它只是在屏幕上没有显示。

以下是我列表的示例：

Widget _showFriends() {
    return Expanded(
      child: StreamBuilder<List<Future<AppUser>>>(
        stream: db.friendStream(),
          builder: (context, snapshot) {
            if(snapshot.hasData) {
              print("in here");
              final friends = snapshot.data!;
              var friend;
              String username = "";
              String firstName = "";
              String photoUrl = "";

              return ListView.builder(
                keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
                itemCount: snapshot.data!.length,
                itemBuilder: (context, index) {
                   friends[index].then((value) {
                     friend = value;
                     username = value.username;
                     firstName = value.firstName;
                     //photoUrl = value.photoUrl;
                     print("friend username  -- " + username);
                   });
                  return GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(MaterialPageRoute(builder: (context)
                      => IndividualProfile(
                        sourceType: SourceType.friends,
                        name: friend.firstName,
                        userName: friend.username,
                        aboutMe: friend.aboutMe,
                        photoUrl: friend.photoUrl,
                        individualUid: friend.uid,
                      )
                      ));
                    },
                    child: ListTile(
                      title: Text(username),
                      subtitle: Text(firstName),
                      /*leading: CircleAvatar(
                        backgroundImage: CachedNetworkImageProvider(photoUrl),
                      ),*/
                    ),
                  );
                },
              );
            }
            else if(snapshot.hasError) {
              print(snapshot.error.toString());
              return const Center(
                child: Text("An error occurred please try again later"),
              );
            }
            else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          }
      )
    );
  }

请让我知道任何建议。我非常感谢！

Answer 1

问题是朋友[index]是Future。您没有等待它在返回geduredetector之前。

返回geturetetector（...）将在friends [index] .then回调之前调用。当返回getruestector（...）时，变量friend仍然是null的。

等待的正确方法将与futurebuilder一起使用。

尝试以下操作：

Widget _showFriends() {
  return Expanded(
    child: StreamBuilder<List<Future<AppUser>>>(
      stream: db.friendStream(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final friends = snapshot.data!;

          return ListView.builder(
            keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              // here I am awaiting friends[index]'s future
              return FutureBuilder<AppUser>(
                future: friends[index],
                builder:
                    (BuildContext context, AsyncSnapshot<AppUser> snapshot) {
                  if (snapshot.hasError) {
                    return const Center(
                      child: Text(
                        'An error occurred. Please try again later',
                      ),
                    );
                  }
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const Center(child: CircularProgressIndicator());
                  }
                  final friend = snapshot.data!;

                  return GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => IndividualProfile(
                            sourceType: SourceType.friends,
                            name: friend.firstName,
                            userName: friend.username,
                            aboutMe: friend.aboutMe,
                            photoUrl: friend.photoUrl,
                            individualUid: friend.uid,
                          ),
                        ),
                      );
                    },
                    child: ListTile(
                      title: Text(friend.username),
                      subtitle: Text(friend.firstName),
                      // leading: CircleAvatar(
                      //   backgroundImage:
                      //       CachedNetworkImageProvider(friend.photoUrl),
                      // ),
                    ),
                  );
                },
              );
            },
          );
        }
        if (snapshot.hasError) {
          print(snapshot.error.toString());
          return const Center(
            child: Text('An error occurred please try again later'),
          );
        }
        return const Center(child: CircularProgressIndicator());
      },
    ),
  );
}