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

简介: 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-colorselection-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-colorselection-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-colorselection-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

仅支持backgroundbackground-clipbackground-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

相关文章
|
存储 编解码 Cloud Native
C++ Qt关于多屏幕窗口处理
C++ Qt关于多屏幕窗口处理
|
存储 API C++
【Qt 信号槽】深入探索 Qt 信号和槽机制中的引用传递“ (“A Deep Dive into Reference Passing in Qt Signal and Slot Mechanism“)
【Qt 信号槽】深入探索 Qt 信号和槽机制中的引用传递“ (“A Deep Dive into Reference Passing in Qt Signal and Slot Mechanism“)
1170 0
|
API 计算机视觉
Qt实用技巧:自定义窗口标题栏
Qt实用技巧:自定义窗口标题栏
Qt实用技巧:自定义窗口标题栏
|
数据安全/隐私保护 计算机视觉
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
|
数据可视化
【Qt 学习笔记】Qt窗口 | 菜单栏 | QMenuBar的使用及说明
【Qt 学习笔记】Qt窗口 | 菜单栏 | QMenuBar的使用及说明
3204 3
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Tab Widget的使用及说明
1730 2
【Qt 学习笔记】Qt窗口 | 浮动窗口 | QDockWidget的使用及说明
【Qt 学习笔记】Qt窗口 | 浮动窗口 | QDockWidget的使用及说明
1502 3
【Qt 学习笔记】Qt窗口 | 标准对话框 | 颜色对话框QColorDialog
【Qt 学习笔记】Qt窗口 | 标准对话框 | 颜色对话框QColorDialog
2109 3
|
API UED
【Qt 学习笔记】Qt窗口 | 状态栏 | QStatusBar的使用及说明
【Qt 学习笔记】Qt窗口 | 状态栏 | QStatusBar的使用及说明
2079 4
|
算法 API 开发者
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮?一文带你掌握用法
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮?一文带你掌握用法
2912 1