如何将渐变作为活动颜色添加到颤振中的滑块

Question

我在 Flutter 中使用滑块有问题。我想将活动颜色设置为渐变。 而且我在渐变小部件中没有找到任何滑块

Answer 1

我已经创建了一个类，您可以使用该类。

自定义类

class GradientRectSliderTrackShape extends SliderTrackShape with BaseSliderTrackShape {
/// Creates a slider track that draws 2 rectangles.
const GradientRectSliderTrackShape({ this.gradient = const LinearGradient(colors: [Colors.lightBlue, Colors.blue]) });
final LinearGradient gradient;

@override
void paint(
PaintingContext context,
Offset offset, {
required RenderBox parentBox,
required SliderThemeData sliderTheme,
required Animation<double> enableAnimation,
required TextDirection textDirection,
required Offset thumbCenter,
bool isDiscrete = false,
bool isEnabled = false,
}) {
assert(sliderTheme.disabledActiveTrackColor != null);
assert(sliderTheme.disabledInactiveTrackColor != null);
assert(sliderTheme.activeTrackColor != null);
assert(sliderTheme.inactiveTrackColor != null);
assert(sliderTheme.thumbShape != null);

// If the slider [SliderThemeData.trackHeight] is less than or equal to 0,
// then it makes no difference whether the track is painted or not,
// therefore the painting can be a no-op.
if (sliderTheme.trackHeight! <= 0) {
return;
}

final Rect trackRect = getPreferredRect(
parentBox: parentBox,
offset: offset,
sliderTheme: sliderTheme,
isEnabled: isEnabled,
isDiscrete: isDiscrete,
);

// Assign the track segment paints, which are left: active, right: inactive,
// but reversed for right to left text.
final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);

final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);


final Paint activePaint = Paint()
..shader = gradient.createShader(trackRect)
..color = activeTrackColorTween.evaluate(enableAnimation)!;

final Paint inactivePaint = Paint()
..color = inactiveTrackColorTween.evaluate(enableAnimation)!;

final Paint leftTrackPaint;
final Paint rightTrackPaint;

switch (textDirection) {
case TextDirection.ltr:
leftTrackPaint = activePaint;
rightTrackPaint = inactivePaint;
break;
case TextDirection.rtl:
leftTrackPaint = inactivePaint;
rightTrackPaint = activePaint;
break;
}



final Rect leftTrackSegment = Rect.fromLTRB(trackRect.left, trackRect.top, thumbCenter.dx, trackRect.bottom);
if (!leftTrackSegment.isEmpty)
context.canvas.drawRect(leftTrackSegment, leftTrackPaint);
final Rect rightTrackSegment = Rect.fromLTRB(thumbCenter.dx, trackRect.top, trackRect.right, trackRect.bottom);
if (!rightTrackSegment.isEmpty)
context.canvas.drawRect(rightTrackSegment, rightTrackPaint);
}

实现

class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderTheme.of(context).copyWith(
activeTrackColor: Colors.green,
inactiveTrackColor: Colors.grey.shade400,
trackShape: GradientRectSliderTrackShape(
gradient: LinearGradient(
colors: [
Colors.blue,
Colors.pink,
],
),
),
trackHeight: 3.0,
thumbColor: Colors.pink,
overlayShape: RoundSliderOverlayShape(overlayRadius: 0.0),
overlayColor: Colors.white,
),
child: Slider(
min: 3,
max: 8,
value: 5,
onChanged: (val) {},
),
);
}