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

本文章博客地址：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

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

热门文章

最新文章

相关电子书

相关实验场景