在 Flutter 的垂直滚动视图中的水平列表视图中显示来自 Firestore 的数据

Question

我对使用 Flutter 进行编码还很陌生，目前，我正在尝试开发一个图像分类应用程序。我有一个 Cloud Firestore 数据库，其中数据库中的每个文档都包含两个字段：图像标签和图像 URL。下面附上数据库结构的例子：

Example of the structure of the database

我正在尝试根据各自的标签对图像进行分类，并将它们显示在标签应显示在可滚动水平 ListView 顶部的位置，同时要显示属于该标签的图像在下面的可滚动水平 ListView 中。此外，水平 ListView 小部件应包含在垂直 ScrollView 中。实现图片显示的例子如下：

Example of the display of images to be achieved

我已经尝试过 ListView 和 SingleChildScrollView 之类的方法，但我最接近目标的方法是使用 StreamBuilder 和 ListView.builder，如下面的代码。

代码：

@override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.orange[400],
    centerTitle: true,
    title: Text('Revision'),
    titleTextStyle: TextStyle(
      fontSize: 24.0,
    ),
  ),

  body: StreamBuilder(
    stream: FirebaseFirestore.instance.collection('Images').snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
      if(!snapshot.hasData){
        return Center(
          child: CircularProgressIndicator(),
        );
      }

      return ListView(
        children: snapshot.data.docs.map((document) {
            return SizedBox(
              height: 300,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 1,
                itemBuilder: (_, __) => Container(
                  margin: EdgeInsets.all(12), 
                  width: 300, 
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage(document['url']),
                      fit: BoxFit.scaleDown,
                    )
                  ),
                ),
              ),
            );
        }).toList(),
      );
    }
  ), 
);

即便如此，结果仍然与前面示例中所示的图像显示相去甚远：

Example of the result of the code

结果的显示似乎是应用程序中非常常见的结构，但是，我似乎好几天都无法让它工作。 :(

任何帮助将不胜感激，如果可能的话，请问是否可以修改上面的代码以实现上述结果。谢谢你，祝你有美好的一天！

编辑（这是我设法将标签和图像一起显示但无法对其进行分类的代码）：

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[400],
        centerTitle: true,
        title: Text('Revision'),
        titleTextStyle: TextStyle(
          fontSize: 24.0,
        ),
      ),

      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('Images').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
          if(!snapshot.hasData){
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          
          return ListView(
            children: snapshot.data.docs.map((document) {
              return Center(
                child: Column(
                  children: [
                    SizedBox(height: 20),

                    Text(document['label']),

                    SizedBox(height: 20),

                    Container(
                      height: MediaQuery.of(context).size.height / 4,
                      width: MediaQuery.of(context).size.width / 1,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(document['url']),
                          fit: BoxFit.scaleDown
                        )
                      ),
                    ),
                  ],
                ),
              );
            }).toList(),
          );
        }
      ),
    );
  }

结果：Example of the edit done

感谢：https://medium.com/quick-code/reading-lists-from-firestore-using-streambuilder-in-flutter-eda590f461ed 编辑结果

Answer 1

好的，所以您想要一个图像列表，上面有一个 title/header 可以水平滚动，但列表也可以垂直滚动？尝试这样的事情。首先，您需要一个带有标题和图像权利的图像列表。所以你需要一个 ListView.Builder（如果你不知道列表中会有多少项目，那么生成器，非常适合从在线数据库中获取数据）并将 scrollDirection 设置为 horizontal 并将 shrinkwrap 设置为 true。在生成器内部，您想将 itemCount 设置为项目的长度（希望您知道它是如何完成的）和 return a class showData（您可以任意命名）

child: ListView.builder(
      physics: ClampingScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 15,
      itemBuilder: (BuildContext context, int index) => ShowData();

新建一个class ShowData并添加Card，在child的card中添加Padding（稍后设置space会用到）然后在填充的 child 中添加一列，就像您当前所做的那样。在列中，您可以添加图像和标题，您将从数据库中获得标题 + 图像，并且 ListView.builder 将一次创建一个。所以每个标题+图像将是一张卡片，第二张卡片将是另一张标题+图像。现在要使其可垂直滚动，只需使用 singlechildscrollview 包裹卡片（如果卡片不起作用，请尝试使用列）

并且您将拥有一个项目列表，其中包含标题和图像并且可以水平滚动，如果它下面有更多项目，那么它也可以垂直滚动（仅当它位于屏幕下方时)

你可以从这里得到灵感 Horizontal ListView inside a Vertical ScrollView in Flutter 和这里 https://youtu.be/CQt91j_MsUw

在 Flutter 的垂直滚动视图中的水平列表视图中显示来自 Firestore 的数据

Displaying data from Firestore in a Horizontal ListView within a Vertical ScrollView in Flutter

listview

firebase

flutter

google-cloud-firestore

flutter-layout