列出 Flutter Firebase 字段

Question

嗨，我想在 Flutter Firebase 字段中列出一个列表。 我正在为该领域的追随者创建一个 ID。 在 Firebase 中，字段中有一个集合、用户 ID 和关注者 ID。 我的编码如下。 但我没有列出清单。 我将做出哪些改变？

追随者卡片

class FollowersCard extends StatefulWidget {
  final snap;

  const FollowersCard({
    Key? key,
    required this.snap,
  }) : super(key: key);

  @override
  State<FollowersCard> createState() => _FollowersCardState();
}

class _FollowersCardState extends State<FollowersCard> {
  List<dynamic> followersList = []; // shouldn't use dynamic

  getdata() async {
    await FirebaseFirestore.instance
        .collection("users")
        .doc(FirebaseAuth.instance.currentUser!.uid)
        .get()
        .then((value) async {
      // get followerIds
      List<String> follwerIds = List.from(value.data()!['followers']);
      // loop through all ids and get associated user object by userID/followerID
      for (int i = 0; i < follwerIds.length; i++) {
        var followerId = follwerIds[i];
        var data = await FirebaseFirestore.instance
            .collection("users")
            .doc(followerId)
            .get();

        // push that data into followersList variable as we are going
        // to use that in listViewBuilder
        followersList.add(data);
      }
      setState(() {});
    });

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

  @override
  Widget build(BuildContext context) {
    // use the listView builder to render the list of followers card
    return SingleChildScrollView(
      physics: NeverScrollableScrollPhysics(),
      child: ListView.builder(
          shrinkWrap: true,
          itemCount: followersList.length,
          itemBuilder: (context, index) {
            var followerItem = followersList[index];
            print('photoUrl');

            return _buildFollowersCard(
                followerItem['photoUrl'], followerItem['username']);
          }),
    );
  }

  Widget _buildFollowersCard(String photoUrl, String username) {
    return Container(
      height: 70,
      width: double.infinity,
      color: mobileBackgroundColor,
      child: Card(
        child: Column(children: [
          //Header
          Container(
            height: 40,
            width: double.infinity,
            padding: const EdgeInsets.symmetric(
              vertical: 4,
              horizontal: 16,
            ).copyWith(right: 0),
            child: Row(
              children: [
                CircleAvatar(
                  radius: 16,
                  backgroundImage: NetworkImage(
                    photoUrl,
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: EdgeInsets.only(left: 8),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          username,
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          )
        ]),
      ),
    );
  }
}

追随者屏幕

class FollowersScreen extends StatefulWidget {
  const FollowersScreen({Key? key}) : super(key: key);

  @override
  State<FollowersScreen> createState() => _FollowersScreenState();
}

class _FollowersScreenState extends State<FollowersScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: mobileBackgroundColor,
        centerTitle: true,
        title: Image.asset(
          'Resim/logo.png',
          height: 50,
        ),
      ),
      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('users').snapshots(),
        builder: (context,
            AsyncSnapshot<QuerySnapshot<Map<String, dynamic>>> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          return ListView.builder(
            itemCount: snapshot.data!.docs.length,
            itemBuilder: (context, index) => FollowersCard(
              snap: snapshot.data!.docs[index].data(),
            ),
          );
        },
      ),
    );
  }
}

Answer 1

问题是_FollowersScreenState.initState在错误的位置。 它在它试图调用的函数getdata内部。 initState永远不会被调用。 这就是为什么没有建立列表的原因。

此外， setState是分配State值的方法。 因此，首先，填充一个临时的追随者列表，然后将其分配给setState回调中的State one。

下面是_FollowersScreenState的固定片段代码：

class _FollowersCardState extends State<FollowersCard> {
  List<dynamic> followersList = []; // shouldn't use dynamic

  getdata() async {
    List<dynamic> followers = [];

    final currentUserSnapshot = await FirebaseFirestore.instance
        .collection('users')
        .doc(FirebaseAuth.instance.currentUser!.uid)
        .get();

    // get followerIds
    List<String> follwerIds =
        List.from(currentUserSnapshot.data()!['followers']);
    // loop through all ids and get associated user object by userID/followerID
    for (int i = 0; i < follwerIds.length; i++) {
      var followerId = follwerIds[i];
      var data = await FirebaseFirestore.instance
          .collection('users')
          .doc(followerId)
          .get();

      // push that data into the temp list variable as we are going
      // to use that in to setState
      followers.add(data);
    }
    setState(() => followersList = followers);
  }

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

  ...