如何正确使用GetX Observable变量实现计时器环形进度条功能

问题原因&解决方案 #

你遇到的两个报错分别来自两个错误操作，按以下步骤修正即可：

1. 修正响应式变量的赋值逻辑

当你把time改为0.obs之后，这个变量的类型已经从普通int变为GetX的响应式包装类型RxInt，所有对它的读写都必须操作其.value属性：

• 确认Controller类内的time声明正确：

// 两种写法都可以，推荐显式声明类型避免推断异常
RxInt time = 0.obs;
// 或者 var time = 0.obs;

• 修正所有对time的赋值操作：
  • resetTimer方法内的赋值改为time.value = 0;
  • 你startTimer的计时回调里如果写的是time++，也要同步改为time.value += 1;
• 所有读取time值的位置，都通过time.value读取

修改完这部分之后，RxInt和int类型不匹配的报错就会消失，如果改完还是报错，直接完全重启项目重新编译即可，热重载可能会残留旧的类型缓存。

2. 修正进度条的赋值逻辑

CircularProgressIndicator的value参数要求传入0.0~1.0区间的double类型数值，你之前直接传入timeController.time.value % 60得到的是0~59的int值，既类型不匹配，数值范围也不符合要求，改为以下写法即可实现每秒走1/60进度、1分钟转一圈的效果：

Obx(
  () => CircularProgressIndicator(
    value: (timeController.time.value % 60) / 60,
  ),
),

如果需要实现每小时转一圈的分钟级进度，修改计算逻辑为(timeController.time.value / 60 % 60) / 60即可。

内容的提问来源于stack exchange，提问作者Al C