PyQt 界面设计入门基础 —— ② QtWidgets

535 阅读7分钟

历史目录

1. PyQt 界面设计入门基础 —— ①安装布局篇 2. PyQt 界面设计入门基础 —— ② QtWidgets

上一篇主要介绍的就是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 文本的使用

  1. 使用前需要导入一下 from PyQt6.QtWidgets import QLabel
  2. QLabel is used for displaying text or an image. No user interaction functionality is provided.QLabel只要用于一个显示的,不做修改的
  3. 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)

image.png

那么一般文本来说,我们肯定不只是单纯显示这么一个文本的,我们会对他的位置,颜色进行一个修改。那接下来我们就参考一下官网,实现一下

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)

可以一步一步的添加,最后的效果就是:

image.png


注意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)

image.png

setText() 和 setPlaceholderText() 是不同的,

  • setText() 是用来设置文本内容的, 影响输入内容
  • setPlaceholderText() 设置提示, 不影响输入内容
self.edit.setText("写入了一个文本")

执行一下,或许你就明白了

QPlainTextEditQLineEdit 从名字上区分就可以知道: 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)

image.png

这里提一下我们也不一定要使用QIcon添加icon,我们可以使用输入法自带的,也也要可以实现

button1 = QPushButton("😊普通按钮")

信号

对于按钮,我们更多的接触到的就是点击触发什么事件(方法),这个怎么实现的呢?其实这就涉及到 信号与槽 的概念了,什么是信号? 什么是槽? 如何将 信号 想关联。

下一篇会学什么是信号,信号是干什么用的~~~

QComboBox

下拉框的实现

select = QComboBox()
select.addItem("上午")
select.addItem("下午")
select.addItem("晚上")
select.addItem("凌晨")
edit_layout.addWidget(select)

image.png

当然我们也可以以列表的形式写入,效果也是一样的

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)

image.png

多选 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)

image.png

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)

image.png

QListWidget 和 QListWidgetItem 列表

列表控件通常用于目录

image.png

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 表格

image.png

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界面时会用到的控件,还有一些其他的控件,比如进度条,事件选择器,文件选择器等,可以参考官网

感谢

PySide6之QTabWidget控件的使用案例_pyside6 tablewidget-CSDN博客

常用控件3 - 白月黑羽