Flutter中如何获取FilterGridList内RangeSlider的选中值？

原代码存在的问题 #

1. 直接修改widget属性：在State类里直接给widget.valueSelectedStart和widget.valueSelectedEnd赋值是错误的——Flutter中Widget的属性是不可变的，这种写法会导致状态管理混乱。
2. onChanged回调设计不合理：两次调用widget.onChanged分别传递start和end值，父组件无法同时获取完整的范围区间，无法正确维护筛选状态。

修正方案 #

1. 重构FilterGridList组件的回调逻辑

修改组件的构造函数，定义一个能传递完整范围值的回调，组件内部独立维护RangeSlider的状态，不再依赖外部变量赋值。

class FilterGridList extends StatefulWidget {
  // 定义传递完整范围的回调
  final void Function(int start, int end) onRangeChanged;
  // 可选：支持传入初始范围值
  final int initialStart;
  final int initialEnd;

  const FilterGridList({
    super.key,
    required this.onRangeChanged,
    this.initialStart = 0,
    this.initialEnd = 20,
  });

  @override
  State<FilterGridList> createState() => _FilterGridListState();
}

class _FilterGridListState extends State<FilterGridList> {
  late RangeValues _rangeValues;

  @override
  void initState() {
    super.initState();
    // 用初始值初始化RangeSlider状态
    _rangeValues = RangeValues(
      widget.initialStart.toDouble(),
      widget.initialEnd.toDouble(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: SizedBox(
        child: Card(
          child: Column(
            children: [
              const Text('Age'),
              RangeSlider(
                values: _rangeValues,
                divisions: _rangeValues.end.toInt(),
                labels: RangeLabels(
                  _rangeValues.start.round().toString(),
                  _rangeValues.end.round().toString(),
                ),
                onChanged: (RangeValues value) {
                  setState(() {
                    _rangeValues = value;
                  });
                  // 将转换后的整数范围传递给父组件
                  final start = value.start.round();
                  final end = value.end.round();
                  widget.onRangeChanged(start, end);
                },
                min: 0.0,
                max: 20.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. 父组件中获取范围值并维护筛选状态

在父组件中定义筛选用的年龄范围变量，通过onRangeChanged回调更新变量，之后即可用这两个变量完成GridView的筛选。

// 父组件中定义筛选变量
int varSelectedFilterAgeStart = 0;
int varSelectedFilterAgeEnd = 20;

// 使用修正后的FilterGridList
content: FilterGridList(
  initialStart: varSelectedFilterAgeStart,
  initialEnd: varSelectedFilterAgeEnd,
  onRangeChanged: (start, end) {
    setState(() {
      varSelectedFilterAgeStart = start;
      varSelectedFilterAgeEnd = end;
    });
    // 这里可直接触发筛选逻辑，比如调用自定义的筛选方法
    // filterGridViewData(start, end);
  },
),

筛选逻辑示例 #

拿到范围变量后，可对数据源进行筛选（假设数据源为List<User>）：

List<User> filteredUsers = users.where((user) {
  return user.age >= varSelectedFilterAgeStart && user.age <= varSelectedFilterAgeEnd;
}).toList();

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