本篇目标

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

运行之后,出现界面如下:

python如何打安全补丁 python写安全工具_布局

看起来是不是有些像模像样了?

里面有不少坑,所以花了不少时间,搞定这个界面,搞明白里的坑,已经快晚上八点了。

所以限于时间,只能明年再来讲了。

明天就是明年了,祝大家新的一年里能够开开心心、健健康康、学习进步、升职加薪!

 

by 洛城

2020.12.31 19:41