简述
QSlider的滑柄样式设计遵循box model,但是在设计的过程中,我发现,边界的宽度变化会对滑柄高度造成挤压,这种挤压使得滑柄样式设计需要一些特殊处理。下面以圆形滑柄样式设计来介绍这种挤压的处理方法。
挤压
通常border的变化不会对contents造成影响,以QPushButton为例,如下所示:
![](https://i-blog.csdnimg.cn/blog_migrate/fcabf6d3d4b7446ed4f345eae5abdfb2.gif)
但是在QSlider的handle中却会出现如下情况
![](https://i-blog.csdnimg.cn/blog_migrate/b784b7e695e682166c7319a0a2931e6e.gif)
contents的水平尺寸没变,但是垂直尺寸却被边界挤压了。
设计圆形滑柄
要设计圆形滑柄,先要准备一个border和contents都是正方形的滑柄。由于垂直方向的contents被border占据了一部分,所以contents的垂直尺寸要比水平尺寸大两倍的边界宽度。contents的垂直尺寸为滑槽高度和上下边距之和,设计步骤如下:
- 确定contents水平尺寸
- 确定边界宽度
- 调整槽宽度或者上下边距,确保:垂直尺寸=水平尺寸+两倍的边界宽度
当然,可以随意调整,只要满足如下公式:
槽宽度+上下边距=水平尺寸+两倍边界宽度
最终效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ca6225cd27799855b72aa63b6a33a319.gif)