如何在listview颤动中显示来自firestore的图像数组？
Posted
技术标签:
【中文标题】如何在listview颤动中显示来自firestore的图像数组？【英文标题】：How to display array of image from firestore in listview flutter? 【发布时间】：2021-03-19 22:14:33 【问题描述】：我想在从 firestore 读取数据的列表视图中显示图像。我将属性图像声明为数组类型。这是我的收藏。
当我运行代码时，图像只显示数组的第一个索引，第二个会像这样读取数组的第一个索引。据说是图像的第二张幻灯片，它将显示来自 firestore 的数组的第二个索引。
这是我的代码。
import 'package:carousel_pro/carousel_pro.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:fyp/shared/Loading.dart';
import 'package:google_fonts/google_fonts.dart';
class ListTask extends StatefulWidget
@override
_ListTaskState createState() => _ListTaskState();
final FirebaseAuth auth = FirebaseAuth.instance;
Stream<QuerySnapshot> getUserRd(BuildContext context) async*
final FirebaseUser rd = await auth.currentUser();
yield* Firestore.instance.collection("Task").where('uid',isEqualTo: rd.uid).snapshots();
class _ListTaskState extends State<ListTask>
List<NetworkImage> _listOfImages = <NetworkImage>[];
@override
Widget build(BuildContext context)
return Container(
child: StreamBuilder(
stream: getUserRd(context),
builder: (context, snapshot)
if (snapshot.hasError || !snapshot.hasData)
return Loading();
else
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index)
DocumentSnapshot ba = snapshot.data.documents[index];
_listOfImages =[];
for(int i =0; i < snapshot.data.documents[index].data['url'].length; i++)
_listOfImages.add(NetworkImage(snapshot.data.documents[index].data['url'][i]));
return Card(
child:ListTile(
title: Container(
alignment: Alignment.centerLeft,
child: Column(
children: <Widget>[
SizedBox(height: 5.0),
Container(alignment: Alignment.centerLeft,
child: Row(
children: [
Text("Sumber Aduan: ", style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
Text(ba['sumberAduan'], style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 5.0),
Container(alignment: Alignment.centerLeft,
child: Row(
children: [
Text("Nombor Aduan: ", style: GoogleFonts.lato(fontWeight: FontWeight.bold)),
Text(ba['noAduan'], style: GoogleFonts.lato(fontWeight: FontWeight.bold)),
],
),
),
SizedBox(height: 5.0),
Container(alignment: Alignment.centerLeft,
child: Row(
children: [
Text("Status: ", style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
Text(ba['verified'], style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
],
),
),
Column(
children: [
Container(
margin: EdgeInsets.all(10.0),
height: 200,
decoration: BoxDecoration(
color: Colors.white
),
width: MediaQuery.of(context).size.width,
child: Carousel(
boxFit: BoxFit.cover,
images: _listOfImages,
autoplay: false,
indicatorBgPadding: 5.0,
dotPosition: DotPosition.bottomCenter,
animationCurve: Curves.fastLinearToSlowEaseIn,
animationDuration: Duration(milliseconds: 2000),
),
)
],
)
],
),
),
onTap: () listAddress(ba['id']);
)
);
);
),
);
void listAddress(String id)
showModalBottomSheet(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(10.0),
topRight: const Radius.circular(10.0)
)
),
context: context,
builder: (builder)
return StreamBuilder(
stream:Firestore.instance.collection("Task").document(id).snapshots(),
builder: (context, snapshot)
if (!snapshot.hasData)
return Loading();
else
return Container(
height: 150,
child: Container(
padding: EdgeInsets.fromLTRB(20.0, 3, 30.0, 5.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
alignment: Alignment.topLeft,
width: 220,
margin: EdgeInsets.only(top:26, left: 14),
child: Row(
children: [
Text("Kawasan: ", textAlign: TextAlign.left,style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
Text( snapshot.data['kawasan'], textAlign: TextAlign.left,style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
],
),
),
Container(
width: 220,
margin: EdgeInsets.only(top:4, left: 15),
child: Row(
children: [
Text("Nama Jalan :", textAlign: TextAlign.left,style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
Text(snapshot.data['naJalan'], textAlign: TextAlign.left,style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
],
),
),
Container(
width: 220,
margin: EdgeInsets.only(top:4, left: 15),
child: Row(
children: [
Text("Kategori : ", textAlign: TextAlign.left,style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
Text(snapshot.data['kategori'], textAlign: TextAlign.left,style: GoogleFonts.asap(fontWeight: FontWeight.bold)),
],
),
),
],
),
)
],
),
],
),
),
);
);
);
有人可以向我解释这个问题吗？有什么我错过的吗？有人帮帮我吗？
【问题讨论】：
【参考方案1】：代码是正确的。您的列表url 中的链接完全相同，这就是您获得相同图片的原因。
【讨论】：
但在我上传这张图片之前，我选择了 2 张不同的图片。怎么只拍第一张？ 因为我使用 multi_image 选择器选择了许多图像 这完全是另一个问题 :-) 没有看到代码没有人可以回答你。 看看你的第一张截图。你能看到链接是一样的吗？ 是的，我看到链接是一样的。但是为什么它只拍了第一张图片，同时我选择了另一张与前一张不同的图片。有什么我错过的吗？以上是关于如何在listview颤动中显示来自firestore的图像数组？的主要内容，如果未能解决你的问题，请参考以下文章
如何在颤动中使我的文本与 listview.builder 一起滚动