Flutter RangeSlider：如何在左右滑块thumb内显示不同数值？

你的问题出在当前代码里不管是左侧还是右侧滑块，都固定显示valueSlider.start的值。要区分两侧滑块，只要利用paint方法里传入的thumb参数即可，它会告诉你当前绘制的是左侧（Thumb.start）还是右侧（Thumb.end）滑块。

修改后的代码如下：

class CustomRangeSliderThumbShape extends RangeSliderThumbShape {
  final RangeValues valueSlider;

  CustomRangeSliderThumbShape({required this.valueSlider});

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return const Size.fromRadius(20.0);
  }

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required SliderThemeData sliderTheme,
    bool? isDiscrete,
    bool? isEnabled,
    bool? isOnTop,
    TextDirection? textDirection,
    Thumb? thumb,
    bool? isPressed,
  }) {
    final Canvas canvas = context.canvas;

    // 绘制外层圆圈
    final outerRadius = 30.0;
    final outerPaint = Paint()..color = primaryColor;
    canvas.drawCircle(center, outerRadius, outerPaint);

    // 绘制内层圆圈
    final innerRadius = 28.0;
    final innerPaint = Paint()..color = Colors.white;
    canvas.drawCircle(center, innerRadius, innerPaint);

    // 绘制文本：根据thumb类型判断显示start还是end值
    final textStyle = TextStyle(
        color: Colors.black, fontWeight: FontWeight.bold, fontSize: 20);
    // 关键修改：根据thumb参数选择要显示的数值
    final displayValue = thumb == Thumb.start 
        ? valueSlider.start.toInt() 
        : valueSlider.end.toInt();
    final textSpan = TextSpan(
      text: displayValue.toString(),
      style: textStyle,
    );

    final textPainter = TextPainter(
      text: textSpan,
      textDirection: TextDirection.ltr,
    );

    textPainter.layout();

    textPainter.paint(
      canvas,
      Offset(
        center.dx - textPainter.width / 2,
        center.dy - textPainter.height / 2,
      ),
    );
  }
}

关键修改说明 #

• 在绘制文本前，通过thumb == Thumb.start判断当前绘制的是左侧滑块，此时显示valueSlider.start；否则显示valueSlider.end。
• Thumb是Flutter提供的枚举类型，专门用来区分RangeSlider的左右两个滑块，直接用它就能准确判断当前绘制的是哪一侧。

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