Flutter：如何将倒计时秒数转为0-1区间值适配进度指示器（无setState）

直接通过剩余时间与总时间的比值将倒计时数值转换为0-1区间的进度值，Countdown组件的build回调会自动实时更新UI，无需调用setState。

修改后的完整可运行代码：

Widget progressIndicator() {
  // 定义总倒计时秒数，方便统一维护
  const totalSeconds = 10;

  return Countdown(
    seconds: totalSeconds,
    build: (BuildContext context, double remainingMilliseconds) => SizedBox(
      width: double.infinity,
      height: 40.h,
      child: LiquidLinearProgressIndicator(
        // 核心转换：剩余毫秒数 / 总毫秒数 = 0-1区间的进度值
        // 倒计时开始时remainingMilliseconds=10000，比值为1（进度满）；结束时为0，比值为0
        value: remainingMilliseconds / (totalSeconds * 1000),
        valueColor: const AlwaysStoppedAnimation(Colors.red),
        backgroundColor: Colors.transparent,
        borderColor: Colors.black12,
        borderWidth: 1,
        borderRadius: 20.r,
        direction: Axis.horizontal,
        // 格式化显示剩余秒数，保留1位小数更直观
        center: Text((remainingMilliseconds / 1000).toStringAsFixed(1)),
      ),
    ),
    interval: const Duration(milliseconds: 100),
    onFinished: () {
      print('Timer is done!');
    },
  );
}

关键说明 #

1. 数值转换逻辑：
   Countdown的build回调参数remainingMilliseconds是实时剩余的毫秒数，总时间为totalSeconds * 1000（转成毫秒），两者的比值刚好落在0-1区间，完美匹配LiquidLinearProgressIndicator的value要求。
2. 无需setState的原因：
   Countdown组件内部已经实现了定时刷新逻辑，每次时间间隔到了会自动触发build回调重建子组件，完全不需要手动调用setState更新UI。

内容的提问来源于stack exchange，提问作者Ali Nabel