Flutter封装Slider通用构建方法后调用setState无法触发重建如何解决

你当前传入_slider方法的duration是值类型的double参数，属于值传递，方法内部的duration形参只是State类中pomodoro/shortBreak/longBreak三个属性的临时副本。你在onChanged回调中修改的只是这个局部临时变量，并未真正修改State类的属性，所以setState触发页面重建后，重新传入_slider方法的还是原来的属性值，滑块自然不会刷新。

有两种常用实现方式都可以保留封装复用的能力：

方案1：传入自定义onChanged回调（更通用，推荐） #

把滑块值更新的逻辑抽到方法外部，调用时绑定对应属性即可，修改后的_slider方法代码如下：

Widget _slider({
  required String name,
  required int divisions,
  required double minValue,
  required double maxValue,
  required double duration,
  required ValueChanged<double> onChanged, // 新增回调参数
}) {
  return Slider(
    min: minValue,
    max: maxValue,
    divisions: divisions,
    value: duration,
    onChanged: onChanged, // 直接使用外部传入的回调
  );
}

调用时分别绑定三个对应属性即可：

// 专注时长滑块
_slider(
  name: "专注时长",
  divisions: 45,
  minValue: 1,
  maxValue: 45,
  duration: pomodoro,
  onChanged: (newVal) => setState(() => pomodoro = newVal),
),
// 短休息时长滑块
_slider(
  name: "短休息时长",
  divisions: 20,
  minValue: 1,
  maxValue: 20,
  duration: shortBreak,
  onChanged: (newVal) => setState(() => shortBreak = newVal),
),
// 长休息时长滑块
_slider(
  name: "长休息时长",
  divisions: 60,
  minValue: 5,
  maxValue: 60,
  duration: longBreak,
  onChanged: (newVal) => setState(() => longBreak = newVal),
)

方案2：通过类型枚举区分更新目标（调用更简洁） #

如果你的业务场景固定只有这三类滑块，可以定义枚举区分类型，把更新逻辑封装在方法内部：

// 先定义时长类型枚举
enum DurationType { pomodoro, shortBreak, longBreak }

Widget _slider({
  required String name,
  required int divisions,
  required double minValue,
  required double maxValue,
  required DurationType type, // 传入类型替代直接传duration
}) {
  // 根据类型获取当前对应属性值
  double duration;
  switch(type) {
    case DurationType.pomodoro:
      duration = pomodoro;
      break;
    case DurationType.shortBreak:
      duration = shortBreak;
      break;
    case DurationType.longBreak:
      duration = longBreak;
      break;
  }
  return Slider(
    min: minValue,
    max: maxValue,
    divisions: divisions,
    value: duration,
    onChanged: (newDuration) {
      setState(() {
        // 根据类型更新对应属性
        switch(type) {
          case DurationType.pomodoro:
            pomodoro = newDuration;
            break;
          case DurationType.shortBreak:
            shortBreak = newDuration;
            break;
          case DurationType.longBreak:
            longBreak = newDuration;
            break;
        }
      });
    },
  );
}

调用时只需传入对应类型即可：

_slider(
  name: "专注时长",
  divisions: 45,
  minValue: 1,
  maxValue: 45,
  type: DurationType.pomodoro,
),
_slider(
  name: "短休息时长",
  divisions: 20,
  minValue: 1,
  maxValue: 20,
  type: DurationType.shortBreak,
),
_slider(
  name: "长休息时长",
  divisions: 60,
  minValue: 5,
  maxValue: 60,
  type: DurationType.longBreak,
)

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