如何在 flutter 中的 slider 中的拇指周围填充颜色

Question

我是 flutter 的新手。 我正在使用 Slider 小部件。 当我增加 slider ( trackHeight ) 的高度时，轨道确实在拇指周围断裂。 slider拇指周围的白色怎么去掉？

我为此实现代码，

             SliderTheme(
                data: SliderTheme.of(context).copyWith(
                  activeTrackColor: Color(0xff9F00C5),
                  inactiveTrackColor: Colors.black12,
                  trackShape: RoundedRectSliderTrackShape(),
                  trackHeight: 22.0,
                  thumbColor: Color(0xff9F00C5),
                  thumbShape: RoundSliderThumbShape(
                      enabledThumbRadius: 16.0, disabledThumbRadius: 16.0),
                ),
                child: Slider(
                  min: 0,
                  max: 12,
                  value: _sliderValue,
                  label: '$_sliderValue\nMonths',
                  onChanged: (value) {
                    setState(() {
                      _sliderValue = value;
                    });
                  },
                ),
              )

我的代码的 Output，

但我想像下面那样做，

Answer 1

您应该制作自定义RoundSliderTrackShape如下

圆形滑块轨道形状.dart

class RoundSliderTrackShape extends SliderTrackShape {

  const RoundSliderTrackShape({this.disabledThumbGapWidth = 2.0, this.radius = 0});

  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 = RRect.fromLTRBR(trackRect.left, trackRect.top,
        thumbCenter.dx - horizontalAdjustment, trackRect.bottom, Radius.circular(radius));
    context.canvas.drawRRect(leftTrackSegment, leftTrackPaint);
    final RRect rightTrackSegment = RRect.fromLTRBR(thumbCenter.dx + horizontalAdjustment, trackRect.top,
        trackRect.right, trackRect.bottom, Radius.circular(radius));
    context.canvas.drawRRect(rightTrackSegment, rightTrackPaint);
  }
}

现在在您的SliderTheme中使用此滑块轨道

 trackShape: RoundSliderTrackShape(radius: 20),

完整代码

@override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: SliderTheme(
          data: SliderTheme.of(context).copyWith(
            activeTrackColor: Color(0xff9F00C5),
            inactiveTrackColor: Colors.black12,
            trackShape: RoundSliderTrackShape(radius: 20),
            trackHeight: 12.0,
            tickMarkShape: RoundSliderTickMarkShape(),

            thumbColor: Color(0xff9F00C5),
            thumbShape: RoundSliderThumbShape(enabledThumbRadius: 17.0),
          ),
          child: Slider(
            min: 0,
            max: 12,
            value: _sliderValue,
            label: '$_sliderValue\nMonths',
            onChanged: (value) {
              setState(() {
                _sliderValue = value;
              });
            },
          ),
        ));
  }

Output