如何让Flutter中的滑块更平滑

Question

我的滑块从一个值跳到另一个值。如何使其在值之间移动或使其在 Flutter 中更加平滑？

    Column(
      children: <Widget>[
        RangeSlider(
          min: 1,
          max: 40,
          divisions: 4,
          onChanged: onChange,
          values: RangeValues((startValue ?? 1).toDouble(), (endValue ?? 40).toDouble()),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Text('Beginner', style: Theme.of(context).textTheme.body2),
            Text('Ameateur', style: Theme.of(context).textTheme.body2),
            Text('Intermediate', style: Theme.of(context).textTheme.body2),
            Text('Advanced', style: Theme.of(context).textTheme.body2),
            Text('Professional', style: Theme.of(context).textTheme.body2),
          ],
        ),
      ],
    );

Answer 1

该divisions属性使其分 4 步跳跃。删除它，滑块就会变得流畅。

RangeSlider(
  min: 1,
  max: 40,
  // divisions: 4, // <-- remove this
  onChanged: onChange,
  values: RangeValues((startValue ?? 1).toDouble(), (endValue ?? 40).toDouble()),
),

问题澄清后更新

问题实际上是关于让拇指流畅，同时仍然捕捉到范围滑块上的离散点。Flutter 小部件没有提供一种简单的方法来实现这一点，因此有两种选择。

选项 1：自定义小部件

第一个是创建一个新的小部件以获得您需要的确切行为。如果您需要大量定制，这可能是最好的选择。

选项 2：破解 RangeSlider 小部件

onChangeEnd除了回调之外还使用onChanged回调来正确更新拇指的位置。回调onChanged用于使其流畅，同时onChangeEnd回调用于根据除法计数将拇指捕捉到最接近的离散值。

一种可能的实现（离散化方法可能会更短/改进）：

class _RangeSliderExampleState extends State<RangeSliderExample> {
  double _startValue;
  double _endValue;
  static const double _minValue = 1;
  static const double _maxValue = 40;
  static const double _divisions = 4;

  @override
  Widget build(BuildContext context) {
    return RangeSlider(
      min: _minValue,
      max: _maxValue,
      onChanged: (values) {
        setState(() {
          _startValue = values.start;
          _endValue = values.end;
        });
      },
      onChangeEnd: (values) {
        setState(() {
          _startValue = _discretize(values.start, _divisions);
          _endValue = _discretize(values.end, _divisions);
        });
      },
      values: RangeValues((_startValue ?? 1).toDouble(),
          (_endValue ?? 40).toDouble()),
    );
  }

  double _discretize(double value, double divisions) {
    double x = value - _minValue;
    double range = _maxValue - _minValue;

    double result = x / range;
    return (result * divisions).round() / divisions * range + _minValue; 
  }
}