QT控件QSlider样式编辑实例

QSlider最常见的应用是播放器中进度条或调节音量。QSlider允许用户通过鼠标进行拖动、点击，默认的样式基本能满足需求，为了能有所差异，也可以通过样式编辑方式做简单的调整，以下为水平方向实例，供有需要的读者参考。

QSlider水平方向默认样式

修改后的样式，包括选中和未选中两个（QTCreator效果）

实际效果

   （未选中是白色）

   （选中是黄色）

样式编辑script（水平方向实例）

QSlider::groove:horizontal {
  border: 0px solid #bbb;
}

QSlider::sub-page:horizontal {
  background: rgb(255,255,0);
  border-radius: 0px;
  margin-top: 8px;
  margin-bottom: 9px;
}

QSlider::add-page:horizontal {
  background: rgb(0,0,0);
  border: 0px solid #777; 
  border-radius: 2px; 
  margin-top: 8px; 
  margin-bottom: 9px; 
}

QSlider::handle:horizontal { 
  background: rgb(255,255,255); 
  border: 1px solid rgba(102,102,102,102); 
  width: 8px; 
  height: 8px; 
  border-radius: 5px; 
  margin-top: 2px; 
  margin-bottom: 2px; 
}

QSlider::handle:horizontal:hover { 
  background: rgb(255,255,0); 
  border: 1px solid rgba(102,102,102,102); 
  border-radius: 5px; 
}

QSlider::sub-page:horizontal:disabled { 
  background: #bbb; 
  border-color: #999; 
}

QSlider::add-page:horizontal:disabled { 
  background: #eee; 
  border-color: #999; 
}

QSlider::handle:horizontal:disabled { 
  background: #eee; 
  border: 1px solid #aaa; 
  border-radius: 4px; 
}

另外，也可以通过调用函数接口 setStyleSheet() 直接设置，具体详情如下：

Slider.setStyleSheet(
  "QSlider::groove:horizontal {\
    border: 0px solid #bbb;\
  }\
  QSlider::sub-page:horizontal {\
    background: rgb(255,255,0);\
    border-radius: 0px;\
    margin-top: 8px;\
    margin-bottom: 9px;\
  }\
  QSlider::add-page:horizontal {\
    background: rgb(0,0,0);\
    border: 0px solid #777;\
    border-radius: 2px;\
    margin-top: 8px;\
    margin-bottom: 9px;\
  }\
  QSlider::handle:horizontal {\
    background: rgb(255,255,255);\
    border: 1px solid rgba(102,102,102,102);\
    width: 8px;\
    height: 8px;\
    border-radius: 5px;\
    margin-top: 2px;\
    margin-bottom: 2px;\
  }\
  QSlider::handle:horizontal:hover {\
    background: rgb(255,255,0);\
    border: 1px solid rgba(102,102,102,102);\
    border-radius: 5px;\
  }\
  QSlider::sub-page:horizontal:disabled {\
    background: #bbb;\
    border-color: #999;\
  }\
  QSlider::add-page:horizontal:disabled {\
    background: #eee;\
    border-color: #999;\
  }\
  QSlider::handle:horizontal:disabled {\
    background: #eee;\
    border: 1px solid #aaa;\
    border-radius: 4px;\
  }"
);