paint method

  1. @override
void paint(
  1. PaintingContext context,
  2. Offset center, {
  3. required Animation<double> activationAnimation,
  4. required Animation<double> enableAnimation,
  5. bool isDiscrete = false,
  6. bool isEnabled = false,
  7. bool? isOnTop,
  8. required SliderThemeData sliderTheme,
  9. TextDirection? textDirection,
  10. Thumb? thumb,
  11. bool? isPressed,
})
override

Paints the thumb shape based on the state passed to it.

The context argument represents the RangeSlider's render box.

The center argument is the offset for where this shape's center should be painted. This offset is relative to the origin of the context canvas.

The activationAnimation argument is an animation triggered when the user begins to interact with the RangeSlider. It reverses when the user stops interacting with the slider.

The enableAnimation argument is an animation triggered when the RangeSlider is enabled, and it reverses when the slider is disabled. The RangeSlider is enabled when RangeSlider.onChanged is not null. Use this to paint intermediate frames for this shape when the slider changes enabled state.

The isDiscrete argument is true if RangeSlider.divisions is non-null. When true, the slider will render tick marks on top of the track.

The isEnabled argument is false when RangeSlider.onChanged is null and true otherwise. When true, the slider will respond to input.

If the isOnTop argument is true, this thumb is painted on top of the other slider thumb because this thumb is the one that was most recently selected.

The sliderTheme argument is the theme assigned to the RangeSlider that this shape belongs to.

The textDirection argument can be used to determine how the orientation of either slider thumb should be changed, such as drawing different shapes for the left and right thumb.

The thumb argument is the specifier for which of the two thumbs this method should paint (start or end).

The isPressed argument can be used to give the selected thumb additional selected or pressed state visual feedback, such as a larger shadow.

Implementation

@override
void paint(
  PaintingContext context,
  Offset center, {
  required Animation<double> activationAnimation,
  required Animation<double> enableAnimation,
  bool isDiscrete = false,
  bool isEnabled = false,
  bool? isOnTop,
  required SliderThemeData sliderTheme,
  TextDirection? textDirection,
  Thumb? thumb,
  bool? isPressed,
}) {
  assert(sliderTheme.showValueIndicator != null);
  assert(sliderTheme.overlappingShapeStrokeColor != null);
  final canvas = context.canvas;
  final radiusTween = Tween<double>(
    begin: _disabledThumbRadius,
    end: enabledThumbRadius,
  );
  final colorTween = ColorTween(
    begin: sliderTheme.disabledThumbColor,
    end: sliderTheme.thumbColor,
  );
  final radius = radiusTween.evaluate(enableAnimation);
  final elevationTween = Tween<double>(
    begin: elevation,
    end: pressedElevation,
  );

  // Add a stroke of 1dp around the circle if this thumb would overlap
  // the other thumb.
  if (isOnTop ?? false) {
    final strokePaint = Paint()
      ..color = sliderTheme.overlappingShapeStrokeColor!
      ..strokeWidth = 1.0
      ..style = PaintingStyle.stroke;
    canvas.drawCircle(center, radius, strokePaint);
  }

  final color = colorTween.evaluate(enableAnimation)!;

  final evaluatedElevation =
      isPressed! ? elevationTween.evaluate(activationAnimation) : elevation;
  final shadowPath = Path()
    ..addArc(
        Rect.fromCenter(
            center: center, width: 2 * radius, height: 2 * radius),
        0,
        math.pi * 2);

  var paintShadows = true;
  if (paintShadows) {
    canvas.drawShadow(shadowPath, const Color.fromRGBO(0, 0, 0, 0.5),
        evaluatedElevation, true);
  }
  if ((sliderTheme as TDSliderThemeData).showThumbValue &&
      sliderTheme.sliderMeasureData.trackerRect != null) {
    var trackerRect = sliderTheme.sliderMeasureData.trackerRect!;
    var ratio = (center.dx - trackerRect.left) /
        (trackerRect.right - trackerRect.left);
    //计算滑块的值
    var value = (sliderTheme.max - sliderTheme.min) * ratio + sliderTheme.min;
    //格式化显示
    var formatterValue = sliderTheme.scaleFormatter == null
        ? value.toStringAsFixed(2)
        : sliderTheme.scaleFormatter!(value);
    //绘制数值
    var painter = TextPainter(
        text: TextSpan(
            text: '$formatterValue',
            style: enableAnimation.value > 0
                ? sliderTheme.thumbTextStyle
                : sliderTheme.disabledThumbTextStyle),
        textDirection: TextDirection.ltr,
        textAlign: TextAlign.center)
      ..layout(maxWidth: 100);
    painter.paint(
        context.canvas,
        Offset(center.dx - painter.size.width / 2,
            center.dy - painter.height - 14));
  }
  //绘制游标
  canvas.drawCircle(
    center,
    radius,
    Paint()..color = color,
  );
}