0

我想添加 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);
    });
  }

接下来是用于从图库或相机中选择图像的底页功能：

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 张不同的图片，并且所有功能都使用一次，这样我就不需要一次又一次地为所有三张图片经历所有这些过程。

4

1 回答 1

1

处理这个问题的最简单方法当然是将“which avatar”信息传递给_imgFromCameraor _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;
      ....
    }
  }
于 2022-02-10T01:51:53.857 回答