示例：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;
}