Ich habe eine Flutter-Anwendung, die Ereignisse (im Cloud Firestore gespeichert) auf Karten in einem Listview.builder anzeigt. Ich habe ein bestimmtes Ereignis, Fußball. Es hat seine eigenen, speziellen Karten. Die Liste kann mehrere reguläre Ereignisse enthalten, jedoch nur ein Fußballereignis. Ich möchte dieses Fußballereignis als erste Karte ganz oben auf der Liste anzeigen. Wie kann ich das erreichen?

Mein Code bisher:

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

4
jdsflk 18 Aug. 2020 im 12:11

3 Antworten

Beste Antwort

Erhöhen Sie einfach den ItemCount um eins. Und in Ihrem ItemBuilder, wenn der Index 0 ist, geben Sie die Fußballkarte zurück und wenn nicht, geben Sie Ihre normalen Karten zurück (Index - 1).

Wie so:

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);
        }
     },
),
2
Ruben Röhner 18 Aug. 2020 im 09:22

Sie können die Daten nur bearbeiten, um die Anforderungen zu erfüllen, nicht die ListView.

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: createListView(snapshot.data.documents),
              )
                  : Center(
                child: CircularProgressIndicator(),
              );
            });
      }
    
      Widget createListView(List<DocumentSnapshot> documentList){
        // find football and move it to the start position.
        DocumentSnapshot football = documentList.indexWhere((element) => element.eventName == 'football');
        documentList.remove(football);
        documentList.insert(0, football);
    
        return ListView.builder(
          itemCount: documentList.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);
          },
        );
      }
    }
0
JackShen 18 Aug. 2020 im 10:22

In Ihrem ListView.builder können Sie ihm mitteilen, dass er basierend auf seinem index etwas anderes anzeigen soll. Wir können eine if-Anweisung verwenden, um dies zu erreichen. Ihr Index beginnt immer bei 0 und wird jedes Mal nach dem Erstellen des Widgets erhöht. Sie können überprüfen, ob der Index 0 ist, und Ihr Fußballereignis anzeigen, wenn der Index 0 ist.

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

                      return EventCard(event);
                      }
                      else{
                      //return your other things
                      }
                    },
                  ),
                )
1
Uni 18 Aug. 2020 im 09:16