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

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

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

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

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

上一篇：《qss样式表笔记大全(一)：qss名词解析（包含相关示例）》
下一篇：《qss样式表笔记大全(三)：可设置样式的窗口部件列表（中）（持续更新示例）》

前话

Qt的qss样式详解与Demo。

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

QAbstractScrollArea（滚动区域：随视口滚动背景、固定背景）

窗口部件

样式表使用方式

QAbstractScrollArea

支持盒模式。

所有QAbstractScrollArea的派生类（QAbstractItemView

QColumnView、QHeaderView、QListView、QTableView、QTreeView、QGraphicsView、QMdiArea、

QPlainTextEdit、QScrollArea、QTextEdit、QTextBrowser、QListWidget and QUndoView、QTableWidget、QTreeWidget）：

支持滚动背景，使用background-attachment属性，设置属性值为scroll（缺省）；

支持固定背景，不与视口滚动，使用background-attachment属性，设置为属性值fixed。

属性background-attachment：

属性值类型：Attachment

属性值：{scroll | fixed}

示例：QTextEdit使用background滚动背景与固定背景

图片.png

扩展：固定平铺拉伸满视口背景

QTextEdit{
    border-image: url(E:/1.jpg);  
}

图片.png

QCheckBox

窗口部件

样式表使用方式

QCheckBox 图片.png

支持盒模式。

拥有子控件-指示器indicator，使用::indicator选择子控件。默认情况下，指示器被放置在小部件的内容矩形的左上角。支持间隔属性，指定检查指示符和文本之间的间距，使用spacing属性。

属性spacing*：

属性值类型：Length

属性值：px: pixels(default)

pt: the size of one point (i.e., 1/72 of an inch)

em: the em width of the font (i.e., the width of 'M')

ex: the ex width of the font (i.e., the height of 'x')

示例1：QCheckBox::indicator定制

图片.png

QCheckBox {
    spacing: 5px;
}
QCheckBox::indicator {
    width: 13px;
    height: 13px;
}
QCheckBox::indicator:unchecked {
    background-color: rgb(60, 0, 0);
}
QCheckBox::indicator:unchecked:hover {
    background-color: rgb(120, 0, 0);
}
QCheckBox::indicator:unchecked:pressed {
    background-color: rgb(180, 0, 0);
}
QCheckBox::indicator:checked {
    background-color: rgb(0, 60, 0);
}
QCheckBox::indicator:checked:hover {
    background-color: rgb(0, 120, 0);
}
QCheckBox::indicator:checked:pressed {
    background-color: rgb(0, 180, 0);
}
QCheckBox::indicator:indeterminate:hover {
    background-color: rgb(0, 0, 255);
}
QCheckBox::indicator:indeterminate:pressed {
    background-color: rgb(0, 0, 255, 100);
}

示例2：勾选

/* 勾选协议 */
QCheckBox {
  color: black;
    spacing: 15px;
  font-size: 22px;
}
QCheckBox::indicator {
    width: 30px;
    height: 30px;
}
QCheckBox::indicator:unchecked {  
  border-image: url(:/images/unchecked.png);
}
QCheckBox::indicator:checked {
  border-image: url(:/images/checked.png);
}

indeterminate为半选中状态

图片.png

QColumnView

窗口部件

样式表使用方式

QColumnView

可被image属性控制。

拥有子控件-arrow(箭头)指示符，通过::left-arrow和::right-arrow控制。

QComboBox

窗口部件

样式表使用方式

QComboBox

网络异常，图片无法展示

外框是frame，该frame支持盒模式。

拥有子控件-下拉按钮，可通过::drop-down控制。默认情况下拉按钮被放置在小部件的填充矩形的右上角。默认情况下，剪头放在下拉按钮内容的矩形的中心。

示例1：QComboBox定制

图片.png

QComboBox {
    border: 1px solid gray; /* border: 宽度 线类型 颜色 */
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    min-width: 6em;
}
QComboBox:editable {
    background: white;
}
QComboBox:!editable, QComboBox::drop-down:editable {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                             stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
}
/* QComboBox gets the "on" state when the popup is open */
QComboBox:!editable:on, QComboBox::drop-down:editable:on {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #D3D3D3, stop: 0.4 #D8D8D8,
                             stop: 0.5 #DDDDDD, stop: 1.0 #E1E1E1);
}
QComboBox:on { /* shift the text when the popup opens */
    padding-top: 3px;
    padding-left: 4px;
}
QComboBox::drop-down {
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 15px;
    border-left-width: 1px; 
    border-left-style: solid; /* just a single line */
    border-left-color: darkgray;
    border-top-right-radius: 3px; /* same radius as the QComboBox */
    border-bottom-right-radius: 3px;
}
QComboBox::down-arrow {
    /* image: url(E:/1.jpg);*/
    border-image: url(E:/1.jpg);
}
QComboBox::down-arrow:on { /* shift the arrow when popup is open */
    top: 1px;
    left: 1px;
}

示例2：将下拉框的单项最小宽度和最小高度固定

注意：增加test1 test22.. 单项的高度（ui->comboBox->setView(new QListView(); 添加图片），

原来是如下：

图片.png

QComboBox QAbstractItemView::item {
    min-height: 110px;
    min-width: 40px; 
}

图片.png

示例3：定制边框和按钮

* {
  font: 20px "黑体";
}
QComboBox {
    border: 2px solid rgba(0,0,0,255); /* border: 宽度 线类型 颜色 */
    border-radius: 3px;
  background: rgba(255,255,255,255);
}
QComboBox::down-arrow {
  border: none;
  background: rgba(0,0,0,0);
  image: url(:/images/arrow_down.png);
}

示例4：改变文字颜色，背景颜色，下拉框颜色

QWidget {
  color: rgb(255, 255, 255);
  background-color: rgb(0,0,0);
}
QComboBox {
    border: 2px solid rgba(0,0,0,255); /* border: 宽度 线类型 颜色 */
    border-radius: 3px;
}

示例4：定制边框，未下拉和下拉之后的箭头定制（2021年05月12日补充）

/* 下拉框箭头下面的底色区域 */
QComboBox::drop-down {
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  width: 32px;
  background-color: rgb(121, 188, 178);
}
/* 下拉框箭头下面的底色上的箭头区域 */
QComboBox::down-arrow {
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  background-color: red;
  width: 32px;
  height: 32px;
  border-image: url(:/settingWidget/images/arrowRight.png);
  background-color: rgb(121, 188, 178);
  padding: 0px 0px 0px 0px;
}
QComboBox::down-arrow:on {
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  background-color: red;
  width: 32px;
  height: 32px;
  border-image: url(:/settingWidget/images/arrowDown.png);
  background-color: rgb(121, 188, 178);
  padding: 0px 0px 0px 0px;
}

QDateEdit（参照QSpinBox）

窗口部件

样式表使用方式

QDateEdit

图片.png

查看QSpinBox

QDialog

窗口部件

样式表使用方式

QDialog 图片.png

只支持background、background-clip和background-origin三个属性。

警告：确保您定义自定义部件时定义了Q_OBJECT宏。

属性：background

属性值类型：Background

属性描述：设置背景的快捷属性符，相当于指定：background-color、background-image、background-repeat、background-posision。

QDialogButtonBox

窗口部件

样式表使用方式

QDialogButtonBox

图片.png

按钮的布局可以使用button-layout属性。

属性：button-layout

属性值类型：Number

属性值：[0 (WinLayout) | 1 (MacLayout) | 2 (KdeLayout) | 3 (GnomeLayout)]

QDockWidget

窗口部件

样式表使用方式

QDockWidget 图片.png

支持定制标题栏和标题栏按钮样式。

支持边框定制，使用border属性。

拥有子控件-标题栏，使用::title可控制标题栏。

标题栏有用子控件-关闭按钮和浮动按钮，使用::close-button和::float-button控制。

当是垂直标题栏时，会被置为:vertical状态。

依赖于QDockWidget::DockWidgetFeature特性设置，会被选取为:closable、:floatable和:movable三种状态。

QDoubleSpinBox（查看QSpinBox）

窗口部件

样式表使用方式

QDoubleSpinBox

图片.png

查看QSpinBox

QFrame

窗口部件

样式表使用方式

QFrame

图片.png

支持盒模式。

4.3版本以后，当设置一个QLabel时会自动设置QFrame::frameStyle属性为QFrame::StylePanel。

示例：QFrame定制

QFrame, QLabel, QToolTip{
    border: 2px solid green; /* border: 宽度 线类型 颜色 */
    border-radius: 4px;
    padding: 2px; /* 边界都内部矩形的宽度 */
background-image: url(E:/1.jpg);
}

图片.png

QGroupBox

窗口部件

样式表使用方式

QGroupBox

图片.png

支持盒模式；

拥有子控件-标题栏，使用::title可控制。默认情况下，标题栏文字”GroupBox”位置取决于QGroupBox::textAlignment。

在可选择情况下，标题栏拥有子控件-指示器，使用::indicator定制控制。

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

示例1：QGroupBox定制

QGroupBox {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                 stop: 0 #E0E0E0, 
                                 stop: 1 #FFFFFF);
    border: 2px solid gray; /* 右图border: 4px solid gray; */
    border-radius: 5px;
    margin-top: 1ex; /* 右图margin-top: 4ex; */
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center; /* position at the top center */
    padding: 0 3px;
    background-color: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #FF0ECE,
                                  stop: 1 #FFFFFF);
}

图片.png

当在代码或者ui中将GroupBox设置为checkable=true时，如下：

QGroupBox {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #E0E0E0, stop: 1 #FFFFFF);
    border: 4px solid gray;
    border-radius: 5px;
    margin-top: 24px; /* leave space at the top for the title */
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center; /* position at the top center */
    padding: 0 3px;
    background-color: qlineargradient( x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #FF0ECE, 
                                  stop: 1 #FFFFFF);
}
QGroupBox::indicator {
    width: 24px;
    height: 24px;
}
QGroupBox::indicator:unchecked {
    image: url(E:/1.jpg);
}

图片.png

示例2：QGroupBox修改title

QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: left top;
    font-size: 224px;
    font-weight: bold;
}
QGroupBox {        /* 修改标题的字体样式，本身不支持windows font */
    font-size: 24px;
    font-weight: bold;
}

QHeaderView

窗口部件

样式表使用方式

QHeaderView

支持盒模式。

拥有子控件-头标题格，使用::section来控制样式，:该子控件拥有:middle，:fisrt，:last:only-one，:next-selected，

:previous-selected，:selectted和checked状态。

拥有子控件-标题单元格箭头，使用::up-arrow和::down-arrow控制。

示例：QTableWidget的QHeaderView定制

QHeaderView::section {
     background-color: qlineargradient( x1:0, y1:0, x2:0, y2:1,
                                   stop:0 #616161, 
                                   stop: 0.5 #505050,
                                   stop: 0.6 #434343, stop:1 #656565);
     color: white;
     padding-left: 4px;
     border: 1px solid #6c6c6c;
}
QHeaderView::section:checked
{
    background-color: red;
}
/* 以下图标，只有在设置允许sortingEnable排序后，点击表头才会出现*/
QHeaderView::down-arrow {
     width:24px;
     height:24px;
     image: url(E:/arrow-down.jpg);
}
QHeaderView::up-arrow {
     width:24px;
     height:24px;
     image: url(E:/arrow-up.jpg);
}

图片.png

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

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

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

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

前话

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

QAbstractScrollArea（滚动区域：随视口滚动背景、固定背景）

示例：QTextEdit使用background滚动背景与固定背景

扩展：固定平铺拉伸满视口背景

QCheckBox

示例1：QCheckBox::indicator定制

示例2：勾选

QColumnView

QComboBox

示例1：QComboBox定制

示例2：将下拉框的单项最小宽度和最小高度固定

示例3：定制边框和按钮

示例4：改变文字颜色，背景颜色，下拉框颜色

示例4：定制边框，未下拉和下拉之后的箭头定制（2021年05月12日补充）

QDateEdit（参照QSpinBox）

QDialogButtonBox

QDockWidget

QDoubleSpinBox（查看QSpinBox）

QFrame

示例：QFrame定制

QGroupBox

示例1：QGroupBox定制

示例2：QGroupBox修改title

QHeaderView

示例：QTableWidget的QHeaderView定制

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

前话

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

QAbstractScrollArea（滚动区域：随视口滚动背景、固定背景）

示例：QTextEdit使用background滚动背景与固定背景

扩展：固定平铺拉伸满视口背景

QCheckBox

示例1：QCheckBox::indicator定制

示例2：勾选

QColumnView

QComboBox

示例1：QComboBox定制

示例2：将下拉框的单项最小宽度和最小高度固定

示例3：定制边框和按钮

示例4：改变文字颜色，背景颜色，下拉框颜色

示例4：定制边框，未下拉和下拉之后的箭头定制（2021年05月12日补充）

QDateEdit（参照QSpinBox）

QDialogButtonBox

QDockWidget

QDoubleSpinBox（查看QSpinBox）

QFrame

示例：QFrame定制

QGroupBox

示例1：QGroupBox定制

示例2：QGroupBox修改title

QHeaderView

示例：QTableWidget的QHeaderView定制

热门文章

最新文章

相关电子书

相关实验场景