Obx 不更新 RangeSlider GetX

Posted 2023-03-07

【中文标题】Obx 不更新 RangeSlider GetX

【英文标题】：Obx does not update RangeSlider GetX

【发布时间】：2021-10-11 09:28:42

【问题描述】：

声明超出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;
                )),

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

【参考方案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 中的值。

【讨论】：

非常感谢。我忘了用value 重新分配变量。