Flutter中为Slider与RangeSlider自定义滑块Thumb形状求助

要自定义Slider和RangeSlider的滑块（Thumb）形状，你需要分别实现SliderComponentShape和RangeSliderComponentShape类，再在对应滑块组件中指定thumbShape参数即可。以下是具体实现示例：

一、自定义Slider的Thumb形状 #

先创建自定义形状类，重写getPreferredSize和paint方法定义滑块大小与绘制逻辑：

class CustomSliderThumbShape extends SliderComponentShape {
  final double thumbRadius;
  final Color thumbColor;
  final Color borderColor;
  final double borderWidth;

  CustomSliderThumbShape({
    this.thumbRadius = 10.0,
    this.thumbColor = Colors.blue,
    this.borderColor = Colors.white,
    this.borderWidth = 2.0,
  });

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

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
  }) {
    final canvas = context.canvas;

    // 绘制外层边框
    final borderPaint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.fill;
    canvas.drawCircle(center, thumbRadius, borderPaint);

    // 绘制内部填充
    final fillPaint = Paint()
      ..color = thumbColor
      ..style = PaintingStyle.fill;
    canvas.drawCircle(center, thumbRadius - borderWidth, fillPaint);
  }
}

在Slider组件中使用这个自定义形状：

double _sliderValue = 0.5;

// ...

Slider(
  value: _sliderValue,
  onChanged: (newValue) {
    setState(() {
      _sliderValue = newValue;
    });
  },
  thumbShape: CustomSliderThumbShape(
    thumbRadius: 12,
    thumbColor: Colors.deepOrange,
    borderColor: Colors.white,
    borderWidth: 2,
  ),
)

二、自定义RangeSlider的Thumb形状 #

RangeSlider需要实现RangeSliderComponentShape类，支持区分起始、结束两个滑块：

class CustomRangeSliderThumbShape extends RangeSliderComponentShape {
  final double thumbRadius;
  final Color thumbColor;
  final Color borderColor;
  final double borderWidth;

  CustomRangeSliderThumbShape({
    this.thumbRadius = 10.0,
    this.thumbColor = Colors.blue,
    this.borderColor = Colors.white,
    this.borderWidth = 2.0,
  });

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

  @override
  void paint(
    PaintingContext context,
    Offset center, {
    required Animation<double> activationAnimation,
    required Animation<double> enableAnimation,
    required bool isDiscrete,
    required TextPainter labelPainter,
    required RenderBox parentBox,
    required SliderThemeData sliderTheme,
    required TextDirection textDirection,
    required double value,
    required double textScaleFactor,
    required Size sizeWithOverflow,
    required RangeSliderThumb? thumb,
  }) {
    final canvas = context.canvas;

    // 绘制外层边框
    final borderPaint = Paint()
      ..color = borderColor
      ..style = PaintingStyle.fill;
    canvas.drawCircle(center, thumbRadius, borderPaint);

    // 绘制内部填充
    final fillPaint = Paint()
      ..color = thumbColor
      ..style = PaintingStyle.fill;
    canvas.drawCircle(center, thumbRadius - borderWidth, fillPaint);

    // 给起始滑块添加标识区分
    if (thumb == RangeSliderThumb.start) {
      final rectPaint = Paint()..color = Colors.black;
      canvas.drawRect(
        Rect.fromCenter(center: center, width: 6, height: 6),
        rectPaint,
      );
    }
  }
}

在RangeSlider组件中使用：

RangeValues _rangeValues = const RangeValues(0.2, 0.8);

// ...

RangeSlider(
  values: _rangeValues,
  onChanged: (newValues) {
    setState(() {
      _rangeValues = newValues;
    });
  },
  thumbShape: CustomRangeSliderThumbShape(
    thumbRadius: 12,
    thumbColor: Colors.deepOrange,
    borderColor: Colors.white,
    borderWidth: 2,
  ),
)

三、自定义复杂形状 #

如果需要方形、三角形等特殊形状，可在paint方法中使用canvas.drawPath()或其他绘制方法。比如绘制方形滑块：

// 在paint方法中替换圆形绘制逻辑
canvas.drawRect(
  Rect.fromCenter(center: center, width: thumbRadius * 2, height: thumbRadius * 2),
  borderPaint,
);
canvas.drawRect(
  Rect.fromCenter(center: center, width: (thumbRadius - borderWidth) * 2, height: (thumbRadius - borderWidth) * 2),
  fillPaint,
);

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