Flutter GridView弹窗内Slider无法更新位置问题求解

滑块拖动不更新是几个写法问题叠加导致的：

• 错误地将Slider控件实例直接存在ServiceSet数据类中，且在initState阶段只初始化一次列表。控件创建时就把初始值固定死了，后续就算关联的变量变化，已经存在列表里的Slider实例不会自动同步新的value、label属性，滑块位置自然不会变化。
• 弹窗内用StatefulBuilder包裹了滑块，但滑块的onChanged回调里只调用了外层页面的setState，这个方法只会刷新外层Scaffold的内容，不会触发弹窗内部StatefulBuilder维护的组件重绘，滑块位置无法实时更新。
• 6个配置项仅定义了2个存储滑块值的变量，除了第二个项用了独立变量，剩下5个项全部共用同一个_currentSliderValue，就算滑块能拖动，修改一个项的值会导致其他所有项的滑块值同步变化，完全无法实现独立配置。
• ServiceSet类中currentSet属性被定义为final，初始赋值后无法修改，就算滑块选了新值，外层GridView卡片上显示的设置值也不会同步更新。

1. 重构ServiceSet数据类 #

数据类只存配置参数和状态值，不要存储控件实例，把每个项的滑块值、当前显示值都存在类内部，保证每个项状态独立：

import 'package:flutter/material.dart';

class ServiceSet {
  final String name;
  // 去掉final修饰，允许更新显示值
  String currentSet;
  final Color color;
  // 每个项独立存储滑块的取值范围、当前值，不再共用全局变量
  final double min;
  final double max;
  double currentValue;

  ServiceSet({
    required this.name,
    required this.currentSet,
    required this.color,
    required this.min,
    required this.max,
    required this.currentValue,
  });
}

2. 修改初始化列表逻辑 #

初始化_parameters时只传配置和初始状态，不要提前创建Slider控件：

// 删掉类里原来定义的_currentSliderValue、_currentValueCzOdP两个全局共用变量，避免状态冲突
void _parametersItem() {
  var list = <ServiceSet>[
    ServiceSet(
      name: 'Hysteresis',
      currentSet: '2',
      color: Colors.amber,
      min: 0,
      max: 50,
      currentValue: 2,
    ),
    ServiceSet(
      name: 'Pump disc. time',
      currentSet: '23',
      color: Colors.deepOrange,
      min: 0,
      max: 80,
      currentValue: 23,
    ),
    ServiceSet(
      name: 'Boiler / circuit reduction',
      currentSet: '20',
      color: Colors.brown,
      min: 0,
      max: 70,
      currentValue: 20,
    ),
    ServiceSet(
      name: 'Sound alarm',
      currentSet: 'off',
      color: Colors.green,
      min: 0,
      max: 50,
      currentValue: 0,
    ),
    ServiceSet(
      name: 'User alarm',
      currentSet: '50',
      color: Colors.purple,
      min: 0,
      max: 50,
      currentValue: 50,
    ),
    ServiceSet(
      name: 'Pump activ. time',
      currentSet: '35',
      color: Colors.blueGrey,
      min: 0,
      max: 50,
      currentValue: 35,
    ),
  ];
  setState(() {
    _parameters = list;
  });
}

3. 修改弹窗内的滑块逻辑 #

弹窗内动态生成Slider，给StatefulBuilder的setState改个名字避免和外层setState混淆，拖动滑块时同时调用两个setState，同步刷新弹窗滑块位置和外层页面的显示值。把原来showDialog里actions部分的代码替换成下面的内容：

actions: <Widget>[
  // 给弹窗内部的setState重命名，避免和外层的setState冲突
  StatefulBuilder(builder: (context, setDialogState) {
    return Slider(
      value: item.currentValue,
      min: item.min,
      max: item.max,
      divisions: (item.max - item.min).toInt(),
      label: item.currentValue.round().toString(),
      onChanged: (double value) {
        // 先更新当前项的存储值
        item.currentValue = value;
        item.currentSet = value.round().toString();
        // 刷新弹窗内部的滑块状态
        setDialogState(() {});
        // 刷新外层页面，同步更新卡片上显示的设置值
        setState(() {});
      },
    );
  }),
  FlatButton(
    child: const Text("Set",
        style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 24.0)
    ),
    onPressed: () {
      Navigator.of(context).pop();
    },
  ),
],

原代码里导入包写的是package:flutter/cupertino(1).dart、package:flutter/material(1).dart，这是文件下载重命名导致的错误，要改成正常的package:flutter/cupertino.dart、package:flutter/material.dart，否则会报编译错误。

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