Qt中用StyleSheet做圆形QSlider的方法解释（应该也适用于CSS等）

扩展阅读：

（1）以下链接有很丰富的实例，参考价值高：

https://blog.csdn.net/wzs250969969/article/details/78458151

（2）详细解释参考（SVG）：

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element/radialGradient

 

                                                                      一个具体的例子

这个具体的例子结果

放大，直到可以看清楚每个像素

对应的QSS代码参考如下网址：https://blog.csdn.net/qyee16/article/details/19681477

QSlider

{

    background-color: #ff00ff;

border-style: outset;

border-radius: 10px;

}

以下是槽：水平的、高度为12px；外边界为2px；背景是线性渐变色，y从0到1

QSlider::groove:horizontal

{

height: 12px;

background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);

margin: 2px 0

}

以下是handle：水平，背景为辐射式渐变色，圆心在(cx=0,cy=0)即左上角，半径为1，交点为(fx=0.5, fy=0.5)，半径0处为白色，1处为绿色——可定义多个“节点”，间后面的例子

QSlider::handle:horizontal

{

background: QRadialGradient(cx:0, cy:0, radius: 1, fx:0.5, fy:0.5, stop:0 white, stop:1 green);

width: 16px;

height: 16px;

margin: -5px 6px -5px 6px;

border-radius:11px;

border: 3px solid #ffffff;

}

                                                                           详细解释

Slider::groove指的是槽（水平的灰色部分）

Slider::handle指的是滑块（绿色+白色部分）

基础数据如下：

1. 槽的高度为12px
2. 白色的外半径为11px
3. 白色的内半径（绿色的半径）为8px，直径为16px

 

应该如下指定（计算出）Style Sheet的参数

1. QSlider::groove:horizontal:height: 12px
   • 槽高度为12px
2. QSlider::handle:horizontal:height/width=16px (8px*2)
   • 这样画出来的实际是一个绿色的正方形
3. QSlider::handle:horizontal:border: 3px solid #ffffff
   • Border（边）宽度为3，“实心”，白色
4. QSlider::handle:border-radius: 11px (11 = 8 + 3)
   • 8为内径，3为border的宽度
   • Border四个角均为半径等于11px的1/4圆，加起来刚好是一个完整的圆
5. QSlider::handle:horizontal:margin: -5px 6px -5px 6px;
   • handle是groove的“孩子”，现在超出了groove的范围了，需要“移动”
   • 上下方向，需要“向外”移动-5px（-5 = 6 - 11），负数意味着超过groove
   • 左右方向，不清楚为什么是6px。第一个6px是右侧外边距，第二个是左侧的
6. 槽的渐变色，参考代码
7. 圆形区域白色到绿色的渐变色：参考代码