Flutter 长笛-图像选择器包：显示图像一个接一个的删除行动

在我的Flatter pr项目中，我使用插件从android mobile gallery中选择图像，或者用相机拍摄图像，然后在每个图像下面用删除图标一个接一个地显示它们。点击从库中选择图像的

raised按钮

，调用方法

imageSelectorGallery（）

。在

setState（）

方法中，我在

列表中添加了一个
SizedBox
和一个
delete
图标，即
images\u captured
。我希望捕获的
图像能够呈现在
SingleChildScrollView
中的
列中

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

代码如下：

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


            ],
          ),
    );
       /* },
      ),
    );*/
  }


}

问题1:首先需要将使用ImagePicker（或MultiImagePicker插件）拾取的图像存储在集合中。下面是一个如何做到这一点的示例：

List image=List（）；
添加（等待ImagePicker.pickImage（源：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),
                        ),
                      ),
                    ),
                  ] 
                ),
            }
        ),
      ),

child:容器(
身高：1200，
子项：GridView.count(
横轴间距：6，
平均间距：6，
交叉轴计数：3，
子项：List.generate（images.length，（index）{
返回列(
儿童：[
容器(
身高：200，
装饰：盒子装饰(
边界半径：边界半径。圆形（10），
),
孩子：ClipRRect(
子项：Image.file（图像[index]，fit:BoxFit.cover），
边界半径：边界半径。圆形（10），
)
),
手势检测器(
onTap:（）{
设置状态（）{
图像移除（索引）；
});
},
孩子：填充(
填充：常数边集全部（3.0），
子对象：对齐(
对齐：对齐.bottomCenter，
子项：图标（图标。清晰，颜色：颜色。白色，大小：20），
),
),
),
] 
),
}
),
),

我认为使用
堆栈
小部件在这种情况下效果最好。堆栈可以用来显示小部件，每个小部件层叠在一起。因此，在这种情况下，一个小部件显示图像，上面有一个图标小部件，它是执行删除操作的按钮

问题2:
您可以通过调用集合（如列表）上可用的
removeAt
方法来删除图像。请参阅
gesturedetor
的
onTap
方法中的代码。通过调用
setState
在删除图像后重新生成页面

编辑
抱歉，我误读了您的问题，发现您希望在图像下方显示一个按钮，而不是在其上方。可以使用
列
小部件来实现此目的。我相应地编辑了代码。
如果您想加载多个图像，可以使用此插件。查看它是否有效或是否需要更多帮助。我的方法有什么问题？使用您的方法，您只能有一台相机和一张画廊图片，因为您对每一张图片都使用一个实例。您可以使用页面视图显示它们，对于单个页面，您可以使用一个带有删除图标的堆栈。新图像将添加到“图像捕获”列表中。为什么它们不会显示？甚至没有一张图像显示？C如果你用你的方法发布了一个答案，例如：堆栈等？删除操作是如何发生的？你的图像列表是空的，因为它在构建函数中，每次你得到一个图像时，你调用setState函数，该函数再次调用构建函数，你的图像列表再次被创建。请尝试放置
var images\u captured=list（）
外部构建功能您将获得所有图像。如何在点击“删除”按钮时使用“是”和“否”选项显示警报？不要直接删除图像，而是调用显示警报消息的功能。上传后，以
子项开头的代码应放在哪里？
容器
高度：1200
在许多图像中，会出现溢出错误。即使上载单个图像，也会出现溢出错误和
图标。clear
不会显示？此代码只是为了让您了解如何实现这一点，我不会直接复制它。我猜将clear图标的颜色从白色更改为黑色会使其可见？如果您发布代码后，我可以检查您如何解决溢出错误。删除该部分后，我将您的代码粘贴在代码中的
列（儿童：图像捕获）的位置。
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),
                        ),
                      ),
                    ),
                  ] 
                ),
            }
        ),
      ),