qt框架入门（木辛老师的编程课堂之Python和Qt实战慕课软件开发）

美观的软件界面，可以有效的提升用户粘性；PyQt中使用QSS可以快速、简单的实现修改控件的样式。快点跟着木辛老师一起学习吧！

请点击右上角“关注”按钮关注我们哟：跟着木辛老师学习Python编程知识，变身快乐的编程达人吧~

上一节课，我们给大家留了一个问题：如何将关闭按钮的边框去掉。

初涉QSS

为了解决这个问题，需要先给大家讲解一个新的知识点，就是Qt的样式表：QSS。

QSS是用来自定义控件外观的一种机制，它参考了CSS的很多内容，但是QSS的功能要比CSS的弱很多，主要体现在选择器比较少、属性比较少，而且并不是所有的属性都能应用到Qt的控件上。

不过，使用QSS来美化Qt的控件，可以实现页面的美化和代码分开，有非常有利于后期代码维护的。

例子实战

就先以关闭按钮为例，来看一下通过使用QSS如何实现将其边框隐藏吧。代码可以这么写：

关闭按钮增加 样式

首先定义了一个变量：qss_style，这个变量使用三重引号字符串定义了多行属性。

代码中首先使用了

#btn_close_window

以#号开头的这种方式，是QSS选择器中的一种，叫做ID选择器。

#btn_close_window会获取所有ID为btn_close_window的控件，这里的ID就是定义的控件的名字，是在Qt Designer工具的属性编辑器中的objectName指定的值。

通过这种方式，Qt就可以获取到关闭按钮的实例，从而可以为这个控件增加样式；

所以，紧接着下方的代码块

{ background-color:transparent; }

就是定义了，这个按钮的背景颜色是透明样式。

定义好了按钮样式之后，需要将这个定义通过setStyleSheet方法传入主窗口的，才可以生效哟！

让我们来运行一下程序看看效果吧~

关闭按钮效果图

嗯，看着效果还不错呢~

我们初步完成了按钮样式的学习，关闭按钮部分也非常美观的矗立在主窗口中了。

接下来呢，木辛老师将会带领大家进一步学习一下有关QSS的知识。

一起来学习吧

什么是QSS

通过刚才的实例，我们看到了QSS的语法规则和CSS的很相像，也是由两部分组成：

1. 选择器
2. 声明

其中选择器是指定需要修改哪些控件的样式；而声明部分则是指定哪些属性应该设置于控件之上。声明这一部分内容，是“属性:值”对的方式存在，且需要是使用分号（；）分隔不同属性值，使用大括号（{}）将所有的声明包含在内。

QSS选择器类型

在上方的实例中，我们介绍了ID选择器；其实呀，在QSS中，选择器的类型还有好多：

1. 通配符选择器：*，可以匹配所有的控件
2. 类型选择器：QPushButton，匹配所有的QPushButton类及其子类的实例
3. 属性选择器：QPushButton[name=“btn_close_window”]，匹配所有的name属性是btn_close_window的QPushButton实例
4. 类选择器：.QPushButton，匹配所有的QPushButton实例，但是不会匹配器子类。一定要留意前边的一个点号哟！
5. ID选择器：就是前面实例中提到的
6. 后代选择器：QDialog QPushButton，匹配所有的QDialog容器中包含的QPushButton控件
7. 子选择器：QDialog > QPushButton，匹配所有的QDialog容器中包含的QPushButton，其中QDialog必须是QPushButton的直接父容器

QSS中的所有的选择器都是可以联合使用的，并且支持一次设置很多种选择器类型哟！不过呢，要使用英文的逗号分隔开。

比如像这样

#btn_close_window,#btn_register,#lbl_show_title

表示这些ID使用同一个规则；

#main_window QPushButton

表示选择所有ID为main_window的容器中包含的所有的QPushButton控件。

QSS的子控件

在PyQt的开发过程中，会遇到一些比较复杂的复合控件，比如QComboBox，QListWidget。这个时候我们可能需要定义一些比较复杂的样式，比如修改控件的下拉箭头的图片，滚动条的样式等。

为了应对这些需求，QSS提供了子控件选择器，其应用在一些复合控件上，可以比较简单的定义不同状态的样式。比如：

QComboBox::drop-down { image : url(dropdown.png) }

这个样式就定义了所有QComboBox的下拉箭头的图片，图片文件为dropdown.png。

需要注意的是：子控件选择器实际上是选择复合器的一部分，只是对复合控件的一部分应用样式，就像刚才我们提到的为QComboBox的下拉箭头替换图片那样。

QSS的伪装态

还有一种情况，在使用软件的过程中，如果用户将鼠标放置到某个控件上，可能希望等发生一些变化，比如：当鼠标经过某个控件的时候，该控件的背景色改成红色等等；或者下拉列表选中，或者改变焦点的时候采用不同样式，选中或者非选中状态下的样式等等。

针对这种情况下的样式修改，QSS提供伪装态选择器来解决。

QSS伪装态选择器是以冒号开头的一个选择表达式，比如

:hover

表示当鼠标经过的时候的状态。伪装态选择器限制了当控件处于某一种状态时才可以使用的QSS规则，它只能描述一个空着或者一个符合控件的子控件的状态，所以，只能将其放在选择器的最后边。举个例子：

QComboBox:hover { background-color: red; }

这一句表示的是，当鼠标经过QComboBox的时候，背景色变化为红色，该伪装态 :hover描述的就是QComboBox的状态。

再举另外一个例子：

QComboBox::drop-down:hover { background-color: red; }

这一句则表示：鼠标经过QComboBox的下拉箭头的时候，该下拉箭头编程红色。

另外，伪装态还可以使用一个感叹号来表示状态，比如鼠标没有经过某个控件的时候触发的状态可以使用 :!hover表示，代码可以这么写：

QComboBox:!hover { background-color: green;}

这一句表示：当鼠标没有经过QComboBox的时候，这个控件的背景色是绿色的。

好了，今天的课程咱们就先讲到这里吧！

课程回顾

今天的课程，主要讲了如何使用QSS改变控件的样式；另外还讲了QSS选择器的6种基本类型和2种高级类型。

希望大家通过木辛老师的课程，牢固掌握基础知识；并通过今天的课程中例子，多多练习哟！

图片来自网络，侵删

请持续关注木辛老师的编程课哟，后续更多精彩陆续到来！

快乐编程，快乐成长！

,