手把手教你写小工具-Qt_designer入门教程

前言：

事情起因就是作为一个渗透的小白，喜欢到处问人要工具，不怕我不要就怕你没有！哈哈哈，然后我在上次发现一款工具感觉界面简洁提供的功能也很少，所以想在能不能自己搞一个小小工具！于是有了下文，大佬勿喷！

0x01

在网上一顿搜索发现了Qt_designer这好像可以做到！所以开始我们的采坑之旅

Qt Designer入门教程初学者必看是本文要介绍的内容，不说这么多，。直接进入正题。RAD （快速应用程序开发）是一种高效的软件开发形式，可以让用户在极短的时间里创建一个图形化的用户界面。通常情况下，在一张空白的表单上，开发人员可以通过拖拉或点击的方式，在窗口的适当位置上添加一些输入框和按钮等窗口组件。这时，RAD工具会自动编写和维护代码。而用户所要做的只是确定当点击按钮或选择选单选项时将要发生什么事件。

环境准备

环境window7（看清楚环境）
语言Python3
PyQt5的安装

python3 -m pip install PyQt5

刚开始安装就报这个错，哎！让我们按照提示升级一下

python3 -m pip install --upgrade pip
接着我们需要安装PyQt5-tools，因为Qt Designe就在这个库下

python3 -m pip install PyQt5-tools

下载好后路径在

D:\python3.6.5\Lib\site-packages\pyqt5_tools\Qt\bin这是我自己的路径，如果找不到直接在site-packages下面搜索即可，一般下载后的库都在这，点击那个designer.exe

0x02

Qt Designer使用介绍

刚打开Qt Designer，则弹出如下图所示的窗口。

1568785324483

创建新的Form给出了5个模板，其中Widget与Main Window最为常用。这里我们选择创建一个Main Window。

1568785664929

默认左边是控件栏，提供了很多空间类，我们可以直接拖放到widget中看到效果。

每个空间都有自己的名称，提供不同的功能，比如常用的按钮、输入框、单选、文本框等等。

右边是对窗口及控件的各种调整、设置、添加资源（列如:图片）、动作。还可以直接编辑Qt引以为豪的信号槽（signal和slot ）。

预览窗口

点窗体form--预览preview（Ctrl+R）

直接将控件拖进中间widget,然后预览看效果

1568786022737

类似上面这种

此时在右上角的Object Inspector（对象查看器）中可以看到主窗口中的已放置的对象以及其相应地Qt类。

1568786902246

以lineEdit为例，此时我们点击Main Window中的lineEdit或是在Object Inspector中选取lineEdit后，查看右侧的一块区域——Property Editor（属性编辑器）

lineEdit 这个输入的控件给我找半天,后来我发现其实可以搞个汉化包的

1568786998720

其主要包含属性有如下：

名称	含义
objectName	控件对象名称
geometry	相应宽和高与坐标
sizePolicy	控件大小的策略
minimumSize	最小的宽和高
maximumSize	最大的宽和高
font	字体
cursor	光标
…	…

窗口布局Layouts

Vertical Layout 纵向布局
Horizontal Layout 横向布局
Grid Layout 栅格布局
Form Layout 在窗体布局中布局
将布局Layouts拖动到窗体上会有红色框来显示（中间窗体中的四个小红框就是），Layout的一些属性可以通过属性编辑器来控制，一般包括：上下左右边距间隔，空间之间间隔等。

1568786525253

类似上面这种

上面的布局生成过程:拖一个Grid layout, 再拖一个vertical layout，再拖一个horizontal layout（注意在grid layout右边缘变成蓝色时松开鼠标左键就可以将grid layout分成两边的不同子布局了），最后在两边子布局中添加button。

通常我们使用栅格布局作为顶层布局，将控件放置好之后可以通过右键–布局–栅格布局，将布局充满整个窗体。我们可以先放入控件，然后ctrl选中多个控件，然后点击工具栏上快速布局工具进行布局。

0x03

UI文件转化为py文件

我简单的做了小小的demo，然后保存一下file-save肯定是个ui文件

1568786831462

用超文本打开后可以看到

1568787536493

从.ui文件的第一行我们便能看出，其实质是一个XML文件。ui文件中存放了在主窗口中的一切控件的相关属性。使用XML文件来存储UI文件，具有高可读性和移植性，因此我们可以方便地将.ui文件转换到.py文件，从而使得我们可以使用Python语言在设计的GUI上面编程。

pyuic5工具使用

转换其实不难，就是使用这个pyuic5这个工具，如果没有安装一下，切到文件存在的目录使用命令

1	pyuic5 - o 目标文件名.py 源文件名.ui

就会直接生成py文件

0x04

pyinstaller安装

这里先安装一个pyinstaller这个是将py文件转换为exe文件的一个库

python3 -m pip install pyinstaller

1.程序设置自定义图标：pyinstaller -F -i ico_path py_path

首先需要下载一张正常的ico，不能用直接修改后缀的。

下载图片：　　 https://www.easyicon.net

图片改为ico:　　http://www.ico.la/

输入命令 pyinstaller -F -i “demo.ico” “main.py”

-h，–help	查看该模块的帮助信息
-F，-onefile	产生单个的可执行文件
-D，–onedir	产生一个目录（包含多个文件）作为可执行程序
-a，–ascii	不包含 Unicode 字符集支持
-d，–debug	产生 debug 版本的可执行文件
-w，–windowed，–noconsolc	指定程序运行时不显示命令行窗口（仅对 Windows 有效）
-c，–nowindowed，–console	指定使用命令行窗口运行程序（仅对 Windows 有效）
-o DIR，–out=DIR	指定 spec 文件的生成目录。如果没有指定，则默认使用当前目录来生成 spec 文件
-p DIR，–path=DIR	设置 Python 导入模块的路径（和设置 PYTHONPATH 环境变量的作用相似）。也可使用路径分隔符（Windows 使用分号，Linux 使用冒号）来分隔多个路径
-n NAME，–name=NAME	指定项目（产生的 spec）名字。如果省略该选项，那么第一个脚本的主文件名将作为 spec 的名字

py文件转换为exe文件

然而，此时之间运行这个转换好的Python文件是无法显示任何窗口的。因为这个Python文件只有定义主窗口以及其控件的代码，所以添加以下代码

1568788863034

1568788838976

改完代码后可以输入命令验证一下，能弹出窗口就行

python3 test.py

验证完成后，进行最后一步打包

1568941601024

上图第一个红框中需要写pyinstaller.exe存放路径，第二个红框需要指定你要放在封面的图标文件（若不在路径下输入命令，需要指定绝对路径），最后一个就是我们需要打包的py文件了。

注意一下：必须是先图标后py脚本，顺序不能错

执行一半360会报毒，直接允许程序操作就行当然不提示就更好，你会提示成功了

1568941994559

然后回到文件夹中，程序在dist中

1568789454714

然后直接点击就行，会先出现命令行，然后就会弹出窗口！若想直接弹出窗口直接输入

D:\python3.6.5\Scripts\pyinstaller.exe -F -w -i 12.ico test.py

我拿我自己命令举例

1568789981939

fengx大佬的牛逼

0x05

报错解决ImportError: unable to find Qt5Core.dll on PATH

当然也不都是顺风顺水，对我来说每次肯定要出点幺蛾子！

最后一步打包的时候弹框出Failed to execute script

1568942732864

然后截图发现

1568944163773

因为我脑子有点笨笨的！所以找了一天的时间才找到解决方案

ImportError: unable to find Qt5Core.dll on PATH

总的来说呢，就是有的版本pyqt5库对系统变量的加载存在bug，具体原因只有官方才能解释了，咱也没法管了，对有bug的版本库提供一种办法就是，在主程序中pyqt5库import之前就对系统变量进行手动设置，import代码如下：

import sys, os
if hasattr(sys, 'frozen'):
    os.environ['PATH'] = sys._MEIPASS + ";" + os.environ['PATH']
from PyQt5 import QtCore, QtWidgets, QtGui
from PyQt5.QtWidgets import *
from untitled import Ui_MainWindow
from PyQt5.QtGui import *