Как я могу сделать 2 документа в строке из Firebase

Question

У меня есть коллекция в Firebase, которая называется cvModels и содержит много документов, чего я хочу добиться - показать 2 документа в каждой строке (все документы).

Каждый документ имеет 2 поля:

• img : ссылка на изображение
• name : строка

Все будет отображаться в ListView или GridView.

Пока у меня есть это Function, которое расширяет только всю строку только для 1 документа.

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()) ),
            ],
          );
        }  
      );
    }
  },
);

Любой Спасибо за помощь, спасибо.

Answer 1

Согласно вашему комментарию, попробуйте заменить 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
  ),
)

Answer 2

Съемка с бедра здесь, так как я не вижу визуально, что вы ищете, но вы не можете сделать это, чтобы получить текущий снимок, а также следующий:

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

И в ваши Row просто добавить виджеты, которые будут отображать информацию для обоих снимков? Возможно, оберните ваши Expanded виджеты в свои Widget (RowInfo в качестве примера), чтобы сделать его чище, чтобы ваш окончательный Row выглядел примерно так:

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

EDIT : Чтобы проверить, существует ли 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'])
    ]
  )
}