Flutter-图像选择器包:一个接一个地显示图像并带有删除动作 [英] Fluter- Image picker package: show images one after another with delete action
问题描述
在我的 Flutter pr 项目中，我使用
我的代码是:
class UserOptionsState extends State{//保存图库文件UserOptions的结果文件库文件；//保存相机文件的结果文件相机文件；var images_captured=List();列表<文件>图像 = 列表<文件>();@覆盖小部件构建(BuildContext 上下文){//显示从图库中选择的图像imageSelectorGallery() 异步 {画廊文件 = 等待 ImagePicker.pickImage(来源:ImageSource.gallery，//最大高度:50.0，//最大宽度:50.0，);图像.添加(画廊文件)；print("您选择的画廊图片:" + galleryFile.path);设置状态((){});}//显示从相机中选择的图像imageSelectorCamera() 异步 {cameraFile = 等待 ImagePicker.pickImage(来源:ImageSource.camera，//最大高度:50.0，//最大宽度:50.0，);print("您选择的相机图像:" + cameraFile.path);setState(() {});}返回新的 SingleChildScrollView(孩子:列(mainAxisAlignment: MainAxisAlignment.spaceAround,孩子们:<小部件>[新的凸起按钮(child: new Text('从图库中选择图片'),onPressed: imageSelectorGallery,),新的凸起按钮(child: new Text('从相机中选择图像'),onPressed: imageSelectorCamera,),新容器(//新列(//孩子:<小部件>[高度:1200，孩子:GridView.count(crossAxisSpacing: 6,主轴间距:6，crossAxisCount: 3,儿童:List.generate(images.length, (index) {返回列(孩子们:<小部件>[容器(高度:200，装饰:BoxDecoration(borderRadius: BorderRadius.circular(10),),孩子:ClipRRect(孩子:Image.file(图像[索引]，适合:BoxFit.cover)，borderRadius: BorderRadius.circular(10),)),手势检测器(onTap: () {设置状态((){图像.removeAt(索引)；});},孩子:填充(填充:const EdgeInsets.all(3.0),孩子:对齐(对齐:Alignment.bottomCenter，child: Icon(Icons.clear, color: Colors.black, size: 20),),),),]);}),),//])/*displaySelectedFile(galleryFile),displaySelectedFile(cameraFile)*/],),);}小部件显示SelectedFile(文件文件){返回新的 SizedBox(高度:200.0，宽度:300.0，//child: new Card(child: new Text(''+galleryFile.toString())),//child: 新的 Image.file(galleryFile),孩子:文件==空?new Text('对不起，没有选择任何东西！！'): 新的 Image.file(file),);}} 问题 1: 您首先需要将使用 ImagePicker(或 MultiImagePicker 插件)拾取的图像存储在一个集合中.以下是有关如何执行此操作的示例:
<代码>列表<文件>图像 = 列表<文件>();images.add(await ImagePicker.pickImage(source: ImageSource.gallery, imageQuality: 20););
当您想在屏幕上显示这些图像时，您可以使用多个不同的小部件，例如 ListView、GridView、Row、Column.这是我使用 GridView 的示例:
child:容器(高度:1200，孩子:GridView.count(crossAxisSpacing: 6,主轴间距:6，crossAxisCount: 3,儿童:List.generate(images.length, (index) {返回列(孩子们:<小部件>[容器(高度:200，装饰:BoxDecoration(borderRadius: BorderRadius.circular(10),),孩子:ClipRRect(孩子:Image.file(图像[索引]，适合:BoxFit.cover)，borderRadius: BorderRadius.circular(10),)),手势检测器(onTap: () {设置状态((){图像.removeAt(索引)；});},孩子:填充(填充:const EdgeInsets.all(3.0),孩子:对齐(对齐:Alignment.bottomCenter，child: Icon(Icons.clear, color: Colors.white, size: 20),),),),]),}),),我认为在这种情况下使用 Stack 小部件效果最好.堆栈可用于显示小部件，它们相互叠加.因此，在本例中，是一个显示图像的小部件，其顶部有一个图标小部件，它是您删除操作的按钮.
问题 2:您可以通过调用诸如列表之类的集合上可用的 removeAt 方法来删除图像.查看 GestureDetector 的 onTap 方法中的代码.通过调用 setState，一旦图像被删除，页面就会重建.
编辑抱歉，我误读了您的问题，发现您想在图像下方而不是顶部显示一个按钮.Column 小部件可用于此目的.我相应地编辑了代码.
In my Flutter pr project, I am using Image Picker plugin to select images from android mobile gallery or capture images with camera and show them one after another with a delete icon below each image. On tapping the RaisedButton for selecting images from the gallery, method imageSelectorGallery() is called. There inside the setState() method , I add a SizedBox and a delete icon to the List namely images_captured. I expect the images_captured to be rendered inside the Column in SingleChildScrollView.
But after selecting an image from the gallery, nothing happens. I also want to tap on the delete icon and remove the image above it. But flutter has no data binding mechanism as I know to correlate the image with the delete button.
Code follows:
class PrescriptionScreen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new UserOptionsState();
}
}
class UserOptionsState extends State<PrescriptionScreen> {
//save the result of gallery fileUserOptions
File galleryFile;
//save the result of camera file
File cameraFile;
@override
Widget build(BuildContext context) {
var images_captured=List<Widget>();
//display image selected from gallery
imageSelectorGallery() async {
galleryFile = await ImagePicker.pickImage(
source: ImageSource.gallery,
// maxHeight: 50.0,
// maxWidth: 50.0,
);
print("You selected gallery image : " + galleryFile.path);
setState(() {
var sized_box_indiv= new SizedBox(
height: 200.0,
width: 300.0,
//child: new Card(child: new Text(''+galleryFile.toString())),
//child: new Image.file(galleryFile),
child: galleryFile == null
? new Text('Sorry nothing selected from gallery!!')
: new Image.file(galleryFile),
);
images_captured.add(sized_box_indiv);
var delete_button = IconButton(icon: Icon(Icons.delete), onPressed: () {});
images_captured.add(delete_button);
});
}
//display image selected from camera
imageSelectorCamera() async {
cameraFile = await ImagePicker.pickImage(
source: ImageSource.camera,
//maxHeight: 50.0,
//maxWidth: 50.0,
);
print("You selected camera image : " + cameraFile.path);
setState(() {});
}
return new SingleChildScrollView(
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new RaisedButton(
child: new Text('Select Image from Gallery'),
onPressed: imageSelectorGallery,
),
new RaisedButton(
child: new Text('Select Image from Camera'),
onPressed: imageSelectorCamera,
),
Column(
children: images_captured
),
],
),
);
/* },
),
);*/
}
}
Q1: How to show the images selected from gallery one after another with a delete icon button below each of them ?
Q2: How to remove the corresponding image on tapping the delete icon button ?
I think if I can accomplish it for gallery, I can do it for camera capturing as well....
EDIT:
I used the answer by jJuice and the images after being selected showed overflow error. The screenshot is given below :
My code is :
class UserOptionsState extends State<PrescriptionScreen> {
//save the result of gallery fileUserOptions
File galleryFile;
//save the result of camera file
File cameraFile;
var images_captured=List<Widget>();
List<File> images = List<File>();
@override
Widget build(BuildContext context) {
//display image selected from gallery
imageSelectorGallery() async {
galleryFile = await ImagePicker.pickImage(
source: ImageSource.gallery,
// maxHeight: 50.0,
// maxWidth: 50.0,
);
images.add(galleryFile);
print("You selected gallery image : " + galleryFile.path);
setState(() {
});
}
//display image selected from camera
imageSelectorCamera() async {
cameraFile = await ImagePicker.pickImage(
source: ImageSource.camera,
//maxHeight: 50.0,
//maxWidth: 50.0,
);
print("You selected camera image : " + cameraFile.path);
setState(() {});
}
return new SingleChildScrollView(
child:Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new RaisedButton(
child: new Text('Select Image from Gallery'),
onPressed: imageSelectorGallery,
),
new RaisedButton(
child: new Text('Select Image from Camera'),
onPressed: imageSelectorCamera,
),
new Container(
// new Column(
// children: <Widget>[
height: 1200,
child:GridView.count(
crossAxisSpacing: 6,
mainAxisSpacing: 6,
crossAxisCount: 3,
children: List.generate(images.length, (index) {
return Column(
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: ClipRRect(
child: Image.file(images[index], fit: BoxFit.cover),
borderRadius: BorderRadius.circular(10),
)
),
GestureDetector(
onTap: () {
setState(() {
images.removeAt(index);
});
},
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.clear, color: Colors.black, size: 20),
),
),
),
]
);
}
),
),
// ]
)
/*displaySelectedFile(galleryFile),
displaySelectedFile(cameraFile)*/
],
),
);
}
Widget displaySelectedFile(File file) {
return new SizedBox(
height: 200.0,
width: 300.0,
//child: new Card(child: new Text(''+galleryFile.toString())),
//child: new Image.file(galleryFile),
child: file == null
? new Text('Sorry nothing selected!!')
: new Image.file(file),
);
}
}
Question 1: You first need to store the images picked by using ImagePicker (or MultiImagePicker plugin) in a collection. Here's an example on how to do that:
List<File> images = List<File>();
images.add(await ImagePicker.pickImage(source: ImageSource.gallery, imageQuality: 20););
When you want to show those images on the screen, you can use several different widgets, like ListView, GridView, Row, Column. Here's an example where I use a GridView:
child: Container(
height: 1200,
child: GridView.count(
crossAxisSpacing: 6,
mainAxisSpacing: 6,
crossAxisCount: 3,
children: List.generate(images.length, (index) {
return Column(
children: <Widget>[
Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
),
child: ClipRRect(
child: Image.file(images[index], fit: BoxFit.cover),
borderRadius: BorderRadius.circular(10),
)
),
GestureDetector(
onTap: () {
setState(() {
images.removeAt(index);
});
},
child: Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.bottomCenter,
child: Icon(Icons.clear, color: Colors.white, size: 20),
),
),
),
]
),
}
),
),
I think using a Stack widget works best in this case. A Stack can be used to show Widgets, layered on top of each other. So in this case, a widget showing the image, with a Icon widget on top of it that is the button for your delete action.
Question 2:
You could delete the image by calling the removeAt method available on collections like a List. See the code inside the onTap method of the GestureDetector. By calling setState the page gets rebuild once the image has been deleted.
EDIT
Sorry, I misread your question and see that you want to show a button below the image, instead of on top of it. A Column widget could be used for this purpose. I edited the code accordingly.
这篇关于Flutter-图像选择器包:一个接一个地显示图像并带有删除动作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
