Python GUI初学者计划2——手写代码的方式实现PySide2界面设计（详细讲解内部联系）

小咪咪 2022-10-30 14:28 292阅读 0赞

# 一、PySide2设计GUI界面？ #

如何用PySide2设计一个自己想要的UI界面，其中的按键和文本框按照我们的需求实现所需要的功能呢？  
实现方法很多，大概罗列下其中的两种设计思路：

## 代码编写 和 动态加载UI（下一章节说） ##

## 今天先说 代码编写 的思路 ##

**代码编写**：就是手写代码将每个控件包括文本框、按钮等编写出来，这里的每个控件就是GUI界面上的信号，通过相关的函数实现具体的功能，用调用的方式将-----GUI上的控件（信号Signal）-----与--------要实现的具体功能（槽slot）-------联系起来。

简单说来，就是当GUI界面上的控件发生用户事件（如按键被按下，文本框输入了东西等），就会产生一个信号，信号与具体需要实现的功能(也就是槽)联系起来，就形成了触发事件的编写。

现在我想设计一个GUI如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70]  
当我点击按钮“别点我”时，出现一个反馈结果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 1]  
这里有一个函数作为实现“反馈结果”这个弹出窗效果功能的Slot，是当signal按键“别点我”这个button（按钮）被点击之后触发的效果。

实现的代码为：

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEdit,QMessageBox
    
    def yahoo():#这里的yahoo()可以安装自己的想法来定义
    	#比如www()，dasfasf() ，只是一个功能名字，但是最好按实现的功能命名
        print('i was be knocked')
        QMessageBox.about(window,'反馈结果','哎呦，你点我干嘛')
    
    app = QApplication([])
    
    window = QMainWindow()
    window.resize(500,400)
    window.move(300,200)
    window.setWindowTitle('这不是一个正经的GUI')
    
    textEdit = QPlainTextEdit(window)
    textEdit.setPlaceholderText('请输入你想 输入的东西')
    textEdit.setPlaceholderText("你瞅啥")
    textEdit.move(10,25)
    textEdit.resize(300,350)
    
    button = QPushButton('别点我',window)
    button.move(380,80)
    button.clicked.connect(Calce)
    
    window.show()
    app.exec_()

#### 1.1 导入包 ####

PySide2要想实现我们所需要的设计，就需要用到Python的一些处理库和第三方库。  
这里需要用到的库有：

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

### 1.2 实例化对象 ###

界面需要被显示出来，就需要一个主窗口QMainWindow，它直接继承了QWidge，事实上，文本框QPlainTextEdit，弹出框QMessageBox，以及QApplication等的种种都需要继承自QtWidgets（父对象），他们都是控件基类对象QWidget的子类。

QApplication 提供了整个图形界面程序的底层管理功能，比如初始化，按键的点击，文本框的输入等。至关重要啊，朋友们，所以需要先创建它，没办法，基石嘛~~~~~

如下，导入包之后需要对基石QApplication实例化。

from PySide2.QtWidgets import QApplication, QMainWindow, 
    QPushButton,  QPlainTextEdit,QMessageBox
    
    app = QApplication([])

### 什么叫实例化？ ###

打个比方：vivo智能机作为vivo品牌的一个类，包含了旗下各种型号型的手机。现在，我需要定制一台vivo手机，它是vivo手机，所以它具有vivo手机有的一切属性，它被创建出来之后，它是它了（不是哲学），不再是一个空泛的vivo手机的概念了（我说vivo手机你都不知道是哪一个），现在实例化（创建一个具体的）之后，我就可以说，实例化之后的对象为==我手里的vivo手机。

同理，QApplication，QMainWindow等也需要实例化出来才能使用，不然就是玄学了嘛，我怎么知道你要用哪一个。

注意：QApplication的实例化比其他控件多一个\[\]，为：

app = QApplication([ ])

QApplication(\[ \])实例化之后，有时候我们需要对它进行处理，直接处理又不方便，怎么办？我们可以将它赋值給一个变量对象（变量也是对象，函数也是对象。你是不是还没有对象，嘿嘿嘿~~~），所以我们讲实例化之后的整个控件给app存储起来，APP就是QApplication(\[ \])，QApplication(\[ \])就是APP。

同理：

window = QMainWindow()  #主窗口的实例化
    
    extEdit = QPlainTextEdit(window)  #文本框的实例化

看到这里，有朋友就问了，为什么主窗口实例化（）里没东西，而文本框需要有一个window呢，这不是你主窗口的实例化对象吗？

你可以这样理解：古代的玉佩不仅是为了配饰，一定程度上也告诉别人，他爸是×××，证明他有后台不好欺负，所以后代继位者都有这么个信物。那么问题来了，他爸不会也搞这么个东西带着吧，可能也有，比如皇帝御赐的，证明他爸也有靠山。那皇帝就没东西证明他有靠山了啊，因为他自己就是天子。

这里带的玉佩什么的就是括号（）中的“靠山”，正面是受谁庇佑，也可以直接继承父对象的一切。而什么人不需要“靠山”呢，最顶层的人。

因为在 Qt 系统中，控件（widget）是 层层嵌套 的，除了最顶层的控件，其他的控件都有父控件。QPlainTextEdit、QPushButton 实例化时，都有一个参数window，如下：

textEdit = QPlainTextEdit(window)
    button = QPushButton('别点我',window)

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

实例化之后，则需要对实例化的对象，进行自定义的“雕琢”，比如位置，尺寸，标题等，以及默认的提示语等。  
如：

app = QApplication([])
    
    window = QMainWindow()
    window.resize(500,400)
    window.move(300,200)
    window.setWindowTitle('这不是一个正经的GUI')
    
    textEdit = QPlainTextEdit(window)
    textEdit.setPlaceholderText('请输入你想 输入的东西')
    textEdit.setPlaceholderText("你瞅啥")
    textEdit.move(10,25)
    textEdit.resize(300,350)
    
    button = QPushButton('别点我',window)
    button.move(380,80)

### 1.3 触发事件函数的编写 ###

那实例化好了之后，当我点击按键，如何实现我想要的功能，首先我先做一个函数，当我这个函数被调用的时候，会弹出一个提示框，提示框的名字是“**反馈结果**”，要提示的内容是“**哎哟，你点我干嘛**”，如图：  
![在这里插入图片描述][20210220002006867.png]  
函数为：

def yahoo():
        print('i was be knocked')
        QMessageBox.about(window,'反馈结果','哎呦，你点我干嘛')

然后在button实例化的下面加上：

button.clicked.connect(yahoo)

表明，当button被clicked（点击）之后，将要发生一个行为，什么行为呢，def yahoo()中实现的行为，要发生的行为与要实现的行为联系起来，就用connect。

同理，其他触发事件也是一样。

### 1.4 执行 ###

最后你的主窗口以及建立在主窗口上的各种空间需要显示和执行，需要添加上二行代码：

window.show()   #显示窗口
    app.exec_()  #防止出现的东西一闪而过

那么文本框的用途也是一样，我们可以设计一个新按钮button1，当点击新按钮时，无论你在文本框中输入什么东西，都会在提示框完整复制过来。  
运行效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 2]  
点击按钮 【别点我】：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 3]  
在文本框中输入想要输入的东西：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 4]  
点击按钮 【点我复制】：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 5]  
需要实现的函数为：

def copy_text():
        info = textEdit.toPlainText()
        QMessageBox.about(window, '复制的新窗口', f'{info}')

通过textEdit.toPlainText()获取输入到文本框内的信息，赋值给info变量，然后直接在新的窗口显示这个info变量的内容，达到了复制的效果。

总体运行代码为：

from PySide2.QtWidgets import QApplication, QMainWindow, QPushButton,  QPlainTextEdit,QMessageBox
    
    def yahoo():
        print('i was be knocked')
        QMessageBox.about(window, '反馈结果', '哎呦，你点我干嘛')
    
    def copy_text():
        info = textEdit.toPlainText()
        QMessageBox.about(window, '复制的新窗口', f'{info}')
    
    app = QApplication([])
    
    window = QMainWindow()
    window.resize(500,400)
    window.move(300,200)
    window.setWindowTitle('这不是一个正经的GUI')
    
    textEdit = QPlainTextEdit(window)
    textEdit.setPlaceholderText('请输入你想 输入的东西')
    textEdit.setPlaceholderText("你瞅啥")
    textEdit.move(10,25)
    textEdit.resize(300,350)
    
    button = QPushButton('别点我',window)
    button.move(380,80)
    button.clicked.connect(yahoo)
    
    button = QPushButton('点我复制',window)
    button.move(380,120)
    button.clicked.connect(copy_text)
    
    window.show()
    app.exec_()

当然了，具体实现的功能很广，但是总体思路是不便的。

下期我们讲 如果不自定义尺寸，位置等信息，如何直接通过拖拽得到的UI界面进行编程呢，欢迎关注：Python GUI初学者计划3——动态加载UI的方式实现PySide2界面设计（详细讲解内部联系）

**写在最后：**  
你要相信大多数人与人之间的差距并不大，但是0.99的N次方和1.1的N次方差距是随着N多增多而越来越大的；坚定的目标和持久的努力一定会成功！  
你偷过的每一个懒，都会成为你日后最深的遗憾。

我是通信不二，一个积极努力，乐观向上的程序猿！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70]: /images/20221024/02bbb9e26dc8436e87c2ea51440201f5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 1]: /images/20221024/d154763b02cc466d9e82afc0126fc988.png
[20210220002006867.png]: /images/20221024/2da78275184743d893b2605be948df9b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 2]: /images/20221024/f2a855fdef5840adbe1f779d5dd81f0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 3]: /images/20221024/ae015c9c58964047a4ebe2bf54eb8452.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 4]: /images/20221024/cff21afda6264e4681577ac1a8b60977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1YW5nd3Vsdg_size_16_color_FFFFFF_t_70 5]: /images/20221024/dbcc22be22894f7ba6701e57447388ec.png