firebase - 如何在 Flutter 中手动分配 Listview.builder 的第一个元素？

Question

我有一个 Flutter 应用程序，它在 Listview.builder 的卡片上显示事件(存储在 Cloud Firestore 中)。我有一个特定的事件，足球。它有自己的特殊卡片。列表中可以有多个常规赛事，但只有一个足球赛事。我想在列表的顶部显示此足球赛事，作为第一张卡片。我怎样才能做到这一点？

到目前为止我的代码:

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:fociapp/model/events.dart';
import 'package:fociapp/ui/event_card.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
        stream: Firestore.instance.collection("events").snapshots(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return snapshot.hasData
              ? Container(
                  color: Colors.grey[850],
                  child: ListView.builder(
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (BuildContext context, int index) {
                      DocumentSnapshot events = snapshot.data.documents[index];
                      Event event = Event(
                          events["eventName"],
                          events["startTime"],
                          events["coverImageUrl"],
                          events["location"],
                          events["description"]);

                      return EventCard(event);
                    },
                  ),
                )
              : Center(
                  child: CircularProgressIndicator(),
                );
        });
  }
}

Event 是来自 Firestore 的数据的模型类，EventCard 是小部件，它将数据显示在卡片中。

Answer 1

只需将 ItemCount 增加 1。
在您的 ItemBuilder 中，如果索引为 0，则返回足球卡，否则返回您的普通卡(索引 - 1)。
像这样:

ListView.builder(
    itemCount: snapshot.data.documents.length + 1,
    itemBuilder: (BuildContext context, int index) {
       if(index == 0) {
          // return Football-Card
       } else {
           DocumentSnapshot events = snapshot.data.documents[index - 1];
           Event event = Event(
               events["eventName"],
               events["startTime"],
               events["coverImageUrl"],
               events["location"],
               events["description"]);

            return EventCard(event);
        }
     },
),