如何在颤动的滑块中填充拇指周围的颜色

Posted 2023-02-23

【中文标题】如何在颤动的滑块中填充拇指周围的颜色

【英文标题】：How to fill color around the thumb in slider in flutter

【发布时间】：2020-09-19 23:18:03

【问题描述】：

我是 Flutter 的新手。我正在使用 Slider 小部件。当我增加滑块的高度（trackHeight）时，轨道确实会在拇指周围断裂。如何去除滑块拇指周围的白色？

我为此实现了代码，

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

我的代码输出，

但我想像下面那样做，

【问题讨论】：

对我来说它工作得很好。你能告诉我你用的是什么版本的颤振吗？

我使用的是 Flutter 版本：1.17.1，Dart：2.8.2

嗨@KaushikBhingradiya，我已经添加了您问题的解决方案。请检查一下。

【参考方案1】：

您应该自定义RoundSliderTrackShape，如下所示

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

输出