flutter滑块边缘不使用半径

Question

在下面的代码中，我想给滑块的边缘一个固定的半径，但是当拇指移动到边缘时，半径消失并变成有角度的。

Container(
            width: 370,
            height: 62,
            decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.all(
                  Radius.circular(10.0),
                )),
            child: SliderTheme(
              data: SliderThemeData(
                trackHeight: 60,
                trackShape:  RoundedRectSliderTrackShape(),
                thumbShape: SliderComponentShape.noOverlay,
                overlayShape: SliderComponentShape.noOverlay,
                valueIndicatorShape: SliderComponentShape.noOverlay,
                thumbColor: Colors.transparent,
                activeTickMarkColor: Colors.transparent,
                inactiveTickMarkColor: Colors.transparent,
                activeTrackColor: Colors.white,
              ),
              child: Slider(
                value: _sliderValue,
                min: 0.0,
                max: 100.0,
                onChanged: (value) {
                  setState(() {
                    _sliderValue = value;
                  });
                },
              ),
            ),
          ),

Answer 1

似乎无法使用提供的

SliderThemeData

选项来做到这一点。最小的解决方法是使用

ClipRRect

将滑块小部件的边框裁剪为圆形，并使用

Transform.scale

从滑块“删除”内部填充，以便正确裁剪左侧和右侧。

ClipRRect(
  borderRadius: BorderRadius.circular(radius),
  child: Transform.scale(
    scaleX: 1.2,
    child: Slider(
      // ...
    ),
  ),
)