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

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

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

本文章博客地址: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

 

只支持backgroundbackground-clipbackground-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:selecttedchecked状态。

拥有子控件-标题单元格箭头,使用::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

 

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

 

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

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


相关文章
|
前端开发
【前端】elementUI表格根据状态显示不同的字体颜色
【前端】elementUI表格根据状态显示不同的字体颜色
301 1
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
本文介绍了在C# WPF应用程序中引入外部iconfont图标时可能遇到的显示问题及其解决方法:1) 检查资源路径和引入格式是否正确,确保字体文件引用格式为“#xxxx”,并正确指向字体文件位置;2) 确保图标资源被包含在程序集中,通过设置字体文件的生成操作为Resource(资源)来实现。
C# WPF 中 外部图标引入iconfont,无法正常显示问题 【小白记录】
|
3月前
|
JavaScript
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
本文介绍了如何对ElementUI和ElementPlus的Tree树组件进行美化,包括增加辅助线、替换展开收起图标、点击节点后文字高亮等效果,并提供了详细的代码示例和实现效果。
362 0
如何对ElementUI、ElementPlus中的Tree树组件进行美化,如增加辅助线、替换展开收起图标、点击节点后文字高亮等效果?本文给你答案!
|
3月前
|
图形学
小功能⭐️Unity自动更改文本框高度,以显示全部文本
小功能⭐️Unity自动更改文本框高度,以显示全部文本
|
5月前
|
前端开发
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
CSS常用属性之(列表、表格、鼠标)属性,(如果想知道CSS的列表、表格、鼠标相关的属性知识点,那么只看这一篇就足够了!)
文本,vitepress代码风格配置和序号配置,第几行到第几行出现高亮显示,最上方图标出现 ,网页排序出现博客,vitepress如何默认折叠效果
文本,vitepress代码风格配置和序号配置,第几行到第几行出现高亮显示,最上方图标出现 ,网页排序出现博客,vitepress如何默认折叠效果
|
6月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
810 0
|
数据安全/隐私保护 计算机视觉
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例)
qss样式表笔记大全(三):可设置样式的窗口部件列表(中)(持续更新示例) 一
|
前端开发
Dreamweaver软件设置更改表格颜色的操作方法
Dreamweaver软件设置更改表格颜色的操作方法
705 0
|
JavaScript
Vue组件中表格文字内容太长,自动变省略号,鼠标悬浮上去显示全称。
Vue组件中表格文字内容太长,自动变省略号,鼠标悬浮上去显示全称。
742 0