如何使用 GetX 使用更改的文件变量更新小部件

Question

我的应用中有以下小部件：

 @override
  Widget build(BuildContext context) {

        return Scaffold(

          bottomNavigationBar: BottomAppBar(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
               
                IconButton(
                  icon: Icon(
                    Icons.photo_library,
                    size: 30,
                  ),
                  onPressed: () => _pickImage(ImageSource.gallery),
                  color: Colors.pink,
                ),
              ],
            ),
          ),
          body: ListView(
            children: <Widget>[
              if (_imageFile != null) ...[
                Container(
                    padding: EdgeInsets.all(32),
                    child: Image.file(_imageFile)),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[
                   
                    FlatButton(
                      color: Colors.blue,
                      child: Icon(Icons.arrow_forward_ios),
                      onPressed: () =>
                          Get.toNamed(
                            AppRoutes.OCR_DETAILS,
                            arguments: {'image': _imageFile},
                          ),
                    ),
                  ],
                ),
              ]
            ],
          )
        );
      }

以及以下功能来选择图像：

Future _pickImage(ImageSource source) async {
    File selected = await ImagePicker.pickImage(source: source);
      _imageFile = selected;
      _imageLoaded=true;
  }

我想导入文件 (_imageFile) 并在导入后将其显示在当前小部件上。 我想使用 GetX 库。 非常感谢您的帮助。

Answer 1

编辑：切换到从画廊而不是相机中选择。另外仅供参考，该软件包的 pickImage 已弃用，因此我们改用 getImage。

设置一个 ImageController GetX 类。

class ImageController extends GetxController {
  File image;
  final picker = ImagePicker();

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

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

初始化控制器，可以在 main 或 build 方法中进行。在你运行你的应用程序之前，让我们在 main 中执行它。

Get.lazyPut<ImageController>(() => ImageController(), fenix: true);

然后在你的页面上你可以找到控制器。

final controller = Get.find<ImageController>();

在按钮的 onPressed 中，从 ImageController 类中触发 getImage 方法

controller.getImage();

然后，只要将它放在 UI 中的任何需要它的地方，就可以了。

      GetBuilder<ImageController>(
                  builder: (_) {
                    return controller.image != null
                        ? Image.file(controller.image)
                        : Container();
                  },
                ),