QT基础:63---Qt样式表（setStyleSheet函数、.qss文件）

概念

• Qt样式表（style sheet）适用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的CSS启发而来，不过Qt样式表是应用于窗体界面的
• 与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义，从而使应用程序的界面呈现不同的效果
• 样式表具有继承关系，例如为一个QWidget类设置了样式表，那么QWidget类及其子类都会使用这个样式表
• 很多软件有换肤功能，就是使用类似于样式表的功能

一、Qt样式表的句法

①一般句法格式

• 与CSS句法几乎完全相同
• 一个样式法由一个“选择器”和一些“声明”组成

例如，对一个QPlainTextEdit组建进行样式设计

②选择器（selector）

 Qt样式表支持CSS2中定义的所有的选择器，见下图

• 案例1：下面的样式同时应用于QPlainTextEdit、QLineEdit、QPushButton、QCheckBox

• 案例2：下面的样式应用于readOnly属性为true的QLineEdit和checked属性为true的QCheckBox

• 案例3：为一个界面组件使用QObject::setProperty()设置一个动态属性，下面为这3个组件设置一个“required”属性为true

那么下面的样式将应用于属性“required”为true的组件

③子控件（sub-controls）

• 何为子控件：Qt中有一些组合的界面组件，例如QComboBox的下拉按钮或QSpinBox的上、下调节按钮，这些按钮就是子控件
• 子控件使用伪状态：见下面④
• 案例1：下面是对QComboBox的下拉按钮设置样式（可以看到默认的下拉按钮被设置为我们制定的图片了）

• 案例2：下面是对QSpinBox的上下调节按钮设置样式（可以看到上下调节按钮被改变了）

Qt中常见的子控件：

④伪状态（pseudo-states）

• 概念：选择器可以包含伪状态，使得样式法则只能应用于界面组件的某个状态，也就是一种条件应用法则
• 格式：伪状态出现在选择器的后面，用一个分号（:）隔开
• 基本使用：下面是当鼠标移动到QLineEdit上方时（hover），改变QLineEdit的背景色和前景色

• 伪状态取反：在伪状态前加一个感叹号。例如下面是定义了readonly属性为false的QLineEdit的背景色

• 伪状态串联使用：相当于“逻辑与”的计算。下面是当鼠标移动到一个被勾选了的QCheckBox组件上方时，其样式

• 伪状态并联使用：相当于“逻辑或”。下面表示当鼠标移动到QCheckBox上方或者QCheckBox组件被勾选时，样式都被应用

• 子控件使用伪状态：例如下面定义了QCheckBox的indicator在checked和unchecked两种状态下显示的图片

Qt样式表中常见的伪状态：

⑤属性

•  通过①我们可以知道一个选择可以有多条样式规则，每个规则就是一个属性。Qt样式表中定义的属性很多，可以在Qt的帮助文件中查找“Qt Style Sheets Reference”查看所有属性的详细说明

组件的盒子模型：

• 每个界面组件都可以用下面的盒子模型来表示，模型由四个同心矩形表示：
• 缺省的情况下，margin、border-width、padding属性缺省值为0，这种情况下，四个同心矩形就是重合的一个矩形

• CONTENT属性：是显示内容矩形区域，如QLineEdit用于显示文字的区域，min-width、max-width、min-height和max-height属性定义最大/最小宽度或高度，就是定义这个矩形区。例如：

• PADDING属性：是包围content的矩形区域，通过padding属性可以定义padding的宽度，padding-top、padding-bottom、padding-left、padding-right分别定义padding的上下左右。例如：

• BORDER属性：是包围padding的边框，通过border属性（border-width、border-style、border-color）可以定义边框的线宽、、线型和颜色，也可以分别定义border的上、下、左、右的线宽和颜色。使用border-radius可以定义边框转角的圆弧半径，从而构造具有圆角矩形的编辑或按钮等组件。例如：

通过border-radius、min-width、min-height等属性可以设计圆形的按钮，例如：

通过border-image属性还可以为组件设置背景图片，图片会天宠border矩形框之内的区域，一般使用材质图片设置背景，以使界面具有统一的特点。例如：

• MARGIN属性：是border之外的父组件之间的空白边距，可以分别定义上、下、左、右的边距大小

二、样式表的使用

方式一：

• 在Qt Designer设计窗体时，直接用样式表编辑器为窗体或窗体上的某个部件设计样式表
• 这种方法的样式保存在窗体的ui文件里，窗体创建时会自动应用所涉及的样式表
• 缺点：这样设计的样式表对应用程序是固定的，无法取得换肤的效果，而且需要为每个窗体都涉及样式表，重复性工作太大
• 方法：右击窗体或某个部件→选择“Change styleSheet”。（例如下面是设置QWidget类的背景颜色、字体大小等与QLineEdit类的显示效果）

样式表设计框的附加功能

• “Add Resource”：点击下拉列表箭头。可以从项目的资源文件中选择图片作为background-image、border-image或image属性的值
• “Add Color”：点击下拉列表箭头。可以设置组件的各种颜色，包括前景色、背景色、边框颜色等

演示案例：

• 将3个按钮，赋值3个图片，用来模仿视频播放器的按钮

方式二（setStyleSheet函数）

• ①使用qApp的setStyleSheet函数可以为应用程序全局设置样式。例如下面为应用程序的QLineEdit组件设置样式

• ②使用QWidget::setStyleSheet函数可以为一个窗口、一个对话框、一个界面组件设置样式。例如下面为主窗口MainWindow内的QLineEdit组件设置样式

• ③单独设置一个Object对象的样式表。这种情况无需设置selector（选择器）的名称。例如下面是设置一个名为editName的QLineEdit组件的样式

如果使用setStyleSheet函数为应用程序/组件设置了样式表，想要取消样式表，就使用setStyleSheet将参数设置为空，就代表取消样式表。例如

xxx->setStyleSheet("");

方式三（.qss文件）

• 上面几种方式都是将样式表固定在程序中，无法实现切换界面的效果
• 为了实现动态切换样式表，一般将样式定义保存为.qss后缀的纯文本文件，然后再程序中打开文件，读取文件内容，再调用setStyleSheet函数应用样式表

示例代码如下：

三、样式的冲突与明确性

样式冲突：

• 当多条样式法则对一个属性定义了不同值时，就会出现冲突。例如：

• 上面这两条法则都应用于QObjectName为btnSave的QPushButton。但是根据选择器的明确性，本案例中，QPushButton#btnSave被认为势必QPushButton更明确的选择器

样式的明确性

为了避免样式冲突，系统定义了以下一系列的样式明确性

确定法则的明确性，Qt样式表遵循CSS2的规定

• ①具有伪状态的选择器被认为比没有伪状态的选择器明确性更强。例如：下面第一个生效

• ②如果两个选择器具有相同的明确性，则以法则出现的先后顺序为准，后出现的法则起作用。例如：下面的第二个生效

在这种情况下，如果不希望冲突，应该修改法则以使其更明确，如下面这两条法则就不冲突

• ③父子关系的两个类作为选择器，具有相同的明确性。例如：下面两个选择器的明确性相同，所以只依赖于语句的先后顺序，因此第二个生效

四、样式定义的级联性

规则：

• 样式定义可以在qApp、窗口或一个具体组件中定义，任何一个组件的样式是其父组件、父窗口和qApp的样式的融合
• 当出现冲突时，组件会使用离自己最近的样式定义，即按顺序使用组件自己的样式、或父组件的样式定义、或父窗口的样式定义，或qApp的样式定义，而不考虑样式选择器的确定性

例如：

• 第一步：在QApplication中设置全局样式：那么应用程序中所有未再定义样式的QPushButton的前景颜色为red

• 第二步：如果在MainWindows中再定义以下样式：则MainWindow上的按钮的前景色为blue，而不是red

• 第三步：如果MainWindows上有一个名称为btnSave的QPushButton按钮，其定义样式如下：则按钮btnSave按照自己的样式显示前景和背景色