我在使用 imagePicker 获取图像以在列表视图中工作时遇到问题。当您按下列表视图中的一个容器时,您应该能够从图库中选择一张图像。但是,它在列表视图中的整个列表中显示相同的图像。我认为应该使用索引来显示不同的图像。请提供任何建议代码示例!
final ImagePicker picker = ImagePicker();
ListView.builder(
itemCount: chilList!.length,
itemBuilder: (context, i) {
return ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.blueAccent),
onPressed: () {
myAlert(i);
},
child: Text('Upload Image'),
),
image != null
? Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.file(
//to show image, you type like this.
File(image!.path),
fit: BoxFit.cover,
width:
MediaQuery.of(context).size.width,
height: 300,
),
),
)
: Text(
'',
style: TextStyle(fontSize: 20),
),
})
void myAlert(i) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
title: Text('Please choose media to select'),
content: Container(
height: MediaQuery.of(context).size.height / 6,
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
//if user click this button, user can upload image from gallery
onPressed: () {
Navigator.pop(context);
getImage(ImageSource.gallery, i);
},
child: Row(
children: [
Icon(Icons.image),
Text('From Gallery'),
],
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(primary: Colors.blueAccent),
//if user click this button. user can upload image from camera
onPressed: () {
Navigator.pop(context);
getImage(ImageSource.camera, i);
},
child: Row(
children: [
Icon(Icons.camera),
Text('From Camera'),
],
),
),
],
),
),
);
});
}
Future getImage(ImageSource media, i) async {
var img = await picker.pickImage(source: media);
setState(() {
image = img;
});
}
每个列表都有不同的图片上传
您应该创建文件列表并将图库图像存储在不同的索引上。
例如:-
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
class DemoSampleClass extends StatefulWidget {
@override
_DemoSampleClassState createState() => _DemoSampleClassState();
}
class _DemoSampleClassState extends State<DemoSampleClass> {
List<File?> imageList = List<File?>.filled(10, null); // Assuming 10 items
final picker = ImagePicker();
Future getImage(ImageSource media, i) async {
var img = await picker.pickImage(source: media);
if (img != null) {
setState(() {
imageList[i] = File(img.path);
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: imageList.length, // Adjust itemCount as per your list size
itemBuilder: (context, i) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
ElevatedButton(
onPressed: () {
myAlert(i); // Pick image for the specific index
},
child: Text('Upload Image'),
),
imageList[i] != null
? Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.file(
//to show image, you type like this.
File(imageList[i]!.path),
fit: BoxFit.cover,
width:
MediaQuery.of(context).size.width,
height: 300,
),
),
)
: Text(
'',
style: TextStyle(fontSize: 20),
),
],
),
);
},
),
);
}
void myAlert(i) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
title: Text('Please choose media to select'),
content: Container(
height: MediaQuery.of(context).size.height / 6,
child: Column(
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent),
//if user click this button, user can upload image from gallery
onPressed: () {
Navigator.pop(context);
getImage(ImageSource.gallery, i);
},
child: Row(
children: [
Icon(Icons.image),
Text('From Gallery'),
],
),
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.blueAccent),
//if user click this button. user can upload image from camera
onPressed: () {
Navigator.pop(context);
getImage(ImageSource.camera, i);
},
child: Row(
children: [
Icon(Icons.camera),
Text('From Camera'),
],
),
),
],
),
),
);
});
}
}