想通过提取一个方法添加多张图片

Question

我想添加 3 个圆圈图像选择器头像，并想在其中上传 3 张不同的图片，但遗憾的是无法做到这一点。我尝试通过提取方法并将图像传递给单个提取的构建方法来做到这一点，结果所选的图像应用于所有三个化身。请帮助我度过难关。

以下是从图库和相机中选取图像的函数：

 File _image;
  final Picker = ImagePicker();
  _imgFromCamera() async {

    final image = await Picker.pickImage(
        source: ImageSource.camera, imageQuality: 50
    );

    setState(() {
      _image = File(image.path);
    });
  }

  _imgFromGallery() async {
     final image = await  Picker.pickImage(
        source: ImageSource.gallery, imageQuality: 50
    );

    setState(() {
      _image = File(image.path);
    });
  }

接下来是底部 sheet 的函数，用于从图库或相机中选取图像：

void _showPicker(context) {
showModalBottomSheet(
    context: context,
    builder: (BuildContext bc) {
      return SafeArea(
        child: Container(
          child: new Wrap(
            children: <Widget>[
              new ListTile(
                  leading: new Icon(Icons.photo_library),
                  title: new Text('Photo Library'),
                  onTap: () {
                    _imgFromGallery();
                    Navigator.of(context).pop();
                  }),
              new ListTile(
                leading: new Icon(Icons.photo_camera),
                title: new Text('Camera'),
                onTap: () {
                  _imgFromCamera();
                  Navigator.of(context).pop();
                },
              ),
            ],
          ),
        ),
      );
    }
);

}

这里是我想对所有三个图像使用一次的提取方法：

GestureDetector buildGestureDetector(BuildContext context) {
return GestureDetector(
                    onTap: () {
                      _showPicker(context);
                    },
                    child: CircleAvatar(
                      radius: 53,
                      backgroundColor: Colors.black,
                      child: _image != null
                          ? ClipRRect(
                        borderRadius: BorderRadius.circular(50),
                        child: Image.file(
                          _image,
                          width: 100,
                          height: 100,
                          fit: BoxFit.fitHeight,
                        ),
                      )
                          : Container(
                        decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(50)),
                        width: 100,
                        height: 100,
                        child: Icon(
                          Icons.camera_alt,
                          color: Colors.grey[800],
                        ),
                      ),
                    ),
                  );

} }

这里是在小部件内部调用提取的方法：

 Row(
                children: [
                  Expanded(
                    child: buildGestureDetector(context),
                  ),
                ],
              ),

请帮助我使用这种提取方法应用 3 张不同的图片，所有功能都使用一次，这样我就不需要一次又一次地为所有三张图片完成所有这些过程。

Answer 1

处理此问题的最简单方法当然是将“哪个头像”信息传递给 _imgFromCamera 或 _imgFromGallery 。例如，如果您的 3 张图片有自己的标识，例如 'A'、'B' 和 'C'、

onTap: () {
  _showPicker(context, 'A');
},

然后传递给_showPicker。

void _showPicker(context, id) {
...
  onTap: () {
     _imgFromGallery(id);   // Passed 'A' in this example
     Navigator.of(context).pop();
  }),
...

然后，

_imgFromGallery(id) async {
    final image = await  Picker.pickImage(
        source: ImageSource.gallery, imageQuality: 50
    );

    // Depends on the id, decide where and how to save the image.
    switch(id) {
      case 'A': setState(...); break;
      case 'B': saveIntoLocal(...); break;
      case 'C': uploadToServer(...); break;
      ....
    }
  }

想通过提取一个方法添加多张图片

Want to add multiple images by extracting one method

uiimagepickercontroller

extract-method

flutter

imagepicker

uiimagepicker