PyQt5实战——UTF-8编码器UI页面设计以及按钮连接（五）

个人博客：苏三有春的博客

系类往期文章：
PyQt5实战——多脚本集合包，前言与环境配置（一）
PyQt5实战——多脚本集合包，UI以及工程布局（二）
PyQt5实战——多脚本集合包，程序入口QMainWindow（三）
PyQt5实战——操作台打印重定向，主界面以及stacklayout使用（四）

UTF-8编码器

UTF-8（8位元，Universal Character Set/Unicode Transformation Format）是针对Unicode的一种可变长度字符编码。它可以用来表示Unicode标准中的任何字符，而且其编码中的第一个字节仍与ASCII相容，使得原来处理ASCII字符的软件无需或只进行少部分修改后，便可继续使用。

比如：在蓝牙领域中，主机与从机自身携带的一些信息如蓝牙名称等，就是由UTF-8编码成十六进制字符串后进行传输，在进行蓝牙开发时，就会经常用到UTF-8编码，因此作者也是自做了一个UTF-8编码器集成到自己的脚本工具包中方便使用。

UI设计

首先看成品，这个UTF-8编码器的工作区一共有几个部分组成：
请添加图片描述

编码内容：是读写文本框，在此文本框中，可输入数字，符号，中文，英文等各种可被UTF-8编码的字符串，该文本框为默认形式，即可读可写。
编码结果：是只读文本框，在此文本框中，会显示编码完成后的结果，即十六进制数字组，例如：PyQt5编码后，编码结果会显示0x50, 0x79, 0x51, 0x74, 0x35，此文本框只允许读，复制等操作，不允许改写其中的内容。
字符数：也是只读文本框，在此文本框中，会显示编码结果的字符数，例如：PyQt5编码后，编码结果为5个十六进制数，字符数就为5，值得注意的是，字符数并不是与编码内容的字符串的长度一定相等，如果你的编码内容中含有中文，1个中文则会有3个十六进制数表示。
按钮：按钮连接了一个方法，在按钮被点击时触发方法，读取编码内容中的字符串，进行处理，然后再将结果输出再编码结果与字符数中。

功能UI的存放目录

在PyQt的第二篇文章PyQt5实战——多脚本集合包，UI以及工程布局（二）中我们讲到，实现不同功能的UI类是存放在一个相同的目录下，这样方便我们维护，也正是因为功能区的UI放在一个名为Classes的目录下，PrimeWindow不在该目录下。

请添加图片描述

因此PrimeWindow想要调用，实现UTF-8编码器的UI界面，需要使用import。

请添加图片描述

这表示：导入Classes目录下的ConvertorClass模块，并重命名为ConvertorClass。

可以回到第四篇文章PyQt5实战——操作台打印重定向，主界面以及stacklayout使用（四）查看PrimeWindow如何使用这个模块的（在create_stack方法中）。

代码解释

def init

先看初始化代码，也是这个UTF-8对象的入口（这个UTF-8编码器是写在另一个目录下的一个类，上一篇文章中讲到的PrimeWindow就是调用了这个UTF-8编码器类，创建了一个编码器对象，这个类继承于Qwidget，因此这个编码器对象可以被看作是一个Qwidget来使用。）

PS：如果对Qwidget这个概念有些模糊的话请看这里（如果熟悉了PyQt的基本知识请继续往下看），Qwidget本质上是一个组件，和按钮，文本框一样，只不过这个组件中可以放其它的组件，你可以把Qwidget想象成一个容器，这个容器装了许多东西，打包起来，然后再放到另一个容器中，像套娃一样。我们这里就是将上面说的三个文本框与按钮排列好放在一个名为Convertor的Qwidget容器中，然后打包成一个类，可供其它更大的Qwidget（比如PrimeWindow）调用。

    def __init__(self):
        super().__init__()
        
        self.layout = QVBoxLayout() # 设置编码器的主布局为垂直布局VBox
        self.inputlayout = QHBoxLayout() # 设置水平的输入布局，即编码内容（由“编码内容”这四个字的标签与文本框水平布局构成）
        self.outputlayout = QHBoxLayout() # 设置水平的输出布局，即编码结果
        self.countlayout = QHBoxLayout() # 设置水平的计数布局，即字符数
        self.layout.addLayout(self.inputlayout) # 将三个布局以此添加进主布局中
        self.layout.addLayout(self.outputlayout) # 依次添加会按顺序从上往下排列
        self.layout.addLayout(self.countlayout)  # 总的来说是三个小布局垂直分布，每个小布局中的两个组件水平分布
        
        self.inputlable = QLabel("编码内容",self) # 创建“编码内容”这个四个字的标签
        self.inputlayout.addWidget(self.inputlable) # 加入到输入布局中，从左到右排列
        self.inputedior = QTextEdit("输入文本",self) # 创建输入文本框
        TextEditStyle(self.inputedior) # 设置文本框的样式，该方法为作者自写，非第三方库调用
        self.inputlayout.addWidget(self.inputedior) # 将文本框添加到输入布局中
        
        convertbtn = QPushButton("UTF-8编码",self) # 创建按钮，按钮上的文字为“UTF-8编码”
        btnReleaseStyleA(convertbtn) # 设置按钮弹起状态的样式，该方法为作者自写，非第三方库调用
        convertbtn.clicked.connect(self.converting) # 将按钮的点击状态连接到converting方法上，一旦检测到按钮被点击，则调用该方法
        convertbtn.clicked.connect(self.counting) # 同理，将按钮的点击状态连接到counting方法上，一旦检查测到按钮被点击，则调用该方法
        self.layout.addWidget(convertbtn) # 将按钮添加到主布局中，因为上面已经添加了三个小布局，因此按钮在布局最下方

        self.outputlable = QLabel("编码结果",self) # 创建“编码结果”这四个字的标签
        self.outputlayout.addWidget(self.outputlable) # 添加到输出布局中
        self.outputedit = QTextEdit("输出文本",self) # 创建输出文本框
        self.outputedit.setReadOnly(True) # 将文本框设置为只读模式
        TextEditStyle(self.outputedit) # 设置文本框的样式，作者自写，非第三方库嗲用
        self.outputlayout.addWidget(self.outputedit) # 将文本框添加到输出布局中
        
        self.countlable = QLabel("字符数：",self) # 与上相同
        self.countlayout.addWidget(self.countlable)
        self.countedit = QTextEdit("字符数",self)
        self.countedit.setReadOnly(True)
        TextEditStyle(self.countedit)
        self.countlayout.addWidget(self.countedit) 
        # ********************** 已删，不好看 **********************
        # 删除edit边框
        # self.countedit.setFrameShape(QFrame.NoFrame)
        # # 删除edit背景
        # self.countedit.setStyleSheet("background-color: transparent;")
        # ********************** 已删，不好看 **********************
        self.setLayout(self.layout) # 将主布局设置为Qwidget的布局

def converting

converting方法是主要实现UTF-8编码的方法的入口，它并不直接完成该任务，而是获取输入文本框的数据，然后传参给真正的编码方法。

    def converting(self):
        self.text = self.inputedior.toPlainText()
        self.res,self.count = convertor(self.text)
        self.outputedit.setText(self.res)

下面逐行解释代码：

从输入文本框中获取文本内容，在PyQt中，toPlainText是QTextRdit控件的一个方法，用于获取文本框中的所有内容，并返回一个字符串，这与toHtml()不同，后者返回的是HTML格式的文本。
调用convertor这个外部方法，传入的参数就是文本框的内容（字符串），并获取返回结果（两个参数，一个是结果，一个是字符串数）。
将结果设置为输出框的文本。

值得注意的是，这里count变量被形容为self，这也就是说，在同一实例（对象）中，实例中的各个方法（被传入self），都可以调用这个count变量。

def counting

counting方法的作用就是将上面得到的count设置为计数文本框中的内容。

    def counting(self):
        self.countedit.setText(str(self.count))

为什么要舍近求远做这样一个操作呢，是为了提醒我：

一个按钮的某一状态连接多个事件是可行的。
使用setText方法对某一文本框填入数据时，参数必须为字符串，如果非字符串的参数，必须使用str()方法转为字符串。
更深入了解self，可支持某一变量在其它方法间共用。

本文要点

本文中展示了，之前文章中铺垫的，功能区的用法。本质上就是功能区是PrimeWindow这个大的容器（Qwidget）专门空出来的一块地方，可以用来放其它的小的容器（Qwidget），其它的小的容器以对象（实例）的方式被创建，然后存放在抽屉（stack）中，这样我们在切换抽屉时，就是在切换小的容器，实现了大容器不变的情况下，大容器中的某一块区域可以灵活变化。
__init__方法是这个对象的入口（创建时被首先调用的函数），当对象被创建时，则会自动地进行初始化，完成整个编译器UI的创建和布局。初始化方法的代码解释写在了代码块中，因为代码较长，如果写出来的话篇幅太大，但是不写的话在CSDN和个人博客中都比较难阅读（无法自动换行），因此建议大家复制下来，贴在VScode中或自己的Typora中看，这样方便一点。
按钮连接的方法是使用xxxbtn.clicked.connect(xxxfunction)，该方法旨在某按键被click（点击）时，调用xxxfunction方法，且可以连接多个方法。
converting方法实际上是一个处理API的方法，负责传参与接收结果，convertor方法在下一篇文章中会介绍。
counting方法可以被整合到converting方法中，不过整个项目是作者的一个学习过程与心得，这样写是为了方便展示一些特性。
如果本文对你有所帮助，请记得给作者的CSDN点赞收藏QAQ，多多逛逛和订阅作者的个人博客，有什么问题或错误请联系作者的CSDN或发送到邮件中，祝大家生活愉快，变得更强！