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(),
);
});
}
}
3 Antworten
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);
}
},
),
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);
},
);
}
}
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
}
},
),
)
Verwandte Fragen
Neue Fragen
firebase
Firebase ist eine serverlose Plattform für die einheitliche Entwicklung von Anwendungen für mobile Geräte und für das Web. Es verwendet eine NoSQL-Struktur im Gegensatz zu RDBMS.