【QT】 QSS样式表设计一文了解

很高兴在雪易的CSDN遇见你 ,给你糖糖

欢迎大家加入雪易社区-CSDN社区云 


前言

本文分享QT界面设计中的QSS样式技术,主要从**、**和**方面展开,希望对各位小伙伴有所帮助!学会了QSS样式设计,就可以开动你的审美,制作出令人羡慕的软件界面了。

感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步!

你的点赞就是我的动力(^U^)ノ~YO

我将收获到的:

        1. QT样式表的语法及用法

        2. 常见的伪状态和属性列表

        3.常用好用的网址推荐

目录

前言

1. Qt样式表 语法

2. Qt样式表 用法

3. selector设置

》selector类型说明        

》selector控件的可设置样式

》selector访问子控件

》selector设置伪状态

4. 属性列表

5. QT官方参考网站 

6. 常见冲突(样式不生效原因)

结论:


1. Qt样式表 语法

        》语法:selector { attribute: value }

        》其中,selector可以是控件类型,控件名称等,如QLineEdit, #lineEdit_1;

                      attribute:属性,如color、border、background等

                      value:值,属性设置的值

2. Qt样式表 用法

        》使用setStyleSheet,如

    qApp->setStyleSheet("QLineEdit { background-color: yellow }");
    myDialog->setStyleSheet("QLineEdit { background-color: yellow }");

        》ui文件里的StyleSheet,如 

         》QSS文件

    QFile file(":/res/dark.qss");/*QSS文件所在的路径*/
    file.open(QFile::ReadOnly);
    QTextStream filetext(&file);
    QString stylesheet = filetext.readAll();
    this->setStyleSheet(stylesheet);
    file.close();

3. selector设置

》selector类型说明        

选择器 示例 说明
通用选择器 * 匹配所有部件
类型选择器 QPushButton 匹配所有QPushButton示例及它的所有子类
属性选择器 QPushButton[flat = “false”] 匹配QPushButton的属性flat为false的示例
类选择器 .QPushButton 匹配所有QPushButton示例,但不包括它的子类
ID选择器 QPushButton#myButton 匹配所有QPushButton中myButton对象的实例
后代选择器 QDialog QPushButton 匹配所有QPushButton实例,它们必须是QDialog的子孙部件
孩子选择器 QDialog>QPushButton 匹配所有QPushButton实例,它们必须是QDialog直系孩子部件

》selector控件的可设置样式

        具体各控件的可设置样式请在以下文章中查找Qt界面设计_雪易的博客-CSDN博客

》selector访问子控件

        示例如下,

            QTabWidget::pane{ /* The tab widget frame */
                border: 1px solid #00BB9E;
                border - radius:5px;
            
            }
            
            QTabWidget::tab - bar{
                alignment: left;
            }

        具体各控件的子控件请在以下文章中查找Qt界面设计_雪易的博客-CSDN博客

》selector设置伪状态

        》选择器可以使用状态来限制在部件的指定状态上的应用。 伪状态在选择器之后,用冒号隔离。如:鼠标悬停在按钮上时其按钮的颜色为白色:QPushButton:hover{color:white}
鼠标不悬停在按钮上时其按钮的颜色为l蓝色(!表否定):QPushButton:!hover{color:blue}

        》伪状态可多个连用,达到逻辑与效果。如:鼠标悬停在一个被选中的QCheckBox部件上时才应用规则:QCheckBox:hover:checked{color:white}

        》伪状态可通过逗号达到逻辑或效果。如:QCheckBox:hover,checked{color:white}

        》伪状态和子部件联合使用。如:QComboBox::drop-down:hover{image:url(dropdown_bright.png)}

伪状态 描述
:active 此状态在小部件驻留在活动窗口时设置
:adjoins-item 此状态在QTreeView的::branch与一个item相邻时设置
:alternate

当QAbstractItemView::alternatingRowColors()设置为真时,

在绘制QAbstractItemView的行时,为每个交替行设置此状态

:bottom 此item位于底部。例如,QTabBar有位于底部的选项卡
:checked 此item被选中。例如,QAbstractButton的checked状态
:closable

此item可以被关闭。

例如,QDockWidget的QDockWidget::DockWidgetClosable特性开启时

:closed 此item处于关闭状态。例如,QTreeView中未展开的item
:default

此item的默认状态。

例如,一个default的QPushButton或QMenu中的一个默认动作

:disabled 此item被禁用时的状态
:editable 如QComboBox是可编辑的
:edit-focus

此item具有编辑焦点(参考QStyle::State_HasEditFocus)。

此状态仅对Qt扩展应用程序可用

:enabled 此item已启用
:exclusive 此item是一个独占项组的一部分。例如,独占QActionGroup中的菜单项
:first 此item是列表中的第一项。例如,QTabBar中的第一个选项卡
:flat 此item是平的。例如,一个扁平的QPushButton
:floatable

此item可以浮动。

例如,QDockWidget的QDockWidget::DockWidgetFloatable的特性开启时

:focus 此item具有输入焦点
:has-children 此item具有子对象。例如,QTreeView中具有子项的项
:has-sibling 此item具有兄弟对象。例如,QTreeView中与之相邻的项
:horizontal 此item处于水平方向
:hover 鼠标悬浮在此item上
:indeterminate 此item处于不确定状态。例如,QCheckBox或QRadioButton被部分选中
:last 此item是列表中的最后一项。例如,QTabBar中的最后一个选项卡
:left 此item位于左侧。例如,QTabBar有位于左侧的选项卡
:maximized 此item处于最大化状态。例如,一个最大化的QMdiSubWindow
:middle 此item是列表中的中间一项。例如,一个不在QTabBar中的开头或结尾的选项卡
:minimized 此item处于最小化状态。例如,一个最小化的QMdiSubWindow
:movable

此item可以被移动。

例如, QDockWidget的QDockWidget::DockWidgetMovable特性开启时

:no-frame 此item没有边框。例如,没有边框的QSpinBox或QLineEdit
:non-exclusive 此item是一个非独占项组的一部分。例如,非独占QActionGroup中的菜单项
:off 对可以切换的items,这适用于处于off状态的item
:on 对可以切换的items,这适用于处于on状态的widget
:only-one 此item是列表中的唯一的一项。例如,一个在QTabBar中单独的选项卡
:open

此item处于打开状态。

例如,QTreeView中的展开项,或带有菜单的QComboBox或QPushButton

:next-selected

此item是列表中的下一个被选中的项。

例如,在QTabBar中当前选项卡的下一个要选中的选项卡

:pressed 鼠标正在按压在此item上
:previous-selected

此item是列表中的上一个被选中的项。

例如,在QTabBar中当前选项卡的上一个要选中的选项卡

:read-only

此item处于只读或不可编辑状态。

例如,一个只读QLineEdit或不可编辑的QComboBox

:right 此item位于右侧。例如,QTabBar有位于右侧的选项卡
:selected

此item处于选中状态。

例如,一个在QTabBar中被选中的选项卡或一个在菜单中被选中的菜单项

:top 此item位于顶部。例如,QTabBar有位于顶部的选项卡
:unchecked 此item处于未被选中状态
:vertical 此item处于垂直方向
:window 小部件是一个窗口(例如,一个顶层小部件)

4. 属性列表

         常见的属性如下

attribute属性 类型 描述
alternate-background-color Brush 交替背景色。
background Background 背景,相当于指定background-color、background-image、background-repeat和background-position。
background-color Brush 背景颜色,例如:
background-image Url 背景图像(图像的半透明部分会被背景颜色穿透)。
background-repeat Repeat

背景图像如何充满背景矩形,

如果未指定此属性,背景图像将在两个方向上重复(repeat)。

background-position Alignment

背景图像在背景原点矩形内的对齐。

如果未指定此属性,则对齐方式为左上角。

background-attachment Attachment

背景图像是否相对于视口进行滚动或固定。

默认情况下,背景图像随视口滚动。

background-clip Origin 规定背景的绘制区域。如果未指定此属性,则默认为border。
border:背景被裁剪到边框盒
padding:背景被裁剪到内边距框
content:背景被裁剪到内容框
background-origin Origin 背景图像相对于什么来定位。如果未指定此属性,则默认为 padding 填充。
padding:背景图像相对于内边距框来定位
border:背景图像相对于边框盒来定位
content:背景图像相对于内容框来定位
border Border

设置 4 个边框的样式,

按照一下顺序进行设置:

border-width,border-style,border-color。

border-top Border 顶部边框
border-bottom Border 底部边框
border-right Border 右边边框
border-left Border 左边边框
border-color Box Colors 边框的颜色。
border-top-color Brush 边框上边缘颜色
border-bottom-color Brush 边框下边缘颜色
border-right-color Brush 边框右边缘颜色
border-left-color Brush 边框左边缘颜色
border-image Border Image 填充边框的图像
border-radius Radius 边角的半径,即边角圆弧。
border-top-left-radius Radius 左上角圆弧
border-top-right-radius Radius 右上角圆弧
border-bottom-right-radius Radius 右下角圆弧
border-bottom-left-radius Radius 左下角圆弧
border-style Border Style 边框边缘的样式,若未指定默认为none。
border-top-style Border Style 边框上边缘的样式
border-bottom-style Border Style 边框下边缘的样式
border-right-style BorderStyle 边框右边缘的样式
border-left-style BorderStyle 边框左边缘的样式
border-width Box Lengths 边框的宽度。
border-top-width Box Lengths 上边框的宽度
border-bottom-width Box Lengths 下边框的宽度
border-right-width Box Lengths 右边框的宽度
border-left-width Box Lengths 左边框的宽度
bottom Length

在部件边底部其子控件向上的偏移量,

即元素与底部边缘的距离。

top Length

在部件边顶部其子控件向下的偏移量,

即元素与顶部边缘的距离。

right Length

在部件右边其子控件向左的偏移量,

即元素与右边缘的距离。

left Length

在部件左边其子控件向右的偏移量,

即元素与左边缘的距离。

button-layout Number

QDialogButtonBox或QMessageBox中的按钮布局。取值为0 (WinLayout)、1 (MacLayout)、2 (KdeLayout)、

3 (GnomeLayout)和5 (AndroidLayout)。

如果未指定此属性,

它默认为SH_DialogButtonLayout样式提示的

当前样式所指定的值。

color Brush 渲染文本的颜色,默认值为黑色。
dialogbuttonbox-buttons-have-icons Boolean

QDialogButtonBox中的按钮是否显示

图标如果这个属性被设置为1,

QDialogButtonBox的按钮显示图标;

如果设置为0,则不显示图标。

font Font

设置字体。相当于指定font-family、

font-size、font-style和/或font-weight。

font-family String 字体类型。
font-size Font Size 字体大小。
font-style Font Style 字体风格(倾斜)。
font-weight Font Weight 字体的粗细。
gridline-color* Color

QTableView中网格线的颜色。

如果没有指定此属性,

它默认为SH_Table_GridLineColor样式提示的

当前样式所指定的值。

height Length

子部件的高度。如果希望小部件具有固定的高度,

请将min-height和max-height设置为相同的值。

width Length 子控件(在某些情况下是小部件)的宽度。
icon Url+

所使用的图标,用于具有图标的小部件。

目前唯一支持此属性的小部件是QPushButton。

icon-size Length

小部件中图标的宽度和高度。

可以使用此属性设置以下小部件的图标大小:QCheckBox、QListView、QPushButton、QRadioButton、QTabBar、QToolBar、QToolBox、QTreeView。

image* Url+

在子控件的内容矩形中绘制图像。

image属性接受一个url列表或者一个svg。

绘制的实际图像使用与QIcon相同的算法。

图像从不放大,但在必要时总是缩小。

如果指定了svg,则图像会被缩放为内容矩形的大小。

警告:渲染SVG图像需要QIcon SVG插件。

隐式设置down-button的大小为spindown.png的大小    
image-position Alignment 图像位置的对齐方式
lineedit-password-character* Number

QLineEdit密码字符作为Unicode数字。

如果没有指定此属性,

它默认为SH_LineEdit_PasswordCharacter样式

提示的当前样式所指定的值。

lineedit-password-mask-delay* Number

在lineedit-password-character应用到可见字符之前,

QLineEdit密码掩码延迟毫秒。

如果未指定此属性,

它默认为SH_LineEdit_PasswordMaskDelay

样式提示的当前样式所指定的值。

margin Box Lengths 设置元素的4个外边距。相当于指定margin-top、margin-right、margin-bottom和margin-left。
margin-top Length 上边距
margin-right Length 右边距
margin-bottom Length 下边距
margin-left Length 左边距
max-height Length 小部件或子控件(例如Item)的最大高度。
max-width Length 小部件或子控件(例如Item)的最大宽度。
min-height Length 小部件或子控件(例如Item)的最小高度。
min-width Length 小部件或子控件(例如Item)的最小宽度。
messagebox-text-interaction-flags* Number

消息框中文本的交互行为。可能的值基于Qt::TextInteractionFlags。如果未指定此属性,

则默认为SH_MessageBox_TextInteractionFlags样式

提示的当前样式所指定的值。

opacity* Number

小部件的不透明度。取值范围为0(透明)~ 255(不透明)。

目前,这只支持tooltips。如果未指定此属性,它默认为SH_ToolTipLabel_Opacity样式提示的当前样式指定的值。

outline   边框的轮廓
outline-color Color 轮廓的颜色
outline-offset Length 轮廓与小部件边界的偏移量
outline-style   指定用于绘制轮廓的模式
outline-radius   在轮廓中添加圆角
outline-bottom-left-radius Radius 轮廓左下角的圆角
outline-bottom-right-radius Radius 轮廓右下角的圆角
outline-top-right-radius Radius 轮廓右上角的圆角
outline-top-left-radius Radius 轮廓左上角的圆角
padding Box Lengths

小部件的填充。

相当于指定填充顶部、填充右侧、填充底部和填充左侧。

如果未指定此属性,则默认为0。

padding-top Length 顶部填充
padding-right Length 右侧填充
padding-bottom Length 底部填充
padding-left Length 左侧填充
paint-alternating-row-colors-for-empty-area bool QTreeView是否为空区域(即没有项目的区域)绘制交替的行色
posotion relative | absolute

使用左、右、上和下指定的偏移量是相对坐标还是绝对坐标。

如果未指定此属性,则默认为relative。

selection-background-color* Brush

所选文本或项的背景。如果未设置此属性,

则默认值是为调色板palette的Highlight角色设置的值。

selection-color* Brush

所选文本或项的前景。如果未设置此属性,

则默认值是为调色板palette的HighlightedText角色设置的值。

show-decoration-selected* Boolean

控制QListView中的选择是覆盖整行还是仅覆盖文本的范围。

如果未指定此属性,它默认为SH_ItemView_ShowDecorationSelected样式

提示的当前样式指定的值。

spacing* Length 小部件中的内部间距。
subcontrol-origin* Origin

父元素中子控件的起始矩形。如果未指定此属性,

则默认为填充。

subcontrol-position* Alignment

子控件在subcontrol-origin指定的原点矩形内的对齐。

如果未指定此属性,则默认为依赖于子控件的值。

titlebar-show-tooltips-on-buttons bool 工具提示是否显示在窗口标题栏按钮上。
widget-animation-duration* Number

动画应该持续多长时间(以毫秒为单位)。

值等于零意味着动画将被禁用。

如果没有指定此属性,

它默认为SH_Widget_Animation_Duration样式

提示的当前样式指定的值。

text-align Alignment 小部件内容中的文本和图标的对齐方式。
text-decoration none
underline
overline
line-through
附加文本效果
-qt-background-role PaletteRole 基于所选角色的子控件或小部件的背景色。
-qt-style-features list

要在其上应用特定于qt的样式的CSS属性列表。

注意:列表只能包含非基于像素图的属性。

5. QT官方参考网站 

Qt Style Sheets Reference | Qt Widgets 6.5.2

Qt Widgets 6.5.2

Qt Style Sheets Examples | Qt Widgets 5.15.14

QSS在线测试CSS background-clip 属性 (w3school.com.cn)

6. 常见冲突(样式不生效原因)

        》 多次设置样式,造成以为新设置的样式不生效

        》父级设置样式会覆盖子级设置的样式

结论:

        本文主要介绍了QT样式表的语法、用法、selector的设置、属性列表及QT官方的参考网站!

希望对各位QTUI爱好者一点点帮助!

感谢各位小伙伴的点赞+关注,小易会继续努力分享,一起进步!

你的赞赏是我的最最最最大的动力(^U^)ノ~YO

你可能感兴趣的:(Qt界面设计,qt,开发语言)