flutter - 如何在 Flutter 中将渐变作为事件颜色添加到 Slider

Question

我对 Flutter 中的 Slider 有疑问。我想将事件颜色设为渐变。我在 Gradient Widgets 中没有找到任何 slider

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