若该文为原创文章，转载请注明原文出处

本文章博客地址：http://blog.csdn.net/qq21497936/article/details/79424536

长期持续带来更多项目与技术分享，咨询请加QQ:21497936、微信：yangsir198808

红胖子(红模仿)的博文大全：开发技术集合（包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬结合等等）持续更新中...（点击传送门）

Qt开发专栏：qss样式表笔记大全（点击传送门）

上一篇：《qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）》

前话

Qt的qss样式全解与Demo

可设置样式的窗口部件列表

QSizeGrip（在StatuesBar右边，鼠标放上可拉伸窗口大小）

窗口部件

样式表使用方式

QSizeGrip

图片.png

支持width、height和image属性。

示例：QSizeGrip定制

QSizeGrip {
    image: url(E:/1.jpg);
    width: 16px;
    height: 16px;
}

图片.png

QSlider

窗口部件

样式表使用方式

QSlider

图片.png

支持盒模式。

若是水平滑条，min-width和hieght属性必须被提供。

若是垂直滑条，min-height和width属性必须被提供。

示例1：QSlider定制（水平滑动和垂直滑动）

图片.png

QSlider::groove:horizontal {
border: 1px solid rgb(255,0,0);
/* the groove expands to the size of the slider by default.*/
/* by giving it a height, it has a fixed size */
    height: 8px;
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
                         stop:0 #B1B1B1,
                         stop:1 #c4c4c4);
    margin: 2px 0;
}
QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, 
                             stop:0 #b4b4b4, 
                             stop:1 #8f8f8f);
    border: 1px solid rgb(0,255,0);
    width: 18px;
    /* handle is placed by default on the contents rect of the groove.*/
    /* Expand outside the groove */
    margin: -2px 0; 
    border-radius: 3px;
}

图片.png

QSlider::groove:vertical {
    background: red;
/* absolutely position 4px from the left and right of the widget. */
    /* setting margins on the widget should work too... */
    position: absolute; 
    left: 4px; right: 4px;
}
QSlider::handle:vertical {
    height: 10px;
    background: green;
    margin: 0 -4px; /* expand outside the groove */
}
QSlider::sub-page:vertical {
    background: pink;
QSlider::add-page:vertical {
    background: white;
}

示例2：横向handle大圆球定制（2021年5月29日补充）

/* 滑动条 */
/* 滑动条：背景 */
QSlider::groove:horizontal {
  border: 0px solid rgb(255,0,0);
    height: 6px;
  background-color: rgba(255, 255, 255, 0%);
  top:  0px;
  bottom: 0px;
}
/* 滑动条：低于当前值的背景 */
QSlider::sub-page:horizontal {
    background-color: #6CF8FC;
}
/* 滑动条：低于当前值的背景 */
QSlider::add-page:horizontal {
    background-color: rgba(255, 255, 255, 35%);
}
/* 滑动条：滑块 */
QSlider::handle:horizontal {
    border: 0px solid rgb(0,255,0);
  margin: -27 0 -27 0;      /* 滑块向值条周边扩展 */
  width: 60px;
  border-radius: 30px;
    background-color: #FFFFFF;
}

示例3：纵向handle冷暖定制（2021年5月29日补充）

/* 滑动条 */
/* 滑动条：背景 */
QSlider::groove:vertical {
  border: 0px solid rgb(255,0,0);
  width: 3px;
  background-color: qlineargradient(spread:pad, x1:1, y1:1,
                                                  x2:1, y2:0, 
                                      stop:0 #3397FF,
                                      stop:1 #FF4E00);
  top:  0px;
  bottom: 0px;
}
/* 滑动条：低于当前值的背景 */
QSlider::sub-page:vertical {
    background-color: rgba(255, 255, 255, 0%);
}
/* 滑动条：低于当前值的背景 */
QSlider::add-page:vertical {
    background-color: rgba(255, 255, 255, 0%);
}
/* 滑动条：滑块 */
QSlider::handle:vertical {
  border: 5px solid #6CF8FC;
  margin: 0 -27 0 -27;      /* 滑块向值条周边扩展 */
  height: 44px;
  border-radius: 27px;          /* 圆角超过margin的27+27将会无效 */
    background-color: #4F4F4F;
}

示例4：纯色定制

/* 滑动条 */
/* 滑动条：背景 */
QSlider::groove:horizontal {
  border: 0px solid rgb(255,0,0);
    height: 6px;
  background-color: rgba(255, 255, 255, 0%);
  top:  0px;
  bottom: 0px;
}
/* 滑动条：低于当前值的背景 */
QSlider::sub-page:horizontal {
    background-color: rgba(123, 189, 179, 255);
}
/* 滑动条：低于当前值的背景 */
QSlider::add-page:horizontal {
    background-color: rgba(189, 224, 218, 255);
}
/* 滑动条：滑块 */
QSlider::handle:horizontal {
    border: 0px solid rgb(0,255,0);
  margin: -5 0 -5 0;      /* 滑块向值条周边扩展 */
  width: 5px;
  border-radius: 0px;
    background-color: rgba(66, 159, 151, 255);
}

示例5：带+ - 按钮的QSlider（补充2021年06月10日）

/* 滑动条 */
/* 滑动条：背景 */
QSlider::groove:horizontal {
  border: 0px solid rgb(255,0,0);
    height: 18px;
  background-color: rgba(255, 255, 255, 0%);
  top:  0px;
  bottom: 0px;
}
/* 滑动条：低于当前值的背景 */
QSlider::sub-page:horizontal {
    background-color: rgba(154, 206, 205, 255);
}
/* 滑动条：高于当前值的背景 */
QSlider::add-page:horizontal {
    background-color: rgba(240, 240, 240, 255);
}
/* 滑动条：滑块 */
QSlider::handle:horizontal {
    border: 0px solid rgb(0,255,0);
  margin: -5 0 -5 0;      /* 滑块向值条周边扩展 */
  width: 3px;
  border-radius: 0px;
    background-color: rgba(66, 159, 151, 255);
}
/* sub 按钮 */
QPushButton#pushButton_sub {
  border: none;
  border-radius: 0px;
  border-image: url(:/toolMenuWidget/images/toothFillHole/sub.png);
}
QPushButton#pushButton_sub:disabled {
  border-image: url(:/toolMenuWidget/images/toothFillHole/sub_disabled.png);
}
QPushButton#pushButton_sub:pressed {
  border-image: url(:/toolMenuWidget/images/toothFillHole/sub_pressed.png);
}
/* add 按钮 */
QPushButton#pushButton_add {
  border: none;
  border-radius: 0px;
  border-image: url(:/toolMenuWidget/images/toothFillHole/add.png);
}
QPushButton#pushButton_add:disabled {
  border-image: url(:/toolMenuWidget/images/toothFillHole/add_disabled.png);
}
QPushButton#pushButton_add:pressed {
  border-image: url(:/toolMenuWidget/images/toothFillHole/add_pressed.png);
}

示例6：是否显示滑块定制（2021年06月14日补充）

/* 滑动条 */
/* 滑动条：背景 */
QSlider::groove:vertical {
  border: 0px solid rgb(255,0,0);
  width: 3px;
  background-color: rgba(102, 102, 102, 70);
  top:  0px;
  bottom: 0px;
}
/* 滑动条：低于当前值的背景 */
QSlider::sub-page:vertical {
    background-color: rgba(255, 255, 255, 0%);
}
/* 滑动条：低于当前值的背景 */
QSlider::add-page:vertical {
    background-color: rgba(255, 255, 255, 0%);
}
/******* 以下二选一,是否显示滑块 *******/
/* 选择一：滑动区域底色背景 */
QSlider::handle:vertical {
  border: 0px solid #666666;
  margin: 0 -7 0 -7;      /* 滑块向值条周边扩展 */
  height: 48px;
  border-radius: 0px;         /* 圆角超过margin的将会无效 */
    background-color: #666666;
}
/* 选择二：不显示滑块的 */
QSlider#verticalSlider_connect::handle:vertical {
  border: 0px solid #666666;
  margin: 0 -7 0 -7;      /* 滑块向值条周边扩展 */
  height: 0px;
  border-radius: 0px;         /* 圆角超过margin的将会无效 */
    background-color: #666666;
}

示例7：定制透明滑块（2021年6月15日补充）

示例8：定制压力数值调（2021年6月25日补充）

/* 滑动条 */
/* 滑动条：背景 */
QSlider::groove:vertical {
  border: 0px solid rgb(255,0,0);
  border-radius: 8px;
  width:34px;
  background-color: #353535;
  top: 0;
  bottom: 0;
}
/* 滑动条：低于当前值的背景 */
QSlider::sub-page:vertical {
    background-color: rgba(255, 255, 255, 0%);
}
/* 滑动条：低于当前值的背景 */
QSlider::add-page:vertical {
    background-color: rgba(255, 255, 255, 0%);
}
/* 滑动区域底色背景 */
QSlider::handle:vertical {
  border: 0px solid #666666;
  height: 28px;
  border-radius: 0px;         /* 圆角超过margin的将会无效 */
    background-color: #1D95FE;
}

QSpinBox

窗口部件

样式表使用方式

QSpinBox 图片.png

外框frame支持盒模式控制。

向上按钮和向上箭头可以分别使用::up-button和::up-arrow定制，默认情况下，向上按钮在padding rectangel右上角，如果向上按钮没有明确大小，它缺省占据参考矩形的一半高度。向上箭头在向上按钮content rectangle的正中间。

向下按钮和向下箭头可以分别使用::down-button和::down-arrow定制，默认情况下，向下按钮在padding rectangel右下角，如果向下按钮没有明确大小，它缺省占据参考矩形的一半高度。向下箭头在向下按钮content rectangle的正中间。

示例：QSpinBox定制

QSpinBox {
    padding-right: 15px; /* make room for the arrows */
    background: yellow;
}
QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right; /* position at the top right corner */
    width: 16px; /* 16 + 2*1px border-width = 15px padding + 3px parent border */
    background: rgb(100, 0, 0);
}
QSpinBox::up-button:hover {
    background: rgb(170, 0, 0);
}
QSpinBox::up-button:pressed {
    background: rgb(255, 0, 0);
}
QSpinBox::up-arrow {
    background: rgb(255,255,255);
    width: 10px;
    height: 10px;
}
QSpinBox::up-arrow:disabled, QSpinBox::up-arrow:off { /* off state when value is max */
    background: rgb(0,0,0);
    width: 10px;
    height: 10px;
}
QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right; /* position at bottom right corner */
    width: 16px;
    background: rgb(0, 100, 0);
}
QSpinBox::down-button:hover {
    background: rgb(0, 170, 0);
}
QSpinBox::down-button:pressed {
    background: rgb(0, 255, 0);
}
QSpinBox::down-arrow {
    background: rgb(255,255,255);
    width: 10px;
    height: 10px;
}
/* off state when value in min */
QSpinBox::down-arrow:disabled,QSpinBox::down-arrow:off { 
    background: rgb(0,0,0);
    width: 10px;
    height: 10px;
}

图片.png

QSplitter（非QMainwindow::separator）

窗口部件

样式表使用方式

QSplitter

图片.png

支持盒模式。

拥有子控件-移动句柄，使用::handle定制。

扩展：在设计器中如何使用QSplitter

步骤一：拖选控件：

图片.png

步骤二：选中需要使用QSpitter的多个控件

图片.png

步骤三：点击分隔符，即可

图片.png

示例：QSplitter定制

QSplitter::handle {
    background: rgb(255,0,0);
}
QSplitter::handle:horizontal {
    width: 2px;
}
QSplitter::handle:vertical {
    height: 2px;
}
QSplitter::handle:pressed {
    background: rgb(0,255,0);
}

图片.png

QStatusBar

窗口部件

样式表使用方式

QStatusBar

图片.png

仅支持background属性。

每个item的frame也被定制，使用::item子控件控制。

示例：QStatusBar定制

QStatusBar {
    background: brown;
}
QStatusBar::item {
    border: 1px solid red;
    border-radius: 3px;
}

QStatusBar {
    background: brown;
}
QStatusBar::item {
    border: 1px solid red;
    border-radius: 3px;
}
QStatusBar QLabel {
    border: 3px solid white;
}

图片.png

QTabBar

窗口部件

样式表使用方式

QTabBar

图片.png

tabs可以分别通过::tab定制。

tabs支持:only-one，:first，:last，:middile，:previous-selected，:selected。

关闭按钮使用::close-button定制。

通过使用负边距或使用绝对位置方案创建所选状态的重叠tabs。

指示器使用::tear控制。

QTabBar使用2个QToolButtons滚动，可以通过QTabBar QtoolButton选择器进行定制。

定制滚动按钮的宽度使可使用::scroller控制。

tabs的排序可通过alignment属性控制。

警告：改变QTabWidget里面的QTabBar的位置，需要使用::tab-bar控制。

qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）一

Qt开发专栏：qss样式表笔记大全（点击传送门）

前话

可设置样式的窗口部件列表

QSizeGrip（在StatuesBar右边，鼠标放上可拉伸窗口大小）

示例：QSizeGrip定制

QSlider

示例1：QSlider定制（水平滑动和垂直滑动）

示例2：横向handle大圆球定制（2021年5月29日补充）

示例3：纵向handle冷暖定制（2021年5月29日补充）

示例4：纯色定制

示例5：带+ - 按钮的QSlider（补充2021年06月10日）

示例6：是否显示滑块定制（2021年06月14日补充）

示例7：定制透明滑块（2021年6月15日补充）

示例8：定制压力数值调（2021年6月25日补充）

QSpinBox

示例：QSpinBox定制

QSplitter（非QMainwindow::separator）

扩展：在设计器中如何使用QSplitter

示例：QSplitter定制

QStatusBar

示例：QStatusBar定制

QTabBar

热门文章

最新文章

相关电子书

相关实验场景