flutter - Fluter- 图像选择器包：一个接一个地显示图像并带有删除操作

问题描述

在我的 Flutter pr 项目中，我使用Image Picker插件从 android 移动图库中选择图像，或者用相机捕获图像，并在每个图像下方使用删除图标依次显示它们。在点击RaisedButton从图库中选择图像时，imageSelectorGallery()会调用方法。在setState()方法里面，我给那个添加了一个和SizedBox一个delete图标。我希望在in中呈现。Listimages_capturedimages_capturedColumnSingleChildScrollView

但是从图库中选择图像后，什么也没有发生。我还想点击delete图标并删除其上方的图像。但是，据我所知，flutter 没有数据绑定机制来将图像与删除按钮相关联。

代码如下：

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：如何在每个图片下方都有一个delete图标按钮，依次显示从图库中选择的图片？

Q2：如何在点击delete图标按钮时删除相应的图像？

我想如果我可以为画廊做到这一点，我也可以为相机拍摄做到这一点......

编辑： 我使用了答案，jJuice选择后的图像显示溢出错误。截图如下：

我的代码是：

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),
    );
  }
}

标签： flutterflutter-imageimagepicker

解决方案

问题 1：首先需要将使用 ImagePicker（或 MultiImagePicker 插件）拾取的图像存储在一个集合中。这是有关如何执行此操作的示例：

List<File> images = List<File>(); images.add(await ImagePicker.pickImage(source: ImageSource.gallery, imageQuality: 20););

当您想在屏幕上显示这些图像时，您可以使用几个不同的小部件，例如 ListView、GridView、Row、Column。这是我使用 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),
                        ),
                      ),
                    ),
                  ] 
                ),
            }
        ),
      ),

我认为Stack在这种情况下使用小部件效果最好。堆栈可用于显示小部件，彼此层叠。所以在这种情况下，一个显示图像的小部件，顶部有一个图标小部件，它是您删除操作的按钮。

问题 2： 您可以通过调用removeAtList 等集合上可用的方法来删除图像。见onTap方法里面的代码GestureDetector。setState一旦图像被删除，通过调用页面得到重建。

编辑对不起，我误读了你的问题，看到你想在图像下方显示一个按钮，而不是在它的顶部。小Column部件可用于此目的。我相应地编辑了代码。

flutter - Fluter- 图像选择器包：一个接一个地显示图像并带有删除操作

问题描述

解决方案

推荐阅读