1. Label:标签控件
1.1 简介
标签控件主要用于显示用户不能编辑的文本,标识窗体上的对象(例如:给文本框、列表框添加,描述信息等)。它对应PyQt5中的QLabel类,Label控件在本质上是QLabel类的一个对象。
在Qt Designer设计器中,它的图标如下图所示:
1.2 设置标签文本
有2种方法可以设置标签控件显示的文本:
方法1,直接在Qt Designer设计器的属性编辑器中设置它的text属性。如下图所示:
方法2,通过Python代码进行设置:
# 通过setText()方法将标签控件的显示内容设为“hello world”
self.label.setText('hello world')
1.3 设置标签控件内文本的对齐方式
PyQt5中支持设置标签中文本的对齐方式,主要用到alignment属性。在Qt Designer设计器的属性编辑器中展开alignment属性,可以看到有2个值,分别为Horizontal(水平的)和Vertical(垂直的)。
其中,Horizontal表示水平对齐,取值有4个,如下表所示:
取值 | 说明 |
AlignLeft | 左对齐 |
AlignHCenter | 水平居中对齐 |
AlignRight | 右对齐 |
AlignJustify | 两端对齐(效果同AlignLeft) |
在Qt Designer设计器中的位置如下图所示:
不同取值的效果如下图所示:
以上是在属性编辑器中直接设置其属性的方法,除此之外,还有2种方法:
方法2:我们单击窗口中的Label控件,然后再单击右键菜单中的“改变多信息文本”,弹出一个编辑文本的窗口,在这个窗口的顶栏中有4种对齐方式可以设置,从左到右分别是:左对齐,中央对齐,右对齐,自动调整。
方法3:Python代码设置,写法都是一样的,只需要修改末尾最后一个单词即可,具体示例代码如下:
# AlignLeft:左对齐
self.label.setAlignment(QtCore.Qt.AlignLeft)# AlignHCenter:水平居中对齐
self.label.setAlignment(QtCore.Qt.AlignHCenter)# AlignRight:右对齐
self.label.setAlignment(QtCore.Qt.AlignRight)# AlignJustify:两端对齐(效果同AlignLeft)
self.label.setAlignment(QtCore.Qt.AlignJustify)
代码运行效果如下图所示(为方便辨识,我将标签控件的背景色改成了粉色):
可以看到,它们都是在顶部左对齐、水平居中对齐、右对齐,而且是贴边的,这样很不美观,也不是我们想要的结果。
所以就需要结合Vertical了,Vertical是用来设置标签文本的垂直对齐方式,取值有3个。如下表:
取值 | 说明 |
AlignTop | 顶部对齐 |
AlignVCenter | 垂直居中对齐 |
AlignBottom | 底部对齐 |
在Qt Designer设计器中的位置如下图所示:
不同取值的效果如下图所示:
可以看到,Vertical是上中下变化,而Horizontal是左中右变化。所以只要将它们2个结合起来,就能实现真正的居中。示例代码如下:
# 水平垂直居中
self.label.setAlignment(QtCore.Qt.AlignHCenter | QtCore.Qt.AlignVCenter)
代码运行效果如下图所示:
1.4 设置文本换行显示
假设将标签文本改为“路虽远行则将至,事虽难做则必成”,在标签宽度不足的情况下,系统会默认只显示前面部分文字。遇到这种情况时,我们就需要用到换行显示了。
换行显示是标签控件的属性之一,在Qt Designer设计器的属性编辑器中,将wordWrap属性后面的复选框选中即可实现换行显示。如下图:
当然也可以用Python代码实现:
# 通过QLabel类的setWordWrap()方法将文本设为换行显示
self.label.setWordWrap(True)
1.5 为标签设置超链接
为Label标签设置超链接时,可以直接在QLabel类的setText()方法中使用HTML中的<a>标签设置超链接文本,然后将Label标签中的setOpenExternalLinks()方法设置为True,以便允许访问超链接,示例代码如下:
# 设置跳转链接和超链接文本(注意双引号和单引号)
self.label.setText("<a href = 'https://www.baidu.com/'> 百度一下,你就知道 </a>")# 启用跳转
self.label.setOpenExternalLinks(True)
代码运行后,标签内的文本会变成蓝色,并且带有下划线。当你单击文本后,则会立即跳转到目标网址。
1.6 为标签设置图片
为Label标签设置图片时,需要使用QLabel类的setPixmap()方法,该方法中需要有一个QPixmap对象,表示图标对象。示例代码如下:
# 导入QPixmap类
from PyQt5.QtGui import QPixmap# 通过setPixmap()方法将名为abc的图片在标签内显示出来
self.label.setPixmap(QPixmap('abc.png'))
代码运行后效果如下图(为提高辨识,标签提前设置了水平布局,所以覆盖了整个窗口):
需要注意的是,该图片文件为png格式,并且放置在代码的同级路径下。另外,在PyQt5中暂不支持该方法显示jpg格式的图片,你可以通过其它工具先将格式转换成png,然后再显示。
1.7 为标签设置气泡提示信息
气泡提示就是当你把光标移动到某个控件上时,会弹出一个提示框。光标移开时,提示框又会自动消失,多数用于解释说明。写在这里只是想告诉你有这么个方法,而不仅局限于标签控件哦~
# 使用该方法需要导入2个模块:QToolTip和QFont
from PyQt5.QtWidgets import QToolTip
from PyQt5.QtGui import QFont# 设置气泡提示内容为“这是李白写的诗”
self.label.setToolTip('这是李白写的诗')# 设置提示文本的字体为微软雅黑,字号为12
QToolTip.setFont(QFont('微软雅黑', 12))
代码运行效果如下图所示:
2. LineEdit:单行文本框
2.1 简介
LineEdit是单行文本框,可以从字面意思理解,即:它只能输入单行字符串。它在Qt Designer设计器中的图标如下图所示:
LineEdit控件对应PyQt5中的QLineEdit类,该类的常用方法和说明如下表所示:
方法 | 说明 |
setText() | 设置文本框内容 |
text() | 获取文本框内容 |
setPlaceholderText() | 设置文本框内浮现文字 |
setMaxLength() | 设置允许文本框内输入字符的最大长度 |
setAlignment() | 设置文本对齐方式 |
setReadOnly() | 设置文本框内容为只读模式 |
setFocus() | 使文本框得到焦点 |
setEchoMode() | 设置文本框显示字符的模式,有以下4种模式: 1.QLineEdit.Normal:正常显示输入的字符,这是默认设置 2. QLineEdit.NoEcho:不显示任何输入的字符,适用于即使符合密码长度也需要保密的密码 3. QLineEdit.Password:显示与平台相关的密码掩码字符,而不是实际输入的字符 4. QLineEdit.PasswordEchoOnEdit:在编辑时显示字符,失去焦点后显示密码掩码字符 |
setValidator() | 设置文本框验证器,有以下3种模式: 1. QIntValidator:限制输入整数 2. QDoubleValidator:限制输入小数 3. QRegExpValidator:检查输入是否符合设置的正则表达式 |
setInputMask() | 设置掩码,掩码通常由掩码字符和分隔符组成,后面可以跟一个分号和空白字符,空白字符在编辑完成后会从文本框中删除,常用的掩码有以下3种形式: 1. 日期掩码:0000-00-00 2. 时间掩码:00:00:00 3. 序列号掩码:>AAAAA-AAAAA-AAAAA-AAAAA-AAAAA;# |
clear() | 清除文本框内容 |
QLineEdit类的常用信号及说明如下表所示:
信号 | 说明 |
textChanged() | 当更改文本框中的内容时发射该信号 |
editingFinished() | 当文本框中的内容编辑结束时发射该信号,以按下<Enter>键为编辑结束标志 |
2.2 实例:包括用户名和密码的登录窗口
使用LineEdit控件,并结合Label控件制作一个简单的登录窗口,其中包含用户名和密码输入框。密码要求是8位数字,并且以掩码形式显示,步骤如下:
步骤1. 打开Qt Designer设计器,根据需求,从工具箱向主窗口中放入两个Label控件与两个LineEdit控件,然后分别将两个Label控件的text值修改为“用户名:”和“密码:”。如下图所示:
步骤2. 设计完成后,保存为.ui文件,使用PyUIC工具将其转换为.py文件,并在表示密码的LineEdit文本框下面使用setEchoMode()方法将其设置为密码文本,同时使用setValidator()方法为其设置验证器,控制只能输入8位数字,代码如下:
# 设置文本框为密码
self.lineEdit_2.setEchoMode(QtWidgets.QLineEdit.Password)# 限制只能输入8位数字
self.lineEdit_2.setValidator(QtGui.QIntValidator(10000000, 99999999))
代码运行后并输入内容,效果如下图所示:
当然,这些属性也都可以直接在Qt Designer设计器的属性编辑器中设置,如下图所示:
细心的读者可能已经发现,属性编辑器中的属性名称基本对应着方法的名称。在实践时,你可以根据自己的喜好习惯去选择使用。
有些属性你可能感觉很陌生,那就不妨在设计器中点选尝试,同时观察控件的变化,你就能知道这个属性有什么用处了。
另外提醒一下,有些属性可能对控件外观并没有直接影响,这时候你就需要通过预览窗口来进一步观察了。
预览有2种方式,方式1:按Ctrl + R进行预览,方式2:鼠标单击Qt Designer设计器顶部的菜单栏中“窗体(O)”,在下拉弹窗中再单击“预览(P)…”即可预览。如下图:
2.3 textChanged信号
textChanged信号在一些要求输入值时实时执行操作的场景下使用,比如在网上购物时,更改购买商品的数量,总价格就会实时变化。
如果你设计时遇到类似这样的功能需求,就可以通过LineEdit控件中的textChanged信号来实现。
实例演示:假设牙刷2元1支,我需要购买100支。当我输入数量100时,下面标签控件实时显示出我需要支付200元。
代码如下:
# 1self.lineEdit.setValidator(QtGui.QIntValidator(10000000, 99999999))# 2self.lineEdit.textChanged.connect(self.total_price)# 3
def total_price(self):# 4n = self.lineEdit.text()# 5buy_number = int(n)# 6self.label_4.setText(str(buy_number*2))
因篇幅较长,详细注释如下:
# 1:限制单行输入框只能输入8位数字。因为购买数量也必须是数字,所以这里代码不变。
# 2:将单行输入框的textChanged信号和下面的自定义函数total_price关联起来,关联函数是connect()。
# 3:准备定义一个名为total_price的函数,参数默认为self。
# 4:获取单行输入框的内容并赋值给变量n。
# 5:由于通过text()函数获取的数据类型是字符串,这里通过int()函数转换成整型。
# 6:label_4是显示最终需要支付价格的标签控件,将数量buy_number乘以价格2元之后得到一个总价格是整型,但setText()函数的参数类型是字符串,所以我们计算完还要将结果再转换回字符串。通过setText()函数将label_4显示的内容变为需要支付的价格。
代码运行后,我们在输入框内输入数量100,下面的label_4标签控件就实时显示出需要支付的钱啦~ 如下图所示:
这里的代码讲解非常基础,希望刚上手PyQt的小伙伴能够理解并掌握,后面不再细讲。
3. TextEdit:多行文本框
3.1 简介
有单行输入框,那么就会有多行输入框,而TextEdit就是多行文本框控件。它主要用来显示多行的文本内容,当文本内容超出控件的显示范围时,该控件会自动显示滚动条。
另外,TextEdit控件不仅可以显示纯文本内容,还支持显示HTML网页。
TextEdit控件在Qt Designer设计器中的图标如下所示:
TextEdit控件对应PyQt5中的QTextEdit类,该类的常用方法及说明如下表:
方法 | 说明 |
setPlainText() | 设置文本内容 |
toPlainText() | 获取文本内容 |
setTextColor() | 设置文本颜色,例:QtGui.QColor(255,0,0) |
setTextBackgroundColor() | 设置文本背景色,参数同setTextColor() |
setHtml() | 设置HTML文档内容 |
toHtml() | 获取HTML文档内容 |
setWordWrapMode() | 设置自动换行 |
clear() | 清除所有内容 |
3.2 实例:设置多行文本和HTML文本的对比显示
使用Qt Designer设计器创建一个MainWindow窗口,其中添加2个TextEdit控件,然后保存为.ui文件,使用PyUIC工具将其转换为.py文件。
然后分别使用setPlainText()方法和setHtml()方法为2个TextEdit控件设置要显示的文本内容,代码如下:
# 设置纯文本显示
self.textEdit.setPlainText('假如生活欺骗了你''不要悲伤,不要心急!''忧郁的日子里需要镇静:''相信吧,快乐的日子将会来临。''心儿永远向往着未来,''现在却常是忧郁;''一切都是瞬息,''一切都将会过去,''而那过去了的,''就会成为亲切的回忆。')# 设置HTML文本显示
self.textEdit_2.setHtml(
"假如生活欺骗了你 "
"<font color = 'red' size = 10>
不要悲伤,不要心急!忧郁的日子里需要镇静:相信吧,快乐的日子将会来临。
</font>"
"心儿永远向往着未来,现在却常是忧郁;一切都是瞬息,一切都将会过去,而那过去了的,就会成为亲切的回忆。")
运行效果如下图:
4. SpinBox:整数数字选择控件
4.1 简介
SpinBox是一个整数数字选择控件,该控件提供了一对上下箭头,用户可以单击上下箭头选择数值,也可以直接输入。
如果输入的数值大于设置的最大值,或者小于设置的最小值,SpinBox将不会接受输入。SpinBox控件在Qt Designer中的图标如下图所示:
SpinBox控件对应PyQt5中的QSpinBox类,该类常用方法及说明如下表:
方法 | 说明 |
setValue() | 设置当前值 |
setMaximum() | 设置最大值 |
setMinimum() | 设置最小值 |
setRange() | 设置取值范围(包括最大值与最小值) |
setSingleStep() | 设置单击上下箭头时的步长值 |
value() | 获取控件中的值 |
在默认情况下,SpinBox控件的取值范围是0~99,步长值是1。
在单击SpinBox控件的上下箭头时,可以通过发射valueChanged信号,获取控件中的当前值。
4.2 实例:获取SpinBox中选择的数字
使用Qt Designer设计器创建一个MainWindow窗口,其中添加2个Label控件和1个SpinBox控件,然后保存为.ui文件,使用PyUIC工具将其转换为.py文件。
在转换后的.py文件中,分别设置数字选择控件的最小值、最大值和步长值。
代码如下:
# 设置最小值为0
self.spinBox.setMinimum(0)# 设置最大值为100
self.spinBox.setMaximum(100)# 设置步长值为2
self.spinBox.setSingleStep(2)
我们再使用setRange()方法,简写上面的3行代码:
# 设置取值范围为:0~100
self.spinBox.setRange(0, 100)# 设置步长值为2
self.spinBox.setSingleStep(2)
虽然只减少了一行代码,但是看起来更直观一些,还是挺不错的。
下面我们自定义一个get_value函数,在函数体中我们使用value()方法获取SpinBox控件的当前值,并显示在Label标签控件中。代码如下:
def get_value(self):self.label_2.setText(str(self.spinBox.value()))
将SpinBox控件的valueChanged信号和自定义函数get_value关联起来:
self.spinBox.valueChanged.connect(self.get_value)
注意!关联代码要写在自定义函数之前。
以上代码运行结果如下图所示:
5. DoubleSpinBox:小数数字选择控件
5.1 简介
DoubleSpinBox与SpinBox类似,区别在于DoubleSpinBox是用来选择小数数字,并且默认保留2位小数。DoubleSpinBox对应PyQt5中的QDoubleSpinBox类。
DoubleSpinBox控件在Qt Designer中的图标如下图所示:
DoubleSpinBox控件和SpinBox控件的使用方法类似,由于它处理的是小数数字,因此该控件提供了一个setDecimals()方法,用于设置小数位数。
5.2 实例:设置DoubleSpinBox中的小数位数并获取选择的数字
使用Qt Designer创建一个MainWindow窗口,其中添加2个Label控件和1个DoubleSpinBox控件,然后保存为.ui文件,使用PyUIC工具将.ui文件转换为.py文件。
第一步,在.py文件中,分别设置小数数字选择控件的最小值、最大值、步长值,以及保留2位小数。代码如下:
# 设置取值范围为:0 ~ 99.99
self.doubleSpinBox.setRange(0, 99.99)# 设置步长值为:0.01
self.doubleSpinBox.setSingleStep(0.01)# 保留2位小数
self.doubleSpinBox.setDecimals(2)
第二步,自定义get_value函数,函数体中使用value()方法获取DoubleSpinBox的当前值,并显示在Label中。代码如下:
def get_value(self):self.label_2.setText(str(self.doubleSpinBox.value()))
第三步,将DoubleSpinBox的valueChanged()和自定义函数get_value关联。代码如下:
self.doubleSpinBox.valueChanged.connect(self.get_value)
注意!关联代码要写在自定义函数之前。
以上代码运行后,效果如下图所示:
6. LCDNumber:液晶数字显示控件
6.1 简介
LCDNumber控件主要用来显示液晶数字,在Qt Designer中的图标如下:
LCDNumber控件对应PyQt5中的QLCDNumber类,该类的常用方法及说明如下表:
方法 | 说明 |
setDigitCount() | 设置可以显示的数字数量 |
setProperty() | 设置相应属性的值 |
setMode() | 设置显示数字的模式,有4种模式: 1. Bin:二进制 2. Oct:八进制 3.Dec:十进制 4. Hex:十六进制 |
setSegmentStyle() | 设置显示样式,有3种样式: OutLine,Filled,Flat |
value() | 获取显示的数值 |
6.2 实例:设置液晶显示屏中的数字显示
使用Qt Designer创建一个MainWindow窗口,其中添加1个Label、1个LineEdit、1个LCDNumber。其中,LCDNumber用来显示LineEdit中输入的数字。
将设计完成的窗口保存为.ui文件,使用PyUIC工具将其转换成.py文件。在转化后的.py文件中,设置LCDNumber的最大显示数字位数、显示样式及模式。
代码如下:
# 设置最大显示7位数字
self.lcdNumber.setDigitCount(7)# 设置以十进制显示数字
self.lcdNumber.setMode(QtWidgets.QLCDNumber.Dec)# 设置数字显示屏的显示样式
self.lcdNumber.setSegmentStyle(QtWidgets.QLCDNumber.Flat)
运行看下效果:
这个Flat样式还是挺好看的。接下来,自定义一个set_value()函数,使用setProperty()方法为LCDNumber设置要显示的数字为LineEdit中输入的数字,代码如下:
def set_value(self):self.lcdNumber.setProperty('value', self.lineEdit.text())
再将自定义函数set_value()和LineEdit的editingFinished信号关联起来。这个信号的作用是:当你输入完成后按<Enter>键该信号就会发射。代码如下:
self.lineEdit.editingFinished.connect(self.set_value)
注意!关联代码要写在自定义函数之前。
以上代码运行后,我们在LineEdit中输入5201314,然后按<Enter>键。效果如下图所示:
我们在前面的代码中限制了LCDNumber最大显示7位数字,如果超过7位,那么它会以科学计数法的形式进行显示。如下图所示: