示例：QMessageBox定制（文本交互）

QMessageBox { 
    messagebox-text-interaction-flags: 5; /* 5为可选中, 缺省为不可选中 */
}

图片.png

QProgressBar

窗口部件

样式表使用方式

QProgressBar

图片.png

支持盒模式。

进度条的方块可以通过::chunk控制，方块会显示在内容矩形上，即盒模式中的content rectangle。

如果进度条要显示文字，那么使用text-align属性定位文本。

不确定状态由::indeterminate控制。

示例1：QProgressBar定制

图片.png

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}
QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}

QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
}
QProgressBar::chunk {
    background-color: #05B8CC;
    width: 20px;
}
QProgressBar {
    border: 2px solid grey;
    border-radius: 5px;
    text-align: center;
}
/* 对之前的例子，增加了方块部分 */
QProgressBar::chunk {
    background-color: #CD96CD;
    width: 10px;
    margin: 0.5px;
}

示例2：QProgressBar定制（2021年05月07日补充）

/* 安装进度条 */
QProgressBar {
  border-image: url(:/images/progressBarBackground.png);  
}
QProgressBar::chunk {
  border-image: url(:/images/progressBarFrontground.png);
}

QPushButton

窗口部件

样式表使用方式

QPushButton 图片.png

支持盒模式。

支持:default，:flat，:checked, :hoverd, :disabled状态。

如果QPushButton拥有菜单，则菜单指示器可以通过::menu-indicator控制。

如果QPushButton拥有菜单，则有:open，:close状态可控制。

警告：如果设置了背景颜色(background-color)，背景可能不会生效除非设置border属性为某些值。这是因为，默认QPushbutton会绘制一个凸出的边框会完全覆盖背景颜色。例如：

1. QPushButton{
2. background-color: red;
3. border: none;
4. }

示例1：QPushButton定制（外观渐进色，有子菜单，圆角）

图片.png

QPushButton {
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #f6f7fa,
                                  stop: 1 #dadbde);
    min-width: 80px;
}
QPushButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, 
                                  stop: 1 #f6f7fa);
}
QPushButton:flat {
    border: none; /* no border for a flat push button */
}
QPushButton:default {
    border-color: navy; /* make the default button prominent */
}
/* 从这往下，因为未做按钮菜单，效果未提现 */
QPushButton:open { /* when the button has its menu open */
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, 
                                  stop: 1 #f6f7fa);
}
QPushButton::menu-indicator {
    Image: url(menu_indicator.png);
    subcontrol-origin: padding;
    subcontrol-position: bottom right;
}
QPushButton::menu-indicator:pressed, QPushButton::menu-indicator:open {
    position: relative;
    top: 2px; left: 2px; /* shift the arrow by 2 px */
}

示例2：QPushButton双图，设置background-image，下面还有broder

background: url(:/images/mainWindow/lowSpeed.png) no-repeat center center;

示例3：QPushButton工控三状态（2021年5月1日补充）

 * {
  font: bold 48px "黑体";
}
QWidget#page_main {
  background-color: rgb(40, 140, 255);
}
QPushButton {
  background-color: rgb(0, 60, 100);
  border-width: 4px; 
  border-color: rgb(200, 200, 200);
  border-style: outset;  
  color: white;
}
QPushButton::hover {
  background-color: rgb(0, 60, 100);
  border-width: 6px; 
  border-color: rgb(160, 160, 160);
  border-style: inset;  
  color: white;
}
QPushButton::pressed {
  background-color: rgb(0, 60, 100);
  border-width: 10px; 
  border-color: rgb(100, 100, 100);
  border-style: inset;  
  color: white;
}

示例4：三色浅绿系列定制（2021年06月10日补充）

QPushButton {
  border: none;
  border-radius: 6px;
  font-size: 17px;
  color: white;
  background-color: rgba(87, 175, 171, 255);
}
QPushButton:disabled {
  background-color: rgba(154, 206, 205, 255);
}
QPushButton:pressed,
QPushButton:checked {
  color: white;
  background-color:  rgba(37, 130, 122, 255);
}

QRadioButton

窗口部件

样式表使用方式

QRadioButton

图片.png

支持盒模式。

选择指示器使用::indicator控制。默认的，指示器显示在content rectangle的左上角。

spacing属性可控制indicator与text之间的距离。

示例：QRadioButton定制

QRadioButton::indicator {
    width: 13px;
    height: 13px;
}
QRadioButton::indicator::unchecked {
    /* image: url(:/images/radiobutton_unchecked.png); */
    background-color: rgb(255,0,0,60);
}
QRadioButton::indicator:unchecked:hover {
    /* image: url(:/images/radiobutton_unchecked_hover.png); */
    background-color: rgb(255,0,0,120);
}
QRadioButton::indicator:unchecked:pressed {
    /* image: url(:/images/radiobutton_unchecked_pressed.png); */
    background-color: rgb(255,0,0,180);
}
QRadioButton::indicator::checked {
    /* image: url(:/images/radiobutton_checked.png); */
    background-color: rgb(0,255,0,60);
}
QRadioButton::indicator:checked:hover {
    /* image: url(:/images/radiobutton_checked_hover.png); */
    background-color: rgb(0,255,0,120);
}
QRadioButton::indicator:checked:pressed {
    /* image: url(:/images/radiobutton_checked_pressed.png); */
    background-color: rgb(0,255,0,180);
}

图片.png

QScrollBar

窗口部件

样式表使用方式

QScrollBar

图片.png

支持盒模式。

content rectangle是滑动区域。

QScrollBar（其宽度和高度依赖于滚动条的方向）的程度可分别被width和height属性设置。

确定QScrollBar方向，通过:horizontal和:vertical状态控制。

滑块可以使用::handle定制。

根据滑块的方向，可设置min-width或min-height属性。

拥有子控件-增加线，可通过::add-line控制。默认增加线是放在border rectangle的右上角。增加线拥有箭头控件，依赖方向可使用::right-arrow或::down-arrow控制，默认箭头会放在增加线控件的content rectangle中间。

拥有子控件-减少线，可通过::sub-line控制。默认减少线是放在border rectange的右下角。减少线拥有箭头控件，依赖方向可使用::left-arrow或::up-arrow控制，默认箭头会放在下划线控件的content rectangle中间。

拥有子控件-减少页，通过::sub-page控制减去页面区域。

拥有子空间-增加也，通过::add-page控制增加页面区域。

示例1：QScrollBar定制（垂直为主例，水平为辅例）

图片.png

QScrollBar:horizontal {
    border: 2px solid black;
    background: red; /* 自带白底色，导致白红白红背景 */
    height: 15px;
    /* 上 左 下 右 */
    margin: 2px 22px 2px 22px;
}
QScrollBar::handle:horizontal {
    background: rgb(0,0,255);
    min-width: 10px;
}
QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: rgb(0,255,0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: rgb(255,0,0);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

图片.png

QScrollBar:horizontal {
    border: 2px solid black;
    background: red;
    height: 15px;
    /* 上 左 下 右 */
    margin: 2px 22px 2px 22px;
}
QScrollBar::handle:horizontal {
    background: rgb(0,0,255);
    min-width: 10px;
}
QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: rgb(0,255,0);
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: rgb(255,0,0);
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}
/* 比紧邻上面的示例多的代码部分 */
QScrollBar:left-arrow:horizontal {
    border: 2px solid grey;
    width: 5px;
    height: 5px;
    background: while;
}
QScrollBar::add-page:horizontal{
    background: none;
}

图片.png

QScrollBar:horizontal {
    border: 2px solid green;
    background: cyan;
    height: 15px;
    margin: 0px 40px 0 0px;
}
QScrollBar::handle:horizontal {
    background: gray;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    background: blue;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border: 2px solid black;
}
QScrollBar::sub-line:horizontal {
    background: magenta;
    width: 16px;
    subcontrol-position: top right; /* 减少线(块)定位位置 */
    subcontrol-origin: margin;
    border: 2px solid black;
    position: absolute;
    right: 20px;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}
QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

示例2：QScrollBar定制（垂直为主例，水平为辅例）

图片.png

QScrollBar:vertical {
    border: 2px solid grey;
    background: #32CC99;
    width: 15px;
    margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
    background: white;
    min-height: 20px;
}
QScrollBar::add-line:vertical {
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 2px solid grey;
    background: #32CC99;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
}

示例3：水平滚动条定制（无法定制滑块最大宽度：小于标准宽度无法更小）

/* 水平滚动条 */
QScrollBar:horizontal {
    border: 0px solid black;
    background: rgba(239, 238, 237, 255); /* 自带白底色，导致白红白红背景 */
    height: 26px;
    /* 上 左 下 右 */
    margin: 0px 28px 0px 28px;
}
/* 两端按钮 */
QScrollBar::sub-line:horizontal {
    border: 0px solid grey;
    background: rgb(0, 233, 215);
    width: 28px;
    subcontrol-position: left;
    subcontrol-origin: margin;
  border-image: url(:/scanWidget/images/baseSurface/sub.png);
}
QScrollBar::add-line:horizontal {
    border: 0px solid grey;
    background: rgb(255,0,0);
    width: 28px;
    subcontrol-position: right;
    subcontrol-origin: margin;
  border-image: url(:/scanWidget/images/baseSurface/add.png);
}
/* 加减区域的背景色 */
QScrollBar::sub-page:horizontal  {
  width: 35px;
  height: 10px;
    background: rgb(183, 233, 215); 
}
QScrollBar::add-page:horizontal  {
  width: 35px;
  height: 10px;
    background: rgb(240,240,240);
}
/* 滑块: 无法设置小于标准宽度小的宽度 */
QScrollBar::handle:horizontal {
    background: rgba(53,143,134,255);
  min-width: 6px;
  border: 0px solid rgba(0,0,0,0);
  margin: 0 0 0 0;
}

示例4：灰色简单系列定制（2021年6月15日补充）

/* 纯色滚动条定制 */
QScrollBar:vertical {
    border: 0px solid rgb(88, 183, 179);
    background: rgba(255, 255, 255, 25);
  min-width: 8px;
    max-width: 8px;
    margin: 10 0 10 0;
  border-radius: 4px;
}
QScrollBar::handle:vertical {
    background: rgba(255, 255, 255, 40);
  border-radius: 4px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

示例5：水平滚动条定制（2021年06月21日补充）

/* 纯色滚动条定制 */
QScrollBar:horizontal  {
    border: 0px solid rgb(88, 183, 179);
    background: rgb(214, 214, 214);
  min-height: 12px;
    max-height: 12px;
    margin: 20 0 10 0;
  border-radius: 4px;
}
QScrollBar::handle:horizontal {
    background: rgb(45, 86, 150);
  border-radius: 4px;
}
QScrollBar::add-page,
QScrollBar::sub-page{
    background: transparent;
}
QScrollBar::add-line,
QScrollBar::sub-line{
    background: transparent;
}

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

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

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

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

示例：QMessageBox定制（文本交互）

QProgressBar

示例1：QProgressBar定制

示例2：QProgressBar定制（2021年05月07日补充）

QPushButton

示例1：QPushButton定制（外观渐进色，有子菜单，圆角）

示例2：QPushButton双图，设置background-image，下面还有broder

示例3：QPushButton工控三状态（2021年5月1日补充）

示例4：三色浅绿系列定制（2021年06月10日补充）

QRadioButton

示例：QRadioButton定制

QScrollBar

示例1：QScrollBar定制（垂直为主例，水平为辅例）

示例2：QScrollBar定制（垂直为主例，水平为辅例）

示例3：水平滚动条定制（无法定制滑块最大宽度：小于标准宽度无法更小）

示例4：灰色简单系列定制（2021年6月15日补充）

示例5：水平滚动条定制（2021年06月21日补充）

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

示例：QMessageBox定制（文本交互）

QProgressBar

示例1：QProgressBar定制

示例2：QProgressBar定制（2021年05月07日补充）

QPushButton

示例1：QPushButton定制（外观渐进色，有子菜单，圆角）

示例2：QPushButton双图，设置background-image，下面还有broder

示例3：QPushButton工控三状态（2021年5月1日补充）

示例4：三色浅绿系列定制（2021年06月10日补充）

QRadioButton

示例：QRadioButton定制

QScrollBar

示例1：QScrollBar定制（垂直为主例，水平为辅例）

示例2：QScrollBar定制（垂直为主例，水平为辅例）

示例3：水平滚动条定制（无法定制滑块最大宽度：小于标准宽度无法更小）

示例4：灰色简单系列定制（2021年6月15日补充）

示例5：水平滚动条定制（2021年06月21日补充）

热门文章

最新文章

相关电子书

相关实验场景