颤动更新变量Getx

Question

我将创建一个使用 GetX 获取图像的函数 并创建一个文件变量（imageFile）用于保存图像 但在应用程序视图中传递时无法更新图像文件，

class LineScreenController extends GetxController {
  File imageFile;
  getImages(file) async {
    final ImagePicker _picker = ImagePicker();
    final pickedFile = await _picker.pickImage(source: ImageSource.gallery);
    File file  = File(pickedFile.path);
    print(imageFile);
    update();
  }
}

在视图中将 lineScreenController.imageFile 传递给函数。

   Container(
            child: GetBuilder<LineScreenController>(
                init: LineScreenController(),
                builder: (value) {
                  return Row(
                    children: [
                      
                      Flexible(
                        flex: 4,
                        child: Center(
                          child: InkWell(
                            onTap: () {
                              lineScreenController
                                  .getImages(lineScreenController.imageFile);
                            },
                            child: lineScreenController.imageFile != null
                                ? InkWell(
                                    onTap: () async {
                                      await lineScreenController.getImages(
                                          lineScreenController.imageFile);
                                    },
                                    child: CircleAvatar(
                                      backgroundImage: FileImage(File(
                                         lineScreenController.imageFile.path)),
                                    ),
                                  )
                                : CircleAvatar(
                                    child: CircleAvatar(
                                      child: Text('celect Image'),
                                   Image.file(File(_imageFile!.path))
                                    ),
                                  ),
                          ),
                        ),
                      ),  
                }),
          ),

Answer 1

使用带有 flutter 和 getx 的相机进行多图像选择和显示

控制器

class ImageController extends GetxController {
  final ImagePicker imagePicker = ImagePicker();
  final pickedImage = Rx<File?>(null);
  final imagefiles = RxList<File>([]);
  Future<void> pickMultiImage() async {
    try {
      var pickedfile = await imagePicker.pickImage(source: ImageSource.camera);

      //you can use ImageCourse.camera for Camera capture
      if (pickedfile != null) {
        pickedImage.value = File(pickedfile.path);
        imagefiles.add(pickedImage.value!);
      }
    } catch (e) {
      print('error while picking file.');
    }
  }
}

页

class TestPage extends StatelessWidget {
  final imageController = Get.put(ImageController());
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: KAppbar(),
      body: Obx(
        () => SingleChildScrollView(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              imageController.imagefiles.isEmpty
                  ? GridView.builder(
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        crossAxisSpacing: 15,
                      ),
                      itemCount: 2,
                      primary: false,
                      shrinkWrap: true,
                      itemBuilder: (BuildContext context, int index) {
                        return Container(
                          // height: 130,
                          width: double.infinity,
                          color: Colors.amber,
                          child: Center(
                            child: IconButton(
                              onPressed: () => imageController.pickMultiImage(),
                              icon: Icon(
                                Icons.add,
                                color: Colors.grey,
                                size: 15,
                              ),
                            ),
                          ),

                          //background color of inner container
                        );
                      },
                    )
                  : GridView.builder(
                      gridDelegate:
                          const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                      ),
                      itemCount: imageController.imagefiles.length,
                      primary: false,
                      shrinkWrap: true,
                      itemBuilder: (BuildContext context, int index) {
                        final item = imageController.imagefiles[index];
                        return Stack(
                          children: [
                            Container(
                              width: double.infinity,
                              margin: EdgeInsets.all(5),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(5),
                              ),
                              child: ClipRRect(
                                borderRadius: BorderRadius.circular(5),
                                child: Image.file(
                                  File(item.path),
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                            Positioned(
                              top: 0,
                              right: 0,
                              left: 0,
                              bottom: 0,
                              child: InkWell(
                                onTap: () {
                                  //if you want to remove image
                                  imageController.imagefiles.removeAt(index);
                                },
                                child: Container(
                                  margin: EdgeInsets.all(60),
                                  decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(50),
                                    color: Colors.white.withOpacity(0.5),
                                  ),
                                  child: Icon(
                                    Icons.delete,
                                    color: Colors.redAccent,
                                    size: 30,
                                  ),
                                ),
                              ),
                            )
                          ],
                        );
                      },
                    ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

您没有为 imageFile 设置值

转换以下行

File file  = File(pickedFile.path);

到

imageFile  = File(pickedFile.path);