qss样式表笔记大全(四)：可设置样式的窗口部件列表（下）（持续更新示例）二-阿里云开发者社区

示例1：QTabWidget和QTabBar定制

图片.png

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}
/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    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);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
    stop: 0 #fafafa, stop: 0.4 #f4f4f4,
    stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}
QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}

示例2：QTabWidget和QTabBar定制

图片.png

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
}
QTabWidget::tab-bar {
    left: 5px; /* move to the right by 5px */
}
/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    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);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #fafafa, 
                             stop: 0.4 #f4f4f4,
                             stop: 0.5 #e7e7e7, 
                             stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}
QTabBar::tab:!selected {
    margin-top: 2px; /* make non-selected tabs look smaller */
}
/* make use of negative margins for overlapping tabs */
QTabBar::tab:selected {
/* expand/overlap to the left and right by 4px */
    margin-left: -4px;
    margin-right: -4px;
}
QTabBar::tab:first:selected {
    margin-left: 0; /* the first selected tab has nothing to overlap with on the left */
}
QTabBar::tab:last:selected {
    margin-right: 0; /* the last selected tab has nothing to overlap with on the right */
}
QTabBar::tab:only-one {
    margin: 0; /* if there is only one tab, we don't want overlapping margins */
}

示例3：QTabWidget和QTabBar定制

图片.png

QTabWidget::pane { /* The tab widget frame */
    border-top: 2px solid #C2C7CB;
    position: absolute;
    top: -0.5em;
}
QTabWidget::tab-bar {
    alignment: center;
}
/* Style the tab using the tab sub-control. Note that it reads QTabBar _not_ QTabWidget */
QTabBar::tab {
    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);
    border: 2px solid #C4C4C3;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 8ex;
    padding: 2px;
}
QTabBar::tab:selected, QTabBar::tab:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                             stop: 0 #fafafa, stop: 0.4 #f4f4f4,
                             stop: 0.5 #e7e7e7, stop: 1.0 #fafafa);
}
QTabBar::tab:selected {
    border-color: #9B9B9B;
    border-bottom-color: #C2C7CB; /* same as pane color */
}

示例4：QTabWidget和QTabBar定制

图片.png

QTabBar::tear {
    image: url(tear_indicator.png);
}
QTabBar::scroller { /* the width of the scroll buttons */
    width: 20px;
}
QTabBar QToolButton { /* the scroll buttons are tool buttons */
    background: rgb(255,0,0);
}
QTabBar QToolButton::right-arrow { /* the arrow mark in the tool buttons */
    background: rgb(0,255,0);
}
QTabBar QToolButton::left-arrow {
    background: rgb(0,0,255);
}
/* since 4.6 */
QTabBar::close-button {
    background: rgb(0,0,0);
    subcontrol-position: left;
}
QTabBar::close-button:hover {
    background: rgb(255,255,255);
}

示例5：只定制TabWidget上的QTabBar的文字，tab的宽度和高度

QTabBar::tab {
    min-width: 90px;
    min-height: 28px;
  font: 22px "楷体";
  font-weight: bold;
}

示例6：透明颜色，背景穿透（配合其TabWidget的tab页，为QWidget，补充日期：2021年03月01日）

QTabBar::tab {
  border: 2px solid rgb(46, 65, 99);
  background: transparent;
  min-width: 140px;
}
QTabBar::tab::selected {
  border: 2px solid rgb(46, 65, 99);
  background: rgba(22,79,135,250);
  min-width: 140px;
  color: 
}
QTabWidget:pane {
  border: 2px solid rgb(46, 65, 99);
  background: transparent;
}
QWidget#tab_shengChanXinXi,
QWidget#tab_renYuanXinXi {
  background: transparent;
}

QTabWidget

请参照紧邻上面的QTabBar进行样式定制。

窗口部件

样式表使用方式

QTabWidget

外框frame由::pane控制。

左右角分别由::left-corner和::right-coner控制。

tabBar的位置由::tab-bar控制。

默认子控件都是QWindowsStyle时QTabWidget的位置。

定制QTabBar请使用tab-bar控制。

依据tabs的方向，拥有四个状态:top，:left，:right，:bottom。

查看示例：QTabWidget和QTabBar定制

示例1：透明颜色，背景穿透（配合其TabWidget的tab页，为QWidget，补充日期：2021年03月01日）

QTabBar::tab {
  border: 2px solid rgb(46, 65, 99);
  background: transparent;
  min-width: 140px;
}
QTabBar::tab::selected {
  border: 2px solid rgb(46, 65, 99);
  background: rgba(22,79,135,250);
  min-width: 140px;
  color: 
}
QTabWidget:pane {
  border: 2px solid rgb(46, 65, 99);
  background: transparent;
}
QWidget#tab_shengChanXinXi,
QWidget#tab_renYuanXinXi {
  background: transparent;
}

示例2：浅绿色定制，区域透明

/* tabBar条的样式 */
QTabWidget::tab-bar {
    alignment: left;
}
/* tabBar上的tab按钮样式 */
QTabBar::tab {
  font-size: 12px;
  color: black;
    background: white;
    border: 1px solid  rgb(214, 214, 214);
    min-width: 52px;
  min-height: 26px;
    padding: 0px;
}
QTabBar::tab:hover,
QTabBar::tab:selected {
  color: white;
    background-color: rgb(75, 138, 21);
    border: 0px solid  rgb(214, 214, 214);
  border-radius: 1px;
}
/* 整个tabBar下的区域（不带tabBar菜单按钮条部分 */
QTabWidget::pane { /* The tab widget frame */
    border-top: 1px solid rgb(113,113,113);
  background: transparent;
    position: absolute;
}

QTableView

窗口部件

样式表使用方式

QTableView

图片.png

支持盒模式。

当alternating row colors属性设置为允许时，交替颜色可通过属性alternate-background-color控制。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

在QTableView控件可作为一个QAbstractButton实现，还可以使用 “QTableView QTableCornerButton::section“选择器选择后控制样式。

表格颜色使用属性gridline-color。

背景可滚动，可参照QAbstractScrollArea窗口部件。

示例1：QTableView定制

图片.png

QTableView {
    selection-background-color: qlineargradient(x1: 0, y1: 0, x2: 0.5, y2: 0.5,
                                          stop: 0 #FF92BB, stop: 1 white);
}
QTableView QTableCornerButton::section {
    background: red;
    border: 2px outset red;
}
QTableView::indicator:unchecked {
    background-color: #d7d6d5
}

示例2：透明与半透明背景，看到底部窗口背景图片（2021年03月04日更新）

QWidget {
  background: transparent;
  font: 18px "黑体";
}
QHeaderView::section {
  color: white;
  background: rgba(255,255,255, 100);
}
QTableView {
  background: transparent;
  alternate-background-color: rgba(255,255,255, 50);
    selection-background-color: rgb(36, 128, 219);
  gridline-color: rgba(0, 0, 0, 255);
}
QTableView::indicator:unchecked {
  background: transparent;
}

QTableWidget（查看QTableView）

窗口部件	样式表使用方式
QTableWidget	查看QTableView

示例：QTableWidget定制

QTableWidget {
  border 0px;
  color: black;
  background-color: rgb(242, 242, 242);
  alternate-background-color: rgb(255, 255, 255);
}

QTextEdit

窗口部件

样式表使用方式

QTextEdit

支持盒模式。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

示例1：协议阅读界面（2021年05月08日补充）

/* 协议文本 */
QTextEdit {
  color: black;
  border: 2px solid rgb(88, 183, 179);  
  border-right-width: 0px;
}
QScrollBar:vertical {
    border: 4px solid rgb(88, 183, 179);
    background: white;
    width: 28px;
    margin: 22px 0 22px 0;
}
QScrollBar::handle:vertical {
    background: rgb(104, 189, 186);
    min-height: 20px;
}
/* 箭头区域的底部区域，箭头区域在改区域上，默认箭头区域在区域居中 */
QScrollBar::add-line:vertical {
    border: 1px solid rgb(88, 183, 179);
    background: rgb(88, 183, 179);
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::add-line:vertical:pressed {
    border: 1px solid rgb(88, 183, 179);
    background: rgb(35, 132, 124);
    height: 20px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 1px solid rgb(88, 183, 179);
    background: rgb(88, 183, 179);
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical:pressed {
    border: 1px solid rgb(35, 132, 124);
    background: red;
    height: 20px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
/* 箭头区域的实际箭头，默认居中 */
QScrollBar::up-arrow:vertical {
  width: 20px;
  height: 14px;
  border-image: url(:/images/upArrow.png);
}
QScrollBar::down-arrow:vertical {
  width: 20px;
  height: 14px;
  border-image: url(:/images/downArrow.png);
}
QScrollBar::add-page:vertical,
QScrollBar::sub-page:vertical {
    background: none;
}

QTimeEdit（查看QSpinBox）

窗口部件	样式表使用方式
QTimeEdit	查看QSpinBox

QToolBar

窗口部件

样式表使用方式

QToolBar

图片.png

支持盒模式。

拥有:top，:left，: right，:bottom状态，依赖tool-bar所在区域。

拥有:first，:last，:middle，:only-one状态指示器。

通过::separator控制分隔符。

示例：定制QToolBar

QToolButton { /* all types of tool button */
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #f6f7fa, 
                                  stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
    padding-right: 20px; /* make way for the popup button */
}
QToolButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, 
                                  stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
    border: 2px solid gray;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    /* 16px width + 4px for border = 20px allocated above */
    width: 16px;
}
QToolButton::menu-arrow {
    image: url(E:/1.jpg);
}
QToolButton::menu-arrow:open {
    top: 1px; left: 1px; /* shift it a bit */
}

图片.png

QToolButton

窗口部件

样式表使用方式

QToolButton 图片.png

支持盒模式。

如果QToolButton拥有菜单，则可使用::menu-indicator来控制菜单指示器。默认的，菜单指示器是定位在padding rectangle的右下角。

如果QtoolButton是QToolButton::MenuButtonPopop模式，则可使用::menu-button来绘制menu button。

::menu-arraow可用户绘制menu-button内的菜单箭头。默认的，它位置在menu-button子控件的centent rectangle中心。

当QToolButton显示箭头时，有且由::up-arrow，::down-arrow，::left-arrow，::right-arrow子控件控制。

警告：如果仅仅设置一个QToolButton的背景色，除非你设置border属性为某值，否则背景色不会生效。这是因为，默认的时候QToolButton绘制一个正框正好完全覆盖背景色。

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

示例：QToolButton定制（分为三种情况）

第一种：不存在菜单，则可以直接参照QPushButton来定制QToolButton。

第二种：如果有菜单，菜单模式设置为QToolButton::DelayedPopup或者QToolButton：：instantPopup（让我们统一归为非按钮弹出菜单吧）。这种情况，可直接参照带menu的QPushButton，主要是参照menu-indicator。

第三种：当菜单模式QToolButton::popupMode设置为

QToolButton::MenuButtonPopup时，参照以下示例：

QToolButton { /* all types of tool button */
    border: 2px solid #8f8f91;
    border-radius: 6px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] { /* only for MenuButtonPopup */
    padding-right: 20px; /* make way for the popup button */
}
QToolButton:pressed {
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
QToolButton::menu-button {
    border: 2px solid gray;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    /* 16px width + 4px for border = 20px allocated above */
    width: 16px;
}
QToolButton::menu-arrow {
    image: url(downarrow.png);
}
QToolButton::menu-arrow:open {
    top: 1px; left: 1px; /* shift it a bit */
}

图片.png

QToolBox

窗口部件

样式表使用方式

QToolBox

图片.png

支持盒模式。

每个不同的tab页面使用::tab进行控制。

tabs支持:only-one，:first，:last，:middle，:previous-selected，:next-selected，:selected状态。

示例：QToolBox定制

QToolBox::tab {
    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);
    border-radius: 5px;
    color: darkgray;
}
QToolBox::tab:selected { /* italicize selected tabs */
    font: italic;
    color: white;
}

图片.png

QToolTip

窗口部件

样式表使用方式

QToolTip

支持盒模式。

opacity属性控制tooltip的不透明度，1.0为完全不透明，0.0为透明。

属性：opacity*

属性类型：Number

示例：QToolTip定制

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

图片.png

QTreeView

窗口部件

样式表使用方式

QTreeView

支持盒模式。

当alternating row colors属性设置为允许时，交替颜色可通过属性alternate-background-color控制。

被选中的内容部分的前景色和背景需要通过属性selection-color和selection-background-color控制。

选择的行为可以在这里通过属性show-decoration-selected属性控制。

树分支科室使用::branch控制，拥有:open，:closed，:has-sibling，:has-children状态。

使用::item精确控制内容项。

背景可滚动，可参照QAbstractScrollArea窗口部件。

示例：QTreeView定制

允许交替颜色时候可控制交替颜色

QTreeView {
    alternate-background-color: yellow;
}

精确控制项

    show-decoration-selected: 1;
}
QTreeView::item {
    border: 1px solid #d9d9d9;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}
QTreeView::item:selected {
   border: 1px solid #567dbc;
}
QTreeView::item:selected:active{
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}
QTreeView::item:selected:!active {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
}

控制分支效果

QTreeView {
    show-decoration-selected: 1;
}
QTreeView::item {
    border: 1px solid #d9d9d9;
    border-top-color: transparent;
    border-bottom-color: transparent;
}
QTreeView::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}
QTreeView::item:selected {
   border: 1px solid #567dbc;
}
QTreeView::item:selected:active{
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6ea1f1, stop: 1 #567dbc);
}
QTreeView::item:selected:!active {
   background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #6b9be8, stop: 1 #577fbf);
}

图片.png

QTreeView::branch:has-siblings:!adjoins-item {
    border-image: url(vline.png) 0;
}
QTreeView::branch:has-siblings:adjoins-item {
    border-image: url(branch-more.png) 0;
}
QTreeView::branch:!has-children:!has-siblings:adjoins-item {
    border-image: url(branch-end.png) 0;
}
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
    border-image: none;
    image: url(branch-closed.png);
}
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
    border-image: none;
    image: url(branch-open.png);
}

图片.png

/* 未打开节点时的图标 */
QTreeWidget::branch:has-children:!has-siblings:closed,
QTreeWidget::branch:closed:has-children:has-siblings {
    border-image: url(:/treeWidget/images/branch-closed.png);
}
/* 打开节点时的图标 */
QTreeWidget::branch:open:has-children:!has-siblings,
QTreeWidget::branch:open:has-children:has-siblings  {
    border-image: url(:/treeWidget/images/branch-open.png);
}
/* 节点与兄弟节点之间的图标(在上的节点展开后) */
QTreeWidget::branch:has-siblings:!adjoins-item {
    border-image: url(:/treeWidget/images/vLine.png);
}
/*子项前面（非结束项)*/
QTreeWidget::branch:has-siblings:adjoins-item {
    border-image: url(:/treeWidget/images/branch-more.png);
}
/*结束项*/
QTreeWidget::branch:!has-children:!has-siblings:adjoins-item {
    border-image: url(:/treeWidget/images/branch-end.png)
}

QTreeWidget（查看QTreeView）

窗口部件	样式表使用方式
QTreeWidget	查看QTreeView

QWidget

窗口部件

样式表使用方式

QWidget

仅支持background，background-clip和background-origin属性。注意：这是直接设置QWidget背景图片等失败的原因，解决方法如下重写paintEvent）。

如果其子类，需要支持其他除以上三种的其他属性，需要重写paintEvent代码。

1. void CustomWidget::paintEvent(QPaintEvent *)
2. {
3. QStyleOption opt;
4. opt.init(this);
5. QPainter p(this);
6. style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
7. }

以上的代码生效stylesheet，对其他操作没有影响。

警告：必须添加Q_OBJECT宏。

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

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

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

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

示例1：QTabWidget和QTabBar定制

示例2：QTabWidget和QTabBar定制

示例3：QTabWidget和QTabBar定制

示例4：QTabWidget和QTabBar定制

示例5：只定制TabWidget上的QTabBar的文字，tab的宽度和高度

示例6：透明颜色，背景穿透（配合其TabWidget的tab页，为QWidget，补充日期：2021年03月01日）

QTabWidget

示例1：透明颜色，背景穿透（配合其TabWidget的tab页，为QWidget，补充日期：2021年03月01日）

示例2：浅绿色定制，区域透明

QTableView

示例1：QTableView定制

示例2：透明与半透明背景，看到底部窗口背景图片（2021年03月04日更新）

QTableWidget（查看QTableView）

示例：QTableWidget定制

QTextEdit

示例1：协议阅读界面（2021年05月08日补充）

QTimeEdit（查看QSpinBox）

QToolBar

示例：定制QToolBar

QToolButton

示例：QToolButton定制（分为三种情况）

QToolBox

示例：QToolBox定制

QToolTip

示例：QToolTip定制

QTreeView

示例：QTreeView定制

QTreeWidget（查看QTreeView）

QWidget

热门文章

最新文章

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

示例1：QTabWidget和QTabBar定制

示例2：QTabWidget和QTabBar定制

示例3：QTabWidget和QTabBar定制

示例4：QTabWidget和QTabBar定制

示例5：只定制TabWidget上的QTabBar的文字，tab的宽度和高度

示例6：透明颜色，背景穿透（配合其TabWidget的tab页，为QWidget，补充日期：2021年03月01日）

QTabWidget

示例1：透明颜色，背景穿透（配合其TabWidget的tab页，为QWidget，补充日期：2021年03月01日）

示例2：浅绿色定制，区域透明

QTableView

示例1：QTableView定制

示例2：透明与半透明背景，看到底部窗口背景图片（2021年03月04日更新）

QTableWidget（查看QTableView）

示例：QTableWidget定制

QTextEdit

示例1：协议阅读界面（2021年05月08日补充）

QTimeEdit（查看QSpinBox）

QToolBar

示例：定制QToolBar

QToolButton

示例：QToolButton定制（分为三种情况）

QToolBox

示例：QToolBox定制

QToolTip

示例：QToolTip定制

QTreeView

示例：QTreeView定制

QTreeWidget（查看QTreeView）

QWidget

热门文章

最新文章

相关电子书

相关实验场景