一个案例

从一个示例开始


点击这里,边看视频讲解,边学习以下内容

现在我们要开发一个程序,让用户输入一段文本包含:员工姓名、薪资、年龄。

格式如下:

薛蟠     4560 25
薛蝌     4460 25
薛宝钗   35776 23
薛宝琴   14346 18
王夫人   43360 45
王熙凤   24460 25
王子腾   55660 45
王仁     15034 65
尤二姐   5324 24
贾芹     5663 25
贾兰     13443 35
贾芸     4522 25
尤三姐   5905 22
贾珍     54603 35

该程序可以把薪资在 2万 以上、以下的人员名单分别打印出来。

当然我们可以像以前一样,开发命令行程序(准确的说应该叫字符终端程序,因为UI是字符终端),让用户在字符终端输入。

但是如果我们能开发下面这样的图形界面程序,就更酷了

image

能吗?

能,用 Python Qt,开发上面的界面就只要下面这短短的程序即可

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEdit

app = QApplication([])

window = QMainWindow()
window.resize(500, 400)
window.move(300, 310)
window.setWindowTitle('薪资统计')

textEdit = QPlainTextEdit(window)
textEdit.setPlaceholderText("请输入薪资表")
textEdit.move(10,25)
textEdit.resize(300,350)

button = QPushButton('统计', window)
button.move(380,80)

window.show()

app.exec_()

大家可以运行一下看看。

QApplication 提供了整个图形界面程序的底层管理功能,比如:

初始化、程序入口参数的处理,用户事件(对界面的点击、输入、拖拽)分发给各个对应的控件,等等…

对 QApplication 细节比较感兴趣的话,可以点击这里参考官方网站

既然QApplication要做如此重要的初始化操作,所以,我们必须在任何界面控件对象创建前,先创建它。


QMainWindow、QPlainTextEdit、QPushButton 是3个控件类,分别对应界面的主窗口、文本框、按钮

他们都是控件基类对象QWidget的子类。

要在界面上 创建一个控件 ,就需要在程序代码中 创建 这个 控件对应类 的一个 实例对象


在 Qt 系统中,控件(widget)是 层层嵌套 的,除了最顶层的控件,其他的控件都有父控件。

QPlainTextEdit、QPushButton 实例化时,都有一个参数window,如下

QPlainTextEdit(window)
QPushButton('统计', window)

就是指定它的父控件对象 是 window 对应的QMainWindow 主窗口。

而 实例化 QMainWindow 主窗口时,却没有指定 父控件, 因为它就是最上层的控件了。


控件对象的 move 方法决定了这个控件显示的位置。

比如

window.move(300, 310) 就决定了 主窗口的 左上角坐标在 相对屏幕的左上角 的X横坐标300像素, Y纵坐标310像素这个位置。

textEdit.move(10,25) 就决定了文本框的 左上角坐标在 相对父窗口的左上角 的X横坐标10像素, Y纵坐标25像素这个位置。


控件对象的 resize 方法决定了这个控件显示的大小。

比如

window.resize(500, 400) 就决定了 主窗口的 宽度为500像素,高度为400像素。

textEdit.resize(300,350) 就决定了文本框的 宽度为300像素,高度为350像素。


放在主窗口的控件,要能全部显示在界面上, 必须加上下面这行代码

window.show()


最后 ,通过下面这行代码

app.exec_()

进入QApplication的事件处理循环,接收用户的输入事件(),并且分配给相应的对象去处理。

界面动作处理 (signal 和 slot)


点击这里,边看视频讲解,边学习以下内容

接下来,我们要实现具体的统计功能:

当用户点击 统计 按钮时, 从界面控件 QPlainTextEdit 里面获取 用户输入的字符串内容,进行处理。

首先第一个问题: 用户什么点击了 统计 按钮,怎么通知程序? 因为只有程序被通知了这个点击,才能做出相应的处理。

在 Qt 系统中, 当界面上一个控件被操作时,比如 被点击、被输入文本、被鼠标拖拽等, 就会发出 信号 ,英文叫 signal 。就是表明一个事件(比如被点击、被输入文本)发生了。

我们可以预先在代码中指定 处理这个 signal 的函数,这个处理 signal 的函数 叫做 slot

比如,我们可以像下面这样定义一个函数

def handleCalc():
    print('统计按钮被点击了')

然后, 指定 如果 发生了button 按钮被点击 的事情,需要让 handleCalc 来处理,像这样

button.clicked.connect(handleCalc)

用QT的术语来解释上面这行代码,就是:把 button 被 点击(clicked) 的信号(signal), 连接(connect)到了 handleCalc 这样的一个 slot上

大白话就是:让 handleCalc 来 处理 button 被 点击的操作。


但是上面这行代码运行后,只能在字符窗口 打印出 统计按钮被点击了 , 还不能处理分析任务。

要处理分析任务,我们还得从 textEdit 对应的 文本框中 获取用户输入的文本,并且分析薪资范围,最终弹出对话框显示统计结果。

我们修改后,代码如下

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEdit,QMessageBox

def handleCalc():
    info = textEdit.toPlainText()

    # 薪资20000 以上 和 以下 的人员名单
    salary_above_20k = ''
    salary_below_20k = ''
    for line in info.splitlines():
        if not line.strip():
            continue
        parts = line.split(' ')
        # 去掉列表中的空字符串内容
        parts = [p for p in parts if p]
        name,salary,age = parts
        if int(salary) >= 20000:
            salary_above_20k += name + '\n'
        else:
            salary_below_20k += name + '\n'

    QMessageBox.about(window,
                '统计结果',
                f'''薪资20000 以上的有:\n{salary_above_20k}
                \n薪资20000 以下的有:\n{salary_below_20k}'''
                )

app = QApplication([])

window = QMainWindow()
window.resize(500, 400)
window.move(300, 300)
window.setWindowTitle('薪资统计')

textEdit = QPlainTextEdit(window)
textEdit.setPlaceholderText("请输入薪资表")
textEdit.move(10,25)
textEdit.resize(300,350)

button = QPushButton('统计', window)
button.move(380,80)
button.clicked.connect(handleCalc)

window.show()

app.exec_()

运行后,你会发现结果如下

image

封装到类中

上面的代码把控件对应的变量名全部作为全局变量。

如果要设计稍微复杂一些的程序,就会出现太多的控件对应的变量名。

而且这样也不利于 代码的模块化。

所以,我们通常应该把 一个窗口和其包含的控件,对应的代码 全部封装到类中,如下所示

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEdit,QMessageBox

class Stats():
    def __init__(self):
        self.window = QMainWindow()
        self.window.resize(500, 400)
        self.window.move(300, 300)
        self.window.setWindowTitle('薪资统计')

        self.textEdit = QPlainTextEdit(self.window)
        self.textEdit.setPlaceholderText("请输入薪资表")
        self.textEdit.move(10, 25)
        self.textEdit.resize(300, 350)

        self.button = QPushButton('统计', self.window)
        self.button.move(380, 80)

        self.button.clicked.connect(self.handleCalc)


    def handleCalc(self):
        info = self.textEdit.toPlainText()

        # 薪资20000 以上 和 以下 的人员名单
        salary_above_20k = ''
        salary_below_20k = ''
        for line in info.splitlines():
            if not line.strip():
                continue
            parts = line.split(' ')
            # 去掉列表中的空字符串内容
            parts = [p for p in parts if p]
            name,salary,age = parts
            if int(salary) >= 20000:
                salary_above_20k += name + '\n'
            else:
                salary_below_20k += name + '\n'

        QMessageBox.about(self.window,
                    '统计结果',
                    f'''薪资20000 以上的有:\n{salary_above_20k}
                    \n薪资20000 以下的有:\n{salary_below_20k}'''
                    )

app = QApplication([])
stats = Stats()
stats.window.show()
app.exec_()

这样代码的可读性是不是好多了?