paint method
- 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,
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,
);
}