python3+pyqt5实践历程(二)——基于pyqt5的API工具界面_python3 pyqt5

python3+pyqt5实践历程(二)——基于pyqt5的API工具界面

系列文章目录

python3+pyqt5实践历程(一)——基于socket通信与pyqt5的串口工具
python3+tkinter实践历程(一)——基于requests与tkinter的API工具
python3+tkinter实践历程(二)——基于tkinter的日志检索工具
python3+tkinter实践历程(三)——基于requests与tkinter的模拟web登录工具
python3+tkinter实践历程(四)——模仿CRT完成基于socket通信与tkinter的TCP串口客户端

制作背景

① 复制一个一模一样的工具出来，以后自己维护此工具

最终功能

① 仅提供界面代码，不展示内部逻辑

工具截图展示

开发制作的API工具：

用pyqt5一比一复刻的API工具：

代码详解

基于pyqt5制作工具，如何进行控件的布局。

以API工具为例子，详解pyqt5如何布局、如何制作界面。

整个界面总体分析：整个界面控件垂直分布用QVBoxLayout来定义，里面分为两大行，每一行水平分布都用QHBoxLayout来定义。第一行是账号密码的那一行，控件一路按顺序排布，直到"Authentication"分组框，里面的两个按钮是水平分布，所以再用一个QHBoxLayout来定义两个分组框的布局。
第二行一整行水平布局，存在三大列，第一列为接口下拉框+接口列表，第二列为headers、body的输入框+请求返回的显示框，第三列为set接口的headers、body的输入框+set接口的请求返回的显示框，此三列是垂直布局都用QVBoxLayout来定义，同时此三列水平排布在第二行中。

from PyQt5.QtWidgets import QApplication, QWidget, QPushButton, QTextBrowser, QVBoxLayout, QHBoxLayout, QLabel,\
    QLineEdit, QRadioButton, QComboBox, QTextEdit, QDesktopWidget, QMainWindow,\
    QButtonGroup, QFrame, QListWidget, QGroupBox
from PyQt5.QtCore import Qt
import sys



class Tool(QMainWindow):
    """工具类"""
    def __init__(self):
        QMainWindow.__init__(self)
        self.setFixedSize(1270, 820)     # 固定整个界面的大小，与API工具保持一致
        self.create_widgets()

    def create_widgets(self):
        """创建图形化界面"""
        row1 = QHBoxLayout()        # 定义一个水平布局，即第一行
        dev_url = QLabel('Please enter the IP and Port:')   # 新建一个Label文本，用于“Please enter the IP and Port:”的显示
        self.dev_url = QLineEdit('10.10.7.29:80')           # 新建一个可编辑输入框，默认值为10.10.7.29:80
        self.dev_url.setFixedWidth(150)                     # 设置宽度为150，与API工具一致
        username = QLabel('username')                       # 新建一个Label文本，用于“username”的显示
        self.username = QLineEdit('admin')                  # 新建一个可编辑输入框，默认值为admin
        self.username.setFixedWidth(120)                    # 设置宽度为120，与API工具一致
        password = QLabel('password')                       # 新建一个Label文本，用于“password”的显示
        self.password = QLineEdit('123456')                 # 新建一个可编辑输入框，默认值为123456
        self.password.setFixedWidth(120)                    # 设置宽度为120，与API工具一致

        groupBox = QGroupBox('Authentication')              # 新建一个分组框，文本显示为"Authentication"
        basic_btn = QRadioButton('basic')                   # 新建一个单选按钮“basic”
        digest_btn = QRadioButton('digest')                 # 新建一个单选按钮“digest”
        digest_btn.setChecked(True)                         # 初始化默认选中"digest"按钮
        hlayout = QHBoxLayout()                             # 定义一个水平布局，应用在groupBox分组框中，如果定义的是QVBoxLayout垂直布局，则两个按钮就会垂直分布。
        groupBox.setLayout(hlayout)
        hlayout.addSpacing(10)                              # 在该水平布局中，先隔开10像素的空间，再添加单选按钮“basic”，再隔开50像素的空间，再添加单选按钮“digest”，于是两个按钮就会水平分布。
        hlayout.addWidget(basic_btn)
        hlayout.addSpacing(50)
        hlayout.addWidget(digest_btn)
        groupBox.setFixedSize(270, 50)                      # 设置整个分组框大小，与API工具一致

        self.authentication_group = QButtonGroup()          # 与界面无关的代码，设置“basic”和“digest”按钮互斥
        self.authentication_group.addButton(basic_btn, 1)
        self.authentication_group.addButton(digest_btn, 2)

        authversion = QLabel('AuthVersion')                 # 新建一个Label文本，用于“AuthVersion”的显示
        self.authversion = QComboBox()                      # 新建一个下拉框
        self.authversion.addItems(['1.0', '1.1'])           # 加入1.0、1.1两个选项
        self.authversion.setFixedWidth(70)                  # 设置宽度，与API工具一致
        self.authversion.setCurrentIndex(1)                 # 设置默认值，为第二个选项，与API工具一致
        self.authversion.setStyleSheet("QComboBox{background:white}")   # 设置下拉框样式，与API工具一致
        # 第一行的控件已经全部定义完毕，现在开始按顺序存放进第一行的水平布局中。
        row1.addWidget(dev_url, 0, Qt.AlignLeft)            # 先添加“Please enter the IP and Port:”文本
        row1.addSpacing(13)                                 # 隔空13像素，与API工具一致
        row1.addWidget(self.dev_url, 0, Qt.AlignLeft | Qt.AlignCenter)  # 添加IP地址输入框，靠左上方向分布
        row1.addSpacing(35)                                 # 隔空35个像素，与API工具一致
        row1.addWidget(username, 0, Qt.AlignLeft)           # 添加“username”文本
        row1.addSpacing(20)                                 # 隔空35个像素，与API工具一致
        row1.addWidget(self.username, 0, Qt.AlignLeft | Qt.AlignCenter)     # 添加用户名输入框，靠左上方向分布
        row1.addSpacing(14)                                 # 隔空14个像素，与API工具一致
        row1.addWidget(password, 0, Qt.AlignLeft)           # 添加“password”文本
        row1.addSpacing(20)                                 # 隔空20个像素，与API工具一致
        row1.addWidget(self.password, 0, Qt.AlignLeft | Qt.AlignCenter)     # 添加密码输入框，靠左上方向分布
        row1.addWidget(groupBox, 0, Qt.AlignLeft | Qt.AlignCenter)          # 添加"Authentication"分组框
        row1.addSpacing(15)                                 # 隔空15个像素，与API工具一致
        row1.addWidget(authversion, 0, Qt.AlignLeft | Qt.AlignCenter)       # 添加“authversion”文本
        row1.addWidget(self.authversion, 0, Qt.AlignLeft | Qt.AlignCenter)  # 添加“authversion”下拉框
        row1.addStretch()                                   # 压缩空白空间，使控件按规定的位置排布
        # 至此，第一行已经完成。
        
        

        row2 = QHBoxLayout()                                # 先定义第二行的水平布局
        com1 = QVBoxLayout()                                # 定义存放第一列的垂直布局
        com1_row1 = QHBoxLayout()                           # 定义存放第一列中modules文本和接口下拉框的水平布局
        com2 = QVBoxLayout()                                # 定义存放第二列的垂直布局
        com3 = QVBoxLayout()                                # 定义存放第三列的垂直布局

        modules = QLabel('Modules')                         # 新建一个Label文本，用于“Modules”的显示
        self.modules = QComboBox()                          # 新建一个下拉框
        self.modules.addItems(['System', 'Image'])          # 添加接口模块
        self.modules.setFixedWidth(120)                     # 固定宽度120像素，与API工具一致
        self.modules.setCurrentIndex(-1)                    # 设置默认不选择任何项，与API工具一致
        self.modules.setStyleSheet("QComboBox{background:white}")       # 设置下拉框样式，与API工具一致

        interace_name = QLabel('<p style=line-height:105%>Interace Name</p>')   # 新建一个Label文本，用于“Interace Name”的显示
        interace_name.setFrameShape(QFrame.Box)             # 给label设置边框，与API工具一致

        self.interace_list = QListWidget()                  # 新建一个列表框，用于显示接口列表
        self.interace_list.setFixedSize(180, 660)           # 设置宽高，与API工具一致

        com1_row1.addWidget(modules, 0, Qt.AlignLeft | Qt.AlignTop)      # com1_row1水平布局存放modules文本和接口下拉框
        com1_row1.addWidget(self.modules, 0, Qt.AlignLeft | Qt.AlignTop)
        com1.addLayout(com1_row1)                           # 第一列先添加进com1_row1，等同于添加进modules文本和接口下拉框
        com1.addSpacing(5)                                  # 隔空5个像素，与API工具一致
        com1.addWidget(interace_name)                       # 第一列添加“Interace Name”文本
        com1.addWidget(self.interace_list, 0, Qt.AlignLeft | Qt.AlignTop)   # 第一列添加接口列表框
        # 至此，第二行第一列已完成

        self.header_text = QTextEdit()                      # 新建一个可编辑文本框，是第二列的接口的headers和body的编辑框
        self.header_text.setFixedSize(550, 140)             # 设置宽高，与API工具一致
        self.header_text.setHorizontalScrollBarPolicy(2)    # 设置滚动条样式，与API工具一致
        self.header_text.setVerticalScrollBarPolicy(2)
        self.header_text.setLineWrapMode(0)

        send_btn = QPushButton('Send')                      # 新建第二列的"Send"按钮
        request_result = QLabel('Command respone results:') # 新建第二列的“Command respone results:”文本

        self.respone_text = QTextBrowser()                  # 新建不可编辑文本框，用于第二列的接口返回信息的显示
        self.respone_text.setFixedSize(550, 520)            # 设置宽高，与API工具一致
        self.respone_text.setHorizontalScrollBarPolicy(2)   # 设置滚动条样式，与API工具一致
        self.respone_text.setVerticalScrollBarPolicy(2)
        self.respone_text.setLineWrapMode(0)
        self.respone_text.setStyleSheet('background-color: whitesmoke;')        # whitesmoke为QT的默认背景颜色(灰色)

        com2.addWidget(self.header_text, 0, Qt.AlignLeft | Qt.AlignTop)         # 第二列添加headers编辑框
        com2.addWidget(send_btn, 0, Qt.AlignRight | Qt.AlignTop)                # 第二列添加"Send"按钮
        com2.addWidget(request_result, 0, Qt.AlignLeft | Qt.AlignTop)           # 第二列添加“Command respone results:”文本
        com2.addWidget(self.respone_text, 0, Qt.AlignLeft | Qt.AlignTop)        # 第二列添加“接口返回信息”文本框
        com2.addStretch()                                                       # 压缩空白空间，使控件按规定的位置排布
        # 至此，第二行第二列已完成

        self.set_api_body_text = QTextEdit()                # 新建一个可编辑文本框，是第三列的set接口的headers和body的编辑框
        self.set_api_body_text.setReadOnly(True)            # 设置默认不可写，与API工具一致
        self.set_api_body_text.setFixedSize(510, 520)       # 设置宽高，与API工具一致
        self.set_api_body_text.setHorizontalScrollBarPolicy(2)  # 设置一系列样式，与API工具一致
        self.set_api_body_text.setVerticalScrollBarPolicy(2)
        self.set_api_body_text.setLineWrapMode(0)
        self.set_api_body_text.setStyleSheet('background-color: whitesmoke;')  # whitesmoke为QT的默认背景颜色

        self.send_btn2 = QPushButton('Send')                # 新建第三列的"Send"按钮
        self.send_btn2.setEnabled(False)                    # 设置按钮默认不可点击
        request_result2 = QLabel('Command respone results:')    # 新建第三列的“Command respone results:”文本

        self.set_api_respone_text = QTextBrowser()          # 新建不可编辑文本框，用于第三列的set接口返回信息的显示
        self.set_api_respone_text.setFixedSize(510, 140)    # 设置宽高，与API工具一致
        self.set_api_respone_text.setHorizontalScrollBarPolicy(2)   # 设置一系列样式，与API工具一致
        self.set_api_respone_text.setVerticalScrollBarPolicy(2)
        self.set_api_respone_text.setLineWrapMode(0)
        self.set_api_respone_text.setStyleSheet('background-color: whitesmoke;')  # whitesmoke为QT的默认背景颜色

        com3.addWidget(self.set_api_body_text, 0, Qt.AlignLeft | Qt.AlignTop)   # 第三列添加set接口的headers和body的编辑框
        com3.addWidget(self.send_btn2, 0, Qt.AlignRight | Qt.AlignTop)          # 第三列添加"Send"按钮
        com3.addWidget(request_result2, 0, Qt.AlignLeft | Qt.AlignTop)          # 第三列添加“Command respone results:”文本
        com3.addWidget(self.set_api_respone_text, 0, Qt.AlignLeft | Qt.AlignTop)    # 第三列添加“set接口返回信息”文本框
        com3.addStretch()                                                       # 压缩空白空间，使控件按规定的位置排布

        row2.addLayout(com1)                # 整个第二行，添加第一列
        row2.addLayout(com2)                # 第二行添加第二列
        row2.addLayout(com3)                # 第二行添加第三列
        row2.addStretch()                   # 压缩空白空间，使控件按规定的位置排布

        all_row = QVBoxLayout()             # 定义整个界面的垂直布局
        all_row.addLayout(row1)             # 添加进第一行
        all_row.addSpacing(43)              # 第一行和第二行的间隔，与API工具一致
        all_row.addLayout(row2)             # 添加进第二行
        all_row.addStretch()                # 压缩空白空间，使控件按规定的位置排布
        widget = QWidget()                  # 定义整个界面
        widget.setLayout(all_row)           # 该界面应用这个垂直布局
        self.setCentralWidget(widget)
        # 至此，整个界面创建完毕

if __name__ == '__main__':
    app = QApplication(sys.argv)
    tool = Tool()

    tool.setWindowTitle('APITools')
    screen = QDesktopWidget().screenGeometry()
    size = tool.geometry()

    tool.move(int((screen.width() - size.width()) / 2), int((screen.height() - size.height()) / 2))
    tool.show()

    err = app.exec()

    sys.exit(err)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182