当我反应值时，Flutter getx 状态未正确匹配

Question

我正在尝试通过 getX 将随机网络图像设置为 flutter 应用程序。问题是当我激活 'nextPhoto' 时，它会在我的列表中打印下一个链接。但是，图像小部件没有更改为下一张照片。

输出示例：第一张照片 = cat1.jpg，下一张照片 = cat1.jpg 预期示例：第一张照片 = cat1.jpg，下一张照片 = cat2.jpg

有人帮助我将不胜感激。

import ...

class ProfileController extends GetxController {
  List<String> imageList = [
    'https://1.jpg'
    'https://2.jpg',
    'https://3.jpg',
    'https://4.jpg',
    'https://5.jpg',
  ];

  late List<String> randomImage = imageList.toList()..shuffle();
  int imageNumber = 0;
  late RxString imagePath = randomImage[imageNumber].obs;
  RxBool isEditMyProfile = false.obs;

  @override
  void onInit() {...}
  void toggleEditProfile() {...}
  void savePhoto() async {...}

  void nextPhoto() {
    print('Next Photo');
    imageNumber != imageList.length ? imageNumber++ : imageNumber == 0;
    imagePath = randomImage[imageNumber].obs;
    imageCache.clear();    
    update();
  } 
}

Widget _profileImage() {
    return GestureDetector(
      onTap: () {
        controller.toggleEditProfile();
        print('change my Image!');
      },
      child: Container(
        padding: EdgeInsets.all(10),
        width: Get.mediaQuery.size.width,
        height: Get.mediaQuery.size.height,
        child: FittedBox(
          child: Obx(
            () => Image.network(
              controller.imagePath.value,
              fit: BoxFit.fill,
            ),
          ),
        ),
      ),
    );
  }

Answer 1

尝试

Widget _profileImage() {
        return GestureDetector(
          onTap: () {
            controller.nextPhoto();
            print('change my Image!');
          },
          child: Container(
            padding: EdgeInsets.all(10),
            width: Get.mediaQuery.size.width,
            height: Get.mediaQuery.size.height,
            child: FittedBox(
              child: Obx(
                () => Image.network(
                  controller.imagePath.value,
                  fit: BoxFit.fill,
                ),
              ),
            ),
          ),
        );
      }

或分享 toggleEditProfile 函数中的内容。

Answer 2

保存新值而不是创建新的 obs 实例。

ps：看起来你的 随机图像 Number 实际上不是随机的...... nvm

// late RxString imagePath = randomImage[imageNumber].obs;
=> late imagePath = Rx<String>(randomImage[imageNumber]);

// imagePath = randomImage[imageNumber].obs; 
=> imagePath.value = randomImage[imageNumber];

当我反应值时，Flutter getx 状态未正确匹配

Flutter getx state is not properly matched when I reactive value

flutter

flutter-getx