历史目录
上一篇主要介绍的就是PyQt的安装和布局,本文篇主要是对我学习 QtWidgets 中常用的控件做的一些笔记。
这里提一下什么是 QtWidgets 呢?
- 在PyQt中我们对页面的
UI设计主要就是依靠QtWidgets。他提供了一套丰富的图形用户界面(GUI)组件库
开始编辑之前,先把上一次学习的框架搭好,接下来的ui就是在MyWindow这个窗口上显示的。
import sys
from PyQt6.QtWidgets import QWidget, QApplication, QLabel, QHBoxLayout
class MyWindow(QWidget):
def __init__(self):
super().__init__()
if __name__ == '__main__':
app = QApplication(sys.argv) # 创建应用
w = MyWindow() # 实例化窗口
w.show()
app.exec()
然后呢还有一个比较重要的就是我们的官网资料啦: Getting Started - Qt for Python
QLabel 文本控件
常见的属性方法
QLabel 文本的使用
- 使用前需要导入一下
from PyQt6.QtWidgets import QLabel QLabelis used for displaying text or an image. No user interaction functionality is provided.QLabel只要用于一个显示的,不做修改的- By default, labels display left-aligned, vertically-centered text and images 默认情况下,标签显示左对齐、垂直居中的文本和图像
class MyWindow(QWidget):
def __init__(self):
super().__init__()
self.setWindowTitle('QtWidgets 中控件的使用')
self.resize(600,450)
main_layout = QVBoxLayout(self)
text_layout = QHBoxLayout()
"""
QLabel 文本的使用
1。 使用前需要导入一下 from PyQt6.QtWidgets import QLabel
2. 文本只要用于一个显示的,不做修改的
"""
self.label = QLabel('这是一个文本 \n第二行显示')
text_layout.addWidget(self.label)
main_layout.addLayout(text_layout)
那么一般文本来说,我们肯定不只是单纯显示这么一个文本的,我们会对他的位置,颜色进行一个修改。那接下来我们就参考一下官网,实现一下
1. 这里提一嘴:我们学完
QLabel一些样式,位置的用法之后,其他的空间其实方法,属性都是互通的
原来的上面是两行数据,上长下短,左对齐,现在我们想实现将文本移到最下面,然后进行右对齐
self.label.setAlignment(Qt.AlignmentFlag.AlignBottom | Qt.AlignmentFlag.AlignRight)
再给我们的文本设置一个样式: 红色,这字体大小20px,显示边框
self.label.setStyleSheet("color:red; border:1px solid #558d71; border-radius: 6px; font-size: 20px")
设置文本控件的最大显示大小 (300, 150)
# 也可以是最小显示大小 setMimimumSize()
self.label.setMaximumSize(300, 150)
可以一步一步的添加,最后的效果就是:
注意: QLabel 并非只能展示纯文本
官网给出的解释是:
- 纯文本
- 富文本
- pixmap
- 电影
- 数字
- 无
我们可以通过对应的方法去设置显示的类型,比如 setMovie() 传递一个电影,setText()传递一个字符串——文本
信号
下一篇会学什么是信号,信号是干什么用的~~~
QLineEdit && QPlainTextEdit 文本编辑框
常见的属性方法
前面提到 QLabel 是用来显示的,并不能编辑,那么接下来的两个控件就是可以对文本进行编辑的。
🎗️🎗️🎗️ 下面是基于上面的代码继续编写的
edit_layout = QHBoxLayout()
self.edit = QLineEdit() # 实例化控件
self.edit.setPlaceholderText("添加提示与") # 添加文本输入框提示
self.edit.setFixedSize(300, 20) # 修改输入框宽
edit_layout.addWidget(self.edit) # 加入布局
main_layout.addLayout(edit_layout)
setText() 和 setPlaceholderText() 是不同的,
- setText() 是用来设置文本内容的, 影响输入内容
- setPlaceholderText() 设置提示, 不影响输入内容
self.edit.setText("写入了一个文本")
执行一下,或许你就明白了
QPlainTextEdit 和 QLineEdit 从名字上区分就可以知道: QPlainTextEdit 是多行文本编辑器, QLineEdit 是单行的。
对于文本框我们一般就是会做一个文本输入的限制:
# 限制只能输入10个
self.edit.setMaxLength(10)
对于多行文本框,有时候,代码会不断往文本框添加内容,为了防止占用过多资源,可以设置文本框最大行数。
self.edit.document().setMaximumBlockCount(1000)
# 注意用之前需要先导入实例化我们的多行文本框哦,
# 我这里没有写出来,原来和上面是一样的
信号
下一篇会学什么是信号,信号是干什么用的~~~
QPushButton按钮
常见的属性方法
button_layout = QHBoxLayout()
button1 = QPushButton("普通按钮")
button2 = QPushButton("禁用按钮")
button2.setDisabled(True)
button3 = QPushButton()
button3.setIcon(QIcon("../image/home-login-bg.jpg"))
button_layout.addWidget(button1)
button_layout.addWidget(button2)
button_layout.addWidget(button3)
main_layout.addLayout(button_layout)
这里提一下我们也不一定要使用QIcon添加icon,我们可以使用输入法自带的,也也要可以实现
button1 = QPushButton("😊普通按钮")
信号
对于按钮,我们更多的接触到的就是点击触发什么事件(方法),这个怎么实现的呢?其实这就涉及到 信号与槽 的概念了,什么是信号? 什么是槽? 如何将 信号 和 槽 想关联。
下一篇会学什么是信号,信号是干什么用的~~~
QComboBox
下拉框的实现
select = QComboBox()
select.addItem("上午")
select.addItem("下午")
select.addItem("晚上")
select.addItem("凌晨")
edit_layout.addWidget(select)
当然我们也可以以列表的形式写入,效果也是一样的
select.addItems(['上午', '下午', '晚上', '凌晨'])
其他按钮控件
单选 QRadioButton
同一个父窗口里面的多个单选按钮,只能选中一项。如果你有多组单选按钮, 每组都应该有不同的父控件,或者不同的Layout。
通常建议:多组单选按钮,放到不同的 按钮组
QButtonGroup中
什么意思呢? 比如说 (男,女,未知),(小学,中学,大学)很显然这是两个不同组别的选项,但是如果我们把他都放在同一个 QButtonGroup 就会出现六个选项中只能选择一个,显然是不合理的。
接下来我们合理实现一下代码
group1_layout = QHBoxLayout()
# ========================== QRadioButton单选 ===============================
radio1 = QRadioButton("男",self)
radio2 = QRadioButton("女",self)
radio3 = QRadioButton("未知",self)
group1 = QButtonGroup(self)
group1.addButton(radio1)
group1.addButton(radio2)
group1.addButton(radio3)
group1.setExclusive(True) # 设置互斥,只能选择一个
group1_layout.addWidget(radio1)
group1_layout.addWidget(radio2)
group1_layout.addWidget(radio3)
group2_layout = QHBoxLayout()
radio4 = QRadioButton("小学",self)
radio5 = QRadioButton("初中",self)
radio6 = QRadioButton("高中",self)
group2 = QButtonGroup(self)
group2.addButton(radio4)
group2.addButton(radio5)
group2.addButton(radio6)
group2.setExclusive(True) # 设置互斥,只能选择一个
group2_layout.addWidget(radio4)
group2_layout.addWidget(radio5)
group2_layout.addWidget(radio6)
多选 QCheckBox
多选也是一个原理
check_layout = QHBoxLayout()
check1 = QCheckBox("鸡蛋",self)
check2 = QCheckBox("香肠",self)
check3 = QCheckBox("豆浆",self)
check4 = QCheckBox("面包",self)
check = QButtonGroup(self)
check.addButton(check1)
check.addButton(check2)
check.addButton(check3)
check.addButton(check4)
check.setExclusive(False)
check_layout.addWidget(check1)
check_layout.addWidget(check2)
check_layout.addWidget(check3)
check_layout.addWidget(check4)
left_layout.addLayout(check_layout)
tab 页
tab 主要用于实现控件分页
使用QTabWidget的常用方法是执行一下操作:
- (1)创建一个QTabWidget实例
- (2)为选项卡对话框中的每个页面创建一个QWidget,不要为它们指定父类,及括号中为空。
- (3)将小部件添加到QWidget页面中,并先用布局管理器接管。
- (4)调用addTab()函数或者insertTab()函数将QWidget页面放入选项卡控件中。
tab_layout = QHBoxLayout()
tab_widget = QTabWidget(self)
tab1 = QWidget()
tab2 = QWidget()
tab3 = QWidget()
QLabel("页面1",tab1)
QLabel("页面2",tab2)
QLabel("页面3",tab3)
tab_widget.addTab(tab1,"页面1")
tab_widget.addTab(tab2,"页面2")
tab_widget.addTab(tab3,"页面3")
tab_layout.addWidget(tab_widget)
left_layout.addLayout(tab_layout)
QListWidget 和 QListWidgetItem 列表
列表控件通常用于目录
list1 = QListWidget(tab1)
list1.addItem("一")
i1 = QListWidgetItem("fir",list1)
i2 = QListWidgetItem("sec",list1)
i3 = QListWidgetItem("thr",list1)
list1.setCurrentItem(i1)
list1.setCurrentItem(i2)
list1.setCurrentItem(i3)
QLabel("页面2",tab2)
QLabel("页面3",tab3)
tab_widget.addTab(tab1,"页面1")
tab_widget.addTab(tab2,"页面2")
tab_widget.addTab(tab3,"页面3")
tab_layout.addWidget(tab_widget)
left_layout.addLayout(tab_layout)
QTableWidget 表格
list1 = QListWidget(tab1)
list1.addItem("一")
i1 = QListWidgetItem("fir",list1)
i2 = QListWidgetItem("sec",list1)
i3 = QListWidgetItem("thr",list1)
list1.setCurrentItem(i1)
list1.setCurrentItem(i2)
list1.setCurrentItem(i3)
QLabel("页面2",tab2)
tableWidget = QTableWidget(12, 3, tab2)
headers = ["姓名","编号"]
tableWidget.setHorizontalHeaderLabels(headers)
tableWidget.resize(400,200)
以上就是我们在设计一个最基础的UI界面时会用到的控件,还有一些其他的控件,比如进度条,事件选择器,文件选择器等,可以参考官网