- bounty将在4天后过期**。回答此问题可获得+50声望奖励。Leena Marie希望引起更多人关注此问题。
我尝试将用户上传到Firebase Storage的所有图像显示到一个注解中，但使用note.image时它只给我一个图像，或使用image['url']时复制图像。我想使用note.image。我尝试了一些方法，但没有成功。抱歉添加了大量代码。我不确定需要更改哪些内容，也不知道如何解释这一切...我是新来的
这是我的模型，展示了一幅图像：
class NoteModel {
String? image;
String? id;
String? title;
String? description;
Timestamp? date;
String? userId;
NoteModel({
this.image,
this.id,
this.title,
this.description,
this.date,
this.userId
});
factory NoteModel.fromJson(DocumentSnapshot streamSnapshot){
return NoteModel(
image: streamSnapshot['image'],
id: streamSnapshot.id,
title: streamSnapshot['title'],
description: streamSnapshot['description'],
date: streamSnapshot['date'],
userId: streamSnapshot['userId']
);
}
}class FirestoreService{
FirebaseFirestore firestore = FirebaseFirestore.instance;
Future insertNote(
String image,
String title,
String description,
String userId)async{
try{
await firestore.collection('notes').add({
"image":image,
"title":title,
"description":description,
"date":DateTime.now(),
"userId":userId
});
} catch(e){
}
}在这里我使用note.image，并希望看到用户上传的多张图片：
FirebaseFirestore firestore = FirebaseFirestore.instance;
FirebaseStorage firebaseStorage = FirebaseStorage.instance;
@override
Widget build(BuildContext context) {
return Scaffold(
body: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection("notes")
.where('userId', isEqualTo: user?.uid ?? '')
.snapshots(),
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return Center(child: CircularProgressIndicator());
}
return ListView.builder(
itemCount: snapshot.data.docs.length ?? 0,
itemBuilder: (context, index) {
final NoteModel note =
NoteModel.fromJson(snapshot.data.docs[index]);
return Column(children: [
Center(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
),
child: Card(
color: Color(0xFFf4f5f7),
margin: EdgeInsets.only(
right: 10, top: 20, left: 10, bottom: 10),
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
child: Column(
children: <Widget>[
Image.network(
note.image!, // HERE
errorBuilder: (BuildContext context,
Object exception, StackTrace? stackTrace) {
return const Text(
'error loading image or no image found');
},
),我的AddNote屏幕，我可以在此将多个图像上传到Firebase存储：
File? imageFile;
String? fileName;
Future<void> uploadMultipleImages() async {
final picker = ImagePicker();
final List<XFile>? pickedImages = await picker.pickMultiImage();
if (pickedImages == null) {
return null;
}
setState(() {
loading = true;
});
await Future.forEach(pickedImages, (XFile image) async {
fileName = image.name;
imageFile = File(image.path);
try {
await firebaseStorage.ref(fileName).putFile(imageFile!);
} on FirebaseException catch (e) {
print(e);
}
});
setState(() {
loading = false;
});
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("All images uploaded successfully")));
}从Firebase存储加载图像：
Future<List> loadImages() async {
List<Map> files = [];
final ListResult result = await firebaseStorage.ref().listAll();
final List<Reference> allFiles = result.items;
await Future.forEach(allFiles, (Reference file) async {
final String fileUrl = await file.getDownloadURL();
files.add({
"url": fileUrl,
"path": file.fullPath,
});
});
print(files);
return files;
}使用imageUrl: image['url']显示所有图像：
InkWell(
onTap: () {
uploadMultipleImages();
},
child: SizedBox(
height: 150,
child: imageFile == null
? Center(child: Icon(Icons.add_a_photo_rounded, size: 80))
: Center(
child: Icon(Icons.add_a_photo_rounded, size: 80)),
),
),
SizedBox(
height: 300,
child: FutureBuilder(
future: loadImages(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemCount: snapshot.data?.length ?? 0,
itemBuilder: (context, index) {
final Map image = snapshot.data[index];
return Padding(
padding: EdgeInsets.only(left: 0.0),
child: Column(
children: [
Card(
child: SizedBox(
height: 200,
child: Stack(
children: [
CachedNetworkImage(
// imageUrl: note.image!,
imageUrl: image['url'],
placeholder: (context, url) =>
Image.asset(
'assets/placeholder.jpg'),
errorWidget:
(context, url, error) =>
Icon(Icons.error),
),
],
),
),
),ElevatedButton(
onPressed: () async {
if (imageFile == null ||
titleController.text.isEmpty ||
descriptionController.text.isEmpty
) {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
content: Text("All fields are required")));
} else {
setState(() {
loading = true;
});
String imageUrl = await FirebaseStorage.instance
.ref(fileName)
.putFile(imageFile!)
.then((result) {
return result.ref.getDownloadURL();
});
await FirestoreService().insertNote(
imageUrl,
titleController.text,
descriptionController.text,
widget.user.uid);
CollectionReference notes =
firestore.collection('notes');
QuerySnapshot allResults = await notes.get();
allResults.docs.forEach((DocumentSnapshot result) {
print(result.data());
});我尝试使用Swiper的NotesScreen页面。这里它使用note.image!和image ['url ']复制（循环？）图像：
body: StreamBuilder(
stream: FirebaseFirestore.instance
.collection("notes")
.where('userId', isEqualTo: user.uid)
.snapshots(),
builder: (context, AsyncSnapshot streamSnapshot) {
if (streamSnapshot.hasData) {
if (streamSnapshot.data.docs.length > 0) {
return ListView.builder(
itemCount: streamSnapshot.data.docs.length ?? 0,
itemBuilder: (context, index) {
final NoteModel note =
NoteModel.fromJson(streamSnapshot.data.docs[index]);
return Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
margin:
const EdgeInsets.only(top: 18, left: 15, right: 15),
child: Column(children: [
SizedBox(
height: 210,
child: Expanded(
child: FutureBuilder(
future: loadImages(),
builder: (context, AsyncSnapshot snapshot) {
if (snapshot.connectionState ==
ConnectionState.waiting) {
return const Center(
child: CircularProgressIndicator(),
);
}
return Swiper(
loop: false,
pagination: SwiperPagination(
alignment: Alignment.bottomRight,
builder: DotSwiperPaginationBuilder(
activeSize: 7,
size: 6,
color: Colors.grey[100],
activeColor: Colors.grey[600]),
),
scrollDirection: Axis.horizontal,
itemCount: snapshot.data.length ?? 0,
itemBuilder: (context, index) {
final Map image =
snapshot.data[index];
return Padding(
padding:
const EdgeInsets.all(0.0),
child: Column(
children: [
Card(
child: SizedBox(
height: 200,
child: SizedBox(
height: MediaQuery.of(
context)
.size
.height,
width: MediaQuery.of(
context)
.size
.width,
child: ClipRRect(
borderRadius:
const BorderRadius
.only(
topLeft: Radius
.circular(
15),
topRight: Radius
.circular(
15)),
child:
CachedNetworkImage(
fit: BoxFit.cover,
imageUrl:
note.image!,
// image['url'],
placeholder: (context,
url) =>
Image.asset(
'assets/placeholder.jpg'),
errorWidget: (context,
url,
error) =>
const Icon(Icons
.error),
),
),
),
),
),
],
));
});
}),
),
),
这里可能会有很多事情出错，所以如果你需要看到更多，请让我知道。
我在这方面的经验很少。任何帮助都将不胜感激!
抱歉，我可能React太慢了。
在注解屏幕上编辑：
child:
ListView.builder(
itemBuilder: (context, index) {
return CachedNetworkImage(
imageUrl: note.image!,
// image['url'],
placeholder: (context,
url) =>
Image.asset(
'assets/placeholder.jpg'),
errorWidget: (context,
url,
error) =>
const Icon(Icons
.error),
);
}),
2条答案
按热度按时间mqkwyuun1#
首先把你的达达斯模型改为：
然后将
Card更改为：4xrmg8kj2#
你只需要将上传的图片存储在firestore的列表中，通过这种方法，你可以得到特定用户上传的图片列表。
然后你必须把String改为List你的模型，就像下面的代码
然后用ListView.builder或GridView.builder Package CachedNetworkImage（）以显示所有上传的图像。