使用 getX 颤振图像选择器答案

【问题标题】：Flutter imagepicker with getX使用 getX 颤振图像选择器
【发布时间】：2021-06-08 02:08:48
【问题描述】：

这是我学习 getx 处理图像的又一次冒险。我从另一个来源获取了这段代码，但它并没有解决我的问题。我适合我自己的例子。如何使用选定的图像更新我的 BoxDecoration 小部件？

以下是我的小部件

            GestureDetector(
            onTap: () => {_onPictureSelection()},
            child:Container(
              height: screenHeight / 3.2,
              width: screenWidth / 1.8,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: imageController.image == null
                      ? AssetImage(pathAsset)
                      : FileImage(imageController.image),
                  fit: BoxFit.cover,
                ),
                border: Border.all(
                  width: 3.0,
                  color: Colors.grey,
                ),
                borderRadius: BorderRadius.all(
                    Radius.circular(5.0) //         <--- border radius here
                    ),
              ),
            )),

           _onPictureSelection() async {
              imageController.getImage();
            }

这是我的图像控制器

class ImageController extends GetxController {
static ImageController get to => Get.find<ImageController>();

File image;
String imagePath;
final _picker = ImagePicker();

Future<void> getImage() async {
final pickedFile = await _picker.getImage(source: ImageSource.camera);

if (pickedFile != null) {
  image = File(pickedFile.path);
  imagePath = pickedFile.path;
  print(imagePath);
  update();
 } else {
  print('No image selected.');
 }
}
}

如何使用通过相机拍摄的图像更新我的 BoxDecoration 小部件，以及在哪里用我的小部件包装 obx？

【问题讨论】：

标签： flutter imagepicker flutter-getx

【解决方案1】：

请在 ImageController 类的代码中替换以下条件。

if (pickedFile != null) {
    image = File(pickedFile.path);
    imagePath = pickedFile.path;
    print(imagePath);
    update();
} else {
   print('No image selected.');
}

【讨论】：

我确实更新了，但小部件没有更新为捕获的图像。
你也可以使用 : image: imageController.image == null ? AssetImage(pathAsset) : Image.file(File(imageController.imagePath)) 或 image: imageController.image == null ？ AssetImage(pathAsset) : Image.file(imageController.image),
是的，我这样做了，但是一旦捕获图像，我如何更新小部件。当我尝试使用 obx 时，它没有用。

【解决方案2】：

经过多次尝试和错误，我终于明白了。

我用 GetBuilder 更新了我的 GestureDetector 小部件

GestureDetector(
            onTap: () => {_onPictureSelection()},
            child: GetBuilder<ImageController>(
                // specify type as Controller
                init: ImageController(), // intialize with the Controller
                builder: (value) => Container(
                      height: screenHeight / 3.2,
                      width: screenWidth / 1.8,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: imageController.image == null
                              ? AssetImage(pathAsset)
                              : FileImage(imageController.image),
                          fit: BoxFit.cover,
                        ),
                        border: Border.all(
                          width: 3.0,
                          color: Colors.grey,
                        ),
                        borderRadius: BorderRadius.all(Radius.circular(
                                5.0) //         <--- border radius here
                            ),
                      ),
                    ))),

终于成功了。

【讨论】：