扩展阅读:
(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指的是滑块(绿色+白色部分)
基础数据如下:
- 槽的高度为12px
- 白色的外半径为11px
- 白色的内半径(绿色的半径)为8px,直径为16px
应该如下指定(计算出)Style Sheet的参数
- QSlider::groove:horizontal:height: 12px
- 槽高度为12px
- QSlider::handle:horizontal:height/width=16px (8px*2)
- 这样画出来的实际是一个绿色的正方形
- QSlider::handle:horizontal:border: 3px solid #ffffff
- Border(边)宽度为3,“实心”,白色
- QSlider::handle:border-radius: 11px (11 = 8 + 3)
- 8为内径,3为border的宽度
- Border四个角均为半径等于11px的1/4圆,加起来刚好是一个完整的圆
- QSlider::handle:horizontal:margin: -5px 6px -5px 6px;
- handle是groove的“孩子”,现在超出了groove的范围了,需要“移动”
- 上下方向,需要“向外”移动-5px(-5 = 6 - 11),负数意味着超过groove
- 左右方向,不清楚为什么是6px。第一个6px是右侧外边距,第二个是左侧的
- 槽的渐变色,参考代码
- 圆形区域白色到绿色的渐变色:参考代码