用Python做一个安全攻防工具：端口嗅探器（4）

传送门

本系列原创博文传送门：

用Python做一个安全攻防工具：端口嗅探器（1）

用Python做一个安全攻防工具：端口嗅探器（2）

用Python做一个安全攻防工具：端口嗅探器（3）

用Python做一个安全攻防工具：端口嗅探器（4）

用Python做一个安全攻防工具：端口嗅探器（5）

用Python做一个安全攻防工具：端口嗅探器（6）

用Python做一个安全攻防工具：端口嗅探器（7）

用Python做一个安全攻防工具：端口嗅探器（8）

用Python做一个安全攻防工具：端口嗅探器（9）

 

本篇目标

本篇将对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