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

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

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

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

初涉QSS

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

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

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

例子实战

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

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

关闭按钮增加 样式

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

代码中首先使用了

#btn_close_window

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

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

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

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

{ background-color:transparent; }

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

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

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

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

关闭按钮效果图

嗯,看着效果还不错呢~

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

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

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

一起来学习吧

什么是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种高级类型。

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

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

图片来自网络,侵删

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

快乐编程,快乐成长!

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页