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

问题描述

我有一个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是小部件，用于在卡中显示数据。

解决方法

只需将ItemCount加1。 在您的ItemBuilder中，如果索引为0，则返回Football-Card，否则返回常规卡（索引-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);
        }
     },),

,

在您的ListView.builder中，您可以根据其index告诉它显示其他内容。我们可以使用if语句来实现这一点。您的索引将始终从0开始，并且在构建窗口小部件后每次都会增加。您可以检查索引是否为0，并在索引为0时显示足球赛事。

ListView.builder(
                    itemCount: snapshot.data.documents.length,int index) {
                      if(index==0){
                      DocumentSnapshot events = snapshot.data.documents[index];
                      Event event = Event(
                          events["eventName"],events["description"]);

                      return EventCard(event);
                      }
                      else{
                      //return your other things
                      }
                    },)

,

您只能操作数据以满足要求，而不能操作ListView。

struct