前段时间做一个东西,要用到滑动条,在更改样式时破费脑筋!因为总有一些问题:例如,当你滑动滑块到两端时,下面的滑槽总是遮不住,还有一个就是你要滑到两端时,你设置的弧度圆角突然变成方的,细细很不美观。
方的情形就不展示了。
主要调整的是border-radius这个属性,其次是margin属性。
下面附上样式源码:
slider_Time->setStyleSheet(
//滑条
"QSlider::groove:horizontal{"
" border: 1px solid #999999;"
" height: 5px; "
"position: absolute;"
"border-radius :3px;"
" background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);"
" margin: 1px 0;"
" left: 3px; right: 3px;"
"}"
//小滑块
"QSlider::handle:horizontal {"
" background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);"
"border: 1px solid #5c5c5c;
"width: 12px;"
" height: 12px; "
"margin: -2px -1; "/* handle is placed by default on the contents rect of the groove. Expand outside the groove */
" border-radius: 4px;"
"}"
//滑块滑过改变样式
" QSlider::add-page:horizontal {"
"border-radius :2px;"
" margin: 1px 1;"
"background: white;"
// "position: absolute;"
// " left: 2px; right: 2px;"
"}"
"QSlider::sub-page:horizontal {"
"border-radius :2px;"
" margin: 1px 1;"//
" background-color:#86dfc6;"
// "position: absolute;"
// " left: 2px; right: 2px;"
"}"
);