Obx 不更新 RangeSlider GetX

Question

声明超出Widget build 范围：

Rx<RangeValues> values = RangeValues(MIN_USD_AMOUNT, MAX_USD_AMOUNT).obs;
Rx<RangeLabels> labels = RangeLabels(MIN_USD_AMOUNT.toString(), MAX_USD_AMOUNT.toString()).obs;

这是在 Scaffold 中的容器中：

Obx(() => RangeSlider(
                divisions: 5,
                activeColor: Colors.red[700],
                inactiveColor: Colors.red[300],
                max: MAX_USD_AMOUNT,
                min: MIN_USD_AMOUNT,
                values: values.value,
                labels: labels.value,
                onChanged: (value) {
                  print("START: ${value.start}, End: ${value.end}");
                  this.values = values;
                  this.labels = RangeLabels(
                          "${value.start.toInt().toString()} USD",
                          "${value.end.toInt().toString()} USD")
                      .obs;
                })),

我的问题：当我更改滑块的值时，我可以看到它在控制台中工作，但视图没有更新。滑块根本没有更新。

Answer 1

在常规RangeLabels 中更新几个 RxStrings 可能更容易。

  RxString startLabel = MIN_USD_AMOUNT.toString().obs;
  RxString endLabel = MAX_USD_AMOUNT.toString().obs;

在滑块的onChanged 中只更新字符串。

  controller.startLabel.value = value.start.toString();
  controller.endLabel.value = value.end.toString();

假设您定义了 controller 的 GetX 类，整个 Obx 看起来像这样。

 Obx(
   () => RangeSlider(
     divisions: 5,
     activeColor: Colors.red[700],
     inactiveColor: Colors.red[300],
     min: MIN_USD_AMOUNT,
     max: MAX_USD_AMOUNT,
     values: controller.values.value,
     labels: RangeLabels(
     controller.startLabel.value, controller.endLabel.value),
     onChanged: (value) {
        controller.startLabel.value = value.start.toString();
        controller.endLabel.value = value.end.toString();
        controller.values.value = value;
                },
              ),
            ),

这将更新 UI 中的值。