Qt之QSlider圆形滑柄样式

简述

QSlider的滑柄样式设计遵循box model，但是在设计的过程中，我发现，边界的宽度变化会对滑柄高度造成挤压，这种挤压使得滑柄样式设计需要一些特殊处理。下面以圆形滑柄样式设计来介绍这种挤压的处理方法。

挤压

通常border的变化不会对contents造成影响，以QPushButton为例，如下所示：

但是在QSlider的handle中却会出现如下情况

contents的水平尺寸没变，但是垂直尺寸却被边界挤压了。

设计圆形滑柄

要设计圆形滑柄，先要准备一个border和contents都是正方形的滑柄。由于垂直方向的contents被border占据了一部分，所以contents的垂直尺寸要比水平尺寸大两倍的边界宽度。contents的垂直尺寸为滑槽高度和上下边距之和，设计步骤如下：

• 确定contents水平尺寸
• 确定边界宽度
• 调整槽宽度或者上下边距，确保：垂直尺寸=水平尺寸+两倍的边界宽度

当然，可以随意调整，只要满足如下公式：

槽宽度+上下边距=水平尺寸+两倍边界宽度

最终效果如下：