本篇目标
本篇将对UI进行优化,如果还有篇幅,则尝试引入PySide2的signal、slot机制。
UI优化方向在于优化交互,使得界面更容易让人理解,并引入QGroupBox、QBoxLayout进行布局的管理。
布局优化
先使用QGroupBox、QBoxLayout进行布局上的优化。
首先需要将控件放入到QBoxLayout的布局控件里。
在最开始设计的UI原型上,分成了上下两大块,下面那块,又分成了左右两边。
其中QVBoxLayout是纵向布局,QHBoxLayout是横向布局。
所以先是两个横向布局加入到分组框控件QGroupBox里,再是下面的左右两块纵向布局加入到第二个横向布局里。
使用布局的话,应该就不需要继续使用move来设定位置了,如果有不满意的,再进行细调。
先按这个思路进行实现,代码如下:
# coding=utf-8
from PySide2.QtWidgets import QApplication, QLineEdit, QLabel, QPlainTextEdit, QPushButton, QStatusBar, QWidget # 引入模块
from PySide2.QtWidgets import QGroupBox, QVBoxLayout, QHBoxLayout # 布局容器
import sys
app = QApplication(sys.argv) # 创建app
window = QWidget() # 创建主窗体
window.resize(600, 480) # 主窗体尺寸
window.setWindowTitle('端口嗅探器 v1.0') # 窗体名称
ip_line_edit = QLineEdit() # 修改父类
ip_line_edit.setPlaceholderText('输入ip或者网址')
ip_line_edit.setMinimumSize(180, 22)
thread_label = QLabel('并发数:')
thread_line_edit = QLineEdit() # 修改父类
thread_line_edit.setText('500')
thread_line_edit.setMinimumSize(40, 22)
# thread_line_edit.move(260, 10) # 注释
port_label = QLabel('端口范围:')
port_line_edit1 = QLineEdit() # 修改父类
port_line_edit1.setText('0')
port_label2 = QLabel('~')
port_line_edit2 = QLineEdit() # 修改父类
port_line_edit2.setText('65535')
# port_line_edit.move(325, 10) # 注释
report_box_edit = QPlainTextEdit() # 修改父类
report_box_edit.setReadOnly(True)
# report_box_edit.move(25, 70) # 注释
report_box_edit.resize(400, 300)
start_btn = QPushButton() # 修改父类
start_btn.setText('启动')
# start_btn.move(450, 10) # 注释
start_btn.resize(80, 22)
copy_all_btn = QPushButton() # 修改父类
copy_all_btn.setText('复制全文')
# copy_all_btn.move(450, 70) # 注释
copy_all_btn.resize(80, 22)
copy_ori_btn = QPushButton() # 修改父类
copy_ori_btn.setText('复制原文')
# copy_ori_btn.move(450, 100) # 注释
copy_ori_btn.resize(80, 22)
clear_btn = QPushButton() # 修改父类
clear_btn.setText('清空')
# clear_btn.move(450, 150) # 注释
clear_btn.resize(80, 22)
first_group_box = QGroupBox() # 第一个分组框组控件
first_group_box.setTitle('参数设置')
second_group_box = QGroupBox() # 第二个分组框组控件
second_group_box.setTitle('端口开放情况')
first_h_layout = QHBoxLayout() # 第一个横向布局容器,属于第一个分组框控件
first_h_layout.addStretch(1)
second_h_layout = QHBoxLayout() # 第二个横向布局容器,属于第一个分组框控件
first_v_layout = QVBoxLayout() # 第一个纵向布局容器,属于第二个横向布局容器
second_v_layout = QVBoxLayout() # 第二个纵向布局容器,属于第二个横向布局容器
first_h_layout.addWidget(ip_line_edit)
first_h_layout.addWidget(thread_label)
first_h_layout.addWidget(thread_line_edit)
first_h_layout.addWidget(port_label)
first_h_layout.addWidget(port_line_edit1)
first_h_layout.addWidget(port_label2)
first_h_layout.addWidget(port_line_edit2)
first_h_layout.addWidget(start_btn)
first_group_box.setLayout(first_h_layout)
first_v_layout.addWidget(report_box_edit)
second_v_layout.addWidget(copy_all_btn)
second_v_layout.addWidget(copy_ori_btn)
second_v_layout.addWidget(clear_btn)
second_h_layout.addItem(first_v_layout)
second_h_layout.addItem(second_v_layout)
second_group_box.setLayout(second_h_layout)
layout = QVBoxLayout()
layout.addWidget(first_group_box)
layout.addWidget(second_group_box)
window.setLayout(layout)
status_bar = QStatusBar(window)
status_bar.move(0, 450)
bar_label = QLabel(status_bar)
bar_label.setText('准备就绪')
bar_label.move(5, 5)
window.show() # 显示窗体
app.exec_() # 启动app
sys.exit()
运行之后,出现界面如下:
看起来是不是有些像模像样了?
里面有不少坑,所以花了不少时间,搞定这个界面,搞明白里的坑,已经快晚上八点了。
所以限于时间,只能明年再来讲了。
明天就是明年了,祝大家新的一年里能够开开心心、健健康康、学习进步、升职加薪!
by 洛城
2020.12.31 19:41