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

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

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

---

前言

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

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

你的点赞就是我的动力(＾Ｕ＾)ノ~ＹＯ

我将收获到的：

        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爱好者一点点帮助！

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

你的赞赏是我的最最最最大的动力(＾Ｕ＾)ノ~ＹＯ