paint method

@override void paint(PaintingContext context, Offset center, { required RenderBox parentBox, required SliderThemeData sliderTheme, required Animation<double> enableAnimation, required Offset startThumbCenter, required Offset endThumbCenter, bool isEnabled = false, required TextDirection textDirection, })

Paints the slider track.

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 parentBox argument is the RenderBox of the RangeSlider. Its attributes, such as size, can be used to assist in painting this shape.

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

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 isEnabled argument is false when RangeSlider.onChanged is null and true otherwise. When true, the slider will respond to input.

The textDirection argument can be used to determine how the tick marks are painted depending on whether they are on an active track segment or not.

The track segment between the two thumbs is the active track segment. The track segments between the thumb and each end of the slider are the inactive track segments. In TextDirection.ltr, the start of the slider is on the left, and in TextDirection.rtl, the start of the slider is on the right.

Implementation

@override
void paint(
  PaintingContext context,
  Offset center, {
  required RenderBox parentBox,
  required SliderThemeData sliderTheme,
  required Animation<double> enableAnimation,
  required Offset startThumbCenter,
  required Offset endThumbCenter,
  bool isEnabled = false,
  required TextDirection textDirection,
}) {
  assert(sliderTheme.disabledActiveTickMarkColor != null);
  assert(sliderTheme.disabledInactiveTickMarkColor != null);
  assert(sliderTheme.activeTickMarkColor != null);
  assert(sliderTheme.inactiveTickMarkColor != null);

  // The tick marks are tiny circles that are the same height as the track.
  final tickMarkRadius = getPreferredSize(
        isEnabled: isEnabled,
        sliderTheme: sliderTheme,
      ).width /
      2;
  var dx = center.dx;
  if (tickMarkRadius > 0 &&
      (sliderTheme as TDSliderThemeData).showScaleValue) {
    assert(sliderTheme.divisions != null);
    var rect = sliderTheme.rangeTrackShape
        ?.getPreferredRect(parentBox: parentBox, sliderTheme: sliderTheme);
    if (rect != null && sliderTheme.divisions! > 0) {
      //轨道的高度
      var trackHeight = rect.bottom - rect.top;
      //最左边的刻度中心到最右边刻度中心的长度
      var markWidth = (rect.right - rect.left) - trackHeight;
      //最左边刻度的起点
      var markStart = rect.left + trackHeight / 2;
      //每个刻度的宽度
      var perWidth = markWidth / sliderTheme.divisions!;
      assert(perWidth > 0);
      //计算当前是第几个刻度
      var index = ((center.dx - markStart) / perWidth).round();
      //获取当前刻度的值
      var value = sliderTheme.min +
          index *
              ((sliderTheme.max - sliderTheme.min) / sliderTheme.divisions!);
      //格式化数值
      var valueFormatter = sliderTheme.scaleFormatter != null
          ? sliderTheme.scaleFormatter!(value)
          : value.toString();
      //修正x坐标
      dx = rect.left +
          index * (((rect.right - rect.left) / sliderTheme.divisions!));
      //绘制刻度的值
      var painter = TextPainter(
          text: TextSpan(
              text: valueFormatter,
              style: enableAnimation.value > 0
                  ? sliderTheme.scaleTextStyle
                  : sliderTheme.disabledScaleTextStyle),
          textDirection: TextDirection.ltr,
          textAlign: TextAlign.center)
        ..layout(maxWidth: 100);
      var x = dx - painter.size.width / 2;
      if (index == 0) {
        x = rect.left - trackHeight / 2;
      } else if (index == sliderTheme.divisions) {
        x = rect.right - painter.size.width + trackHeight / 2;
      }
      painter.paint(
          context.canvas, Offset(x, center.dy - painter.height - 16));
    }
    if (dx > rect!.left + 1 && dx < rect.right - 1) {
      final bool isBetweenThumbs;
      switch (textDirection) {
        case TextDirection.ltr:
          isBetweenThumbs = startThumbCenter.dx < center.dx &&
              center.dx < endThumbCenter.dx;
          break;
        case TextDirection.rtl:
          isBetweenThumbs = endThumbCenter.dx < center.dx &&
              center.dx < startThumbCenter.dx;
          break;
      }
      final begin = isBetweenThumbs
          ? sliderTheme.disabledActiveTickMarkColor
          : sliderTheme.disabledInactiveTickMarkColor;
      final end = isBetweenThumbs
          ? sliderTheme.activeTickMarkColor
          : sliderTheme.inactiveTickMarkColor;
      final paint = Paint()
        ..strokeWidth = 2
        ..color =
            ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
      context.canvas.drawLine(
          Offset(dx, sliderTheme.sliderMeasureData.trackerRect!.top + 3),
          Offset(dx, sliderTheme.sliderMeasureData.trackerRect!.bottom - 3),
          paint);
    }
  }
}