Question

在 Cloud Firestore 中，我有一个包含三个文档的集合 cities，这些文档包含一个名为 dataList 的地图列表。每张地图都有两个字段 title 和 titleImage，详情请参阅图片。

我正在尝试使用嵌套的 ListViewBuilder 构建 UI。首先 ListViewBuilder 将根据 fetchDocs() 获取的文档长度构建小部件，并且在该小部件内部，有一个嵌套的 Listviewbuilder 带有水平滚动条，可根据每个文档中的地图构建小部件。

我未能根据每个文档中的地图实现第二个 Listviewbuilder 构建小部件。例如，伦敦文档有一个数组 dataList 并且它有两个地图字段，列表应该只包含伦敦文档的两个地图数据，并且每个文档列表视图都应该根据它们的 dataList 数组构建。

我使用 Getx 作为状态管理器。代码和UI图片如下

代码：

控制器

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:selftorial/Models/Models.dart';

class FirestoreController extends GetxController {
  // onInit
  @override
  void onInit() {
    fetchDocs();
    fetchSourceData();
    super.onInit();
  }

  // List to store Doc Id's
  List<String> docIdsList = [];

  // func retrieves Doc ids List from firebase
  void fetchDocs() async {
    final _docList =
        await FirebaseFirestore.instance.collection('cities').get().then(
              (snapshot) => snapshot.docs.map((e) => e.id).toList(),
            );
    docIdsList = _docList;
    update();
  }

  //
  List<SourceModel> modelList = [];

  //
  Future fetchSourceData() async {
    return FirebaseFirestore.instance.collection('cities').get().then(
      (querySnapshot) {
        querySnapshot.docs.forEach(
          (docu) {
            var mapData = docu.data();
            List _mapList = mapData['dataList'];
            _mapList.forEach((element) {
              modelList.add(
                SourceModel.fromMap(element),
              );
            });
          },
        );
      },
    );
  }
}

界面

  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: Padding(
          padding: EdgeInsets.symmetric(
            vertical: 10.0,
            horizontal: 12.0,
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              //------------------------------ Source List
              ListView.builder(
                  shrinkWrap: true,
                  itemCount: _firestoreController.docIdsList.length,
                  itemBuilder: (context, index) {
                    return Column(
                      children: [
                        //------------------------------ Category Head
                        Padding(
                          padding: EdgeInsets.symmetric(vertical: 8.0),
                          child: Row(
                            children: [
                              Padding(
                                padding: EdgeInsets.only(right: 8.0),
                                child: Text(
                                  _firestoreController.docIdsList[index],
                                  style: TextStyle(
                                    fontSize: 18.0,
                                    color: Colors.grey[500],
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Divider(
                                  color: Colors.grey[500],
                                ),
                              ),
                            ],
                          ),
                        ),

                        ///------------------------------ Course Image List
                        Container(
                          height: 150,
                          // color: Colors.grey,
                          child: ListView.builder(
                            scrollDirection: Axis.horizontal,
                            shrinkWrap: true,
                            itemCount: _firestoreController.modelList.length,
                            itemBuilder: (context, index) {
                              final SourceModel _sourceModel =
                                  _firestoreController.modelList[index];
                              return Container(
                                color: Colors.grey[300],
                                height: 100.0,
                                width: 100.0,
                                child: Text(_sourceModel.title!),
                              );
                            },
                          ),
                        ),
                        // courseWidget(docIndex: index, context: context),
                      ],
                    );
                  }),
            ],
          ),
        ),
      ),
    );
  }

图片

FireStore 嵌套的 ListView Builder。 [颤振，FireStore]

0 个答案: