如何从firebase渲染每行2个文档

我在

Firebase

中有一个名为cvModels的集合，其中包含许多文档， 我想要实现的是每行显示2个文档（所有文档）

每个文档有2个字段：

• img：它是指向图像的链接
• 名称：哪个是字符串

所有内容都将在

列表视图

或

网格视图

中呈现

到目前为止，我有这个

函数

，它只为一个文档扩展整行

return StreamBuilder(
  stream: Firestore.instance.collection("cvModels").snapshots(),
  builder: (BuildContext  context,AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      return new ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: snapshot.data.documents.length,
        padding: const EdgeInsets.only(top: 5.0),
        itemBuilder: (context, index) {
          DocumentSnapshot ds = snapshot.data.documents[index];
          return new Row(
            // textDirection: TextDirection.ltr,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Expanded(
                child: Container(
                  height: 120,
                  width: 40,
                  margin: EdgeInsets.symmetric(vertical: 20.0),
                  decoration: BoxDecoration(
                    color: Colors.black12,
                    image: DecorationImage(
                      image: NetworkImage(ds["img"].toString()),
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
              // Expanded (
              //   child: Container(
              //     height: 100,
              //     width: 100,
              //     child:Text(ds["name"]),
              //   ),
              // ),
              // Expanded (child:Text(ds["last-field"].toString()) ),
            ],
          );
        }  
      );
    }
  },
);

返回StreamBuilder(
流：Firestore.instance.collection（“cvModels”）.snapshots（），
生成器：（BuildContext上下文，异步快照）{
if（snapshot.hasData）{
返回新的ListView.builder(
滚动方向：轴垂直，
收缩膜：对，
itemCount:snapshot.data.documents.length，
填充：仅限常量边集（顶部：5.0），
itemBuilder：（上下文，索引）{
DocumentSnapshot ds=snapshot.data.documents[索引]；
返回新行(
//textDirection:textDirection.ltr，
mainAxisSize:mainAxisSize.max，
儿童：[
扩大(
子：容器(
身高：120，
宽度：40，
边缘：边缘组。对称（垂直：20.0），
装饰：盒子装饰(
颜色：颜色。黑色，
图像：装饰图像(
image:NetworkImage（ds[“img”].toString（）），
fit:BoxFit.fill，
),
),
),
),
//扩大(
//子：容器(
//身高：100，
//宽度：100，
//子项：文本（ds[“名称]），
//   ),
// ),
//已展开（子项：文本（ds[“最后一个字段”].toString（）），
],
);
}  
);
}
},
);

---

非常感谢您的帮助。

在这里从臀部拍摄，因为我无法直观地看到您在追求什么，但您不能这样做来获取当前快照和下一个快照：

DocumentSnapshot snapshot = snapshot.data.documents[index];
DocumentSnapshot nextSnapshot = snapshot.data.documents[index + 1];

在您的

行中

只需添加显示两个快照信息的小部件？也许将您的

扩展的
小部件包装在自己的
小部件中（
RowInfo
为例），以使其更干净，从而使您的最后一行
看起来像：

Row(
  children: [
    RowInfo(img: snapshot['img'], name: snapshot['name']),
    RowInfo(img: nextSnapshot['img'], name: nextSnapshot['name'])
  ]
)

编辑：要检查
nextSnapshot
是否存在，只需将其包装在
if
中，然后返回两个
RowInfo
或一个：

if (nextSnapshot == null) {
  return Row(
    children: [
      RowInfo(img: snapshot['img'], name: snapshot['name'])
    ]
  )
}
else {
  return Row(
    children: [
      RowInfo(img: snapshot['img'], name: snapshot['name']),
      RowInfo(img: nextSnapshot['img'], name: nextSnapshot['name'])
    ]
  )
}

根据您的评论，尝试将您的
ListView.builder
替换为
GridView.builder
：

return GridView.builder(
  itemCount: snapshot.data.documents.length,
  itemBuilder: (context, index) {
    return Row(
      // textDirection: TextDirection.ltr,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        Expanded(
          child: Container(
            height: 120,
            width: 40,
            margin: EdgeInsets.symmetric(vertical: 20.0),
            decoration: BoxDecoration(
              color: Colors.black12,
              image: DecorationImage(
                image: NetworkImage(ds["img"].toString()),
                fit: BoxFit.fill,
              ),
            ),
          ),
        ),
        Expanded (
          child: Container(
            height: 100,
            width: 100,
            child:Text(ds["name"]),
          ),
        ),
        Expanded (child:Text(ds["last-field"].toString())),
      ],
    );
  },
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2
  ),
)

返回GridView.builder(
itemCount:snapshot.data.documents.length，
itemBuilder：（上下文，索引）{
返回行(
//textDirection:textDirection.ltr，
mainAxisSize:mainAxisSize.max，
儿童：[
扩大(
子：容器(
身高：120，
宽度：40，
边缘：边缘组。对称（垂直：20.0），
装饰：盒子装饰(
颜色：颜色。黑色，
图像：装饰图像(
image:NetworkImage（ds[“img”].toString（）），
fit:BoxFit.fill，
),
),
),
),
扩大(
子：容器(
身高：100，
宽度：100，
子项：文本（ds[“名称]），
),
),
已展开（子项：文本（ds[“最后一个字段”].toString（）），
],
);
},
gridDelegate:SliverGridDelegateWithFixedCrossAxisCount(
交叉轴计数：2
),
)
您的代码似乎没有任何问题。你犯了什么错误？@Joãosaares我说代码运行良好，但我想要的是不同的东西。我想每行显示2个项目，而不是每行显示1个。从您注释的代码看，您已经实现了它。文本没有显示吗？已经有一行包含两个元素。是否有一个屏幕截图可以帮助我们了解您拥有的以及您想要实现的目标？@Joãosaares这仍然只是一个文档的图像和名称。我的意思是在一行中实际显示两个文档，也就是说（doc1>img+name）+（doc2>img+name）都在一行中。ListView.builder中的循环将逐个遍历您的文档列表。第一次运行时，您位于列表的项目0上，但您希望显示项目0和项目1。在第二次运行时，您将看到项目1，但现在您希望显示项目2和3。你看到问题了吗？GridView小部件对您来说不是更好的解决方案吗？事实上我真的没有想到，我将尝试一点，但是它应该检查索引+1是否存在或捕获异常。。etc@DeckerTammy添加了一个关于如何做到这一点的片段。我刚刚尝试过，效果很好，非常感谢@Chrillewoodz:DIt效果很好，是否可以编辑和添加文档快照ds=snapshot.data.documents[index]；在itemBuilder下，仅针对可能有相同问题的下一个/未来用户。谢谢。