slider image 我该怎么做,像图片上的滑块一样,我尝试使用滑块主题来完成它,但是它并不能完全按照我想要的方式工作,我从此处重写代码:How can I round the corners of a slider in Flutter,但是它可能并不完美你知道如何更好地解决它 我的代码:
return SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.white,
inactiveTrackColor: Colors.grey,
trackHeight: 40,
thumbColor: Colors.transparent,
disabledThumbColor: Colors.transparent,
overlayColor: Colors.transparent,
activeTickMarkColor: Colors.transparent,
showValueIndicator: ShowValueIndicator.never,
thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0),
tickMarkShape: RoundSliderTickMarkShape(tickMarkRadius: 10),
trackShape: RoundSliderTrackShape(
roundRight,
roundLeft,
radius: 10,
),
),
child: Slider(
max: max,
min: min,
value: widget.value,
onChanged: (changedValue) {
widget.onChange.call(changedValue);
setState(() {
widget.value = changedValue;
if (changedValue == min) {
roundLeft = true;
} else {
roundLeft = false;
}
if (changedValue == max) {
roundRight = true;
} else {
roundRight = false;
}
});
},
),
);
`
class RoundSliderTrackShape extends SliderTrackShape {
const RoundSliderTrackShape(this.roundRight, this.roundLeft, {this.disabledThumbGapWidth = 0, this.radius = 0});
final bool roundLeft;
final bool roundRight;
final double disabledThumbGapWidth;
final double radius;
@override
Rect getPreferredRect({
RenderBox parentBox,
Offset offset = Offset.zero,
SliderThemeData sliderTheme,
bool isEnabled,
bool isDiscrete,
}) {
final double overlayWidth = sliderTheme.overlayShape.getPreferredSize(isEnabled, isDiscrete).width;
final double trackHeight = sliderTheme.trackHeight;
assert(overlayWidth >= 0);
assert(trackHeight >= 0);
assert(parentBox.size.width >= overlayWidth);
assert(parentBox.size.height >= trackHeight);
final double trackLeft = offset.dx + overlayWidth / 2;
final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
final double trackWidth = parentBox.size.width - overlayWidth;
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
}
@override
void paint(
PaintingContext context,
Offset offset, {
RenderBox parentBox,
SliderThemeData sliderTheme,
Animation<double> enableAnimation,
TextDirection textDirection,
Offset thumbCenter,
bool isDiscrete,
bool isEnabled,
}) {
if (sliderTheme.trackHeight == 0) {
return;
}
final ColorTween activeTrackColorTween =
ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
final ColorTween inactiveTrackColorTween =
ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);
final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation);
final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation);
Paint leftTrackPaint;
Paint rightTrackPaint;
switch (textDirection) {
case TextDirection.ltr:
leftTrackPaint = activePaint;
rightTrackPaint = inactivePaint;
break;
case TextDirection.rtl:
leftTrackPaint = inactivePaint;
rightTrackPaint = activePaint;
break;
}
double horizontalAdjustment = 0.0;
if (!isEnabled) {
final double disabledThumbRadius = sliderTheme.thumbShape.getPreferredSize(false, isDiscrete).width / 2.0;
final double gap = disabledThumbGapWidth * (1.0 - enableAnimation.value);
horizontalAdjustment = disabledThumbRadius + gap;
}
final Rect trackRect = getPreferredRect(
parentBox: parentBox,
offset: offset,
sliderTheme: sliderTheme,
isEnabled: isEnabled,
isDiscrete: isDiscrete,
);
//Modify this side
// final RRect leftTrackSegment =
final RRect leftTrackSegment = roundRight
? RRect.fromLTRBR(trackRect.left, trackRect.top, thumbCenter.dx - horizontalAdjustment, trackRect.bottom,
Radius.circular(radius))
: RRect.fromLTRBAndCorners(
trackRect.left, trackRect.top, thumbCenter.dx - horizontalAdjustment, trackRect.bottom,
topLeft: Radius.circular(radius), bottomLeft: Radius.circular(radius));
context.canvas.drawRRect(leftTrackSegment, leftTrackPaint);
// final RRect rightTrackSegment = ;
final RRect rightTrackSegment = roundLeft ? RRect.fromLTRBR(thumbCenter.dx + horizontalAdjustment, trackRect.top,
trackRect.right, trackRect.bottom, Radius.circular(radius)): RRect.fromLTRBAndCorners(
thumbCenter.dx - horizontalAdjustment, trackRect.top, trackRect.right, trackRect.bottom,
topRight: Radius.circular(radius), bottomRight: Radius.circular(radius));
context.canvas.drawRRect(rightTrackSegment, rightTrackPaint);
}
}