1.设计页面

首先第一步,在pycharm的工具栏里Tools->External Tools 打开QT designer
配置见前一篇用python制作的软件1-需求分析和环境部署

python qt CreateBrowserSync 缩放网页_qt

然后弹出来一个对话框,直接点击创建,就有一个新的窗体。

python qt CreateBrowserSync 缩放网页_qt_02

创建之后,得到一个空白的页面。

我的需求是录入工号得到token,所以我创建了一个Line Edit输入框,直接在工具栏里鼠标按住,拖动过来就行

python qt CreateBrowserSync 缩放网页_python_03


我的token很长,需要换行,我用的是Text Edit。也是同理选中拖到页面上即可。然后我需要一个查询按钮来触发查询功能。我用的PushButton。双击这个按钮可以修改文字。

python qt CreateBrowserSync 缩放网页_qt_04


预留了查询功能入口,我还想在前端做一些小功能。

1)关闭页面
2)清空输入框
3)复制查询结果到系统粘贴板

我先把按钮画上去,也是用的PushButton。

python qt CreateBrowserSync 缩放网页_前端_05


考虑到用户友好,我加了两个标签。选中label 拖到页面上,然后选中修改文字。这样我要的页面基础就画完了。现在开始实现功能。

python qt CreateBrowserSync 缩放网页_前端_06

2.实现前端功能

1)关闭页面

点击关闭按钮,在对象查看器里看到pushButton_4。
在右下角有一个信号/槽编辑器,点击加号新增。
pushButton_4按钮就是这个事件的发送者。
我们的目的是点这个按钮时关闭这个页面。因此接受者是整个页面,即MainWindow。
我们是通过点击按钮触发,所以信号是通过clicked()发送。
目的是关闭close()

python qt CreateBrowserSync 缩放网页_python_07


2)清空输入框

和关闭页面一样,先找到清空按钮是哪一个,我这里就是pushButton_3

目的是清空输入框 ,则接受者就是输入框,也是通过点击触发,目的时间是清空clear()

编辑完如下。

python qt CreateBrowserSync 缩放网页_qt_08


到这里就实现前端的功能了。

在这里我们选择保存我们画的页面。

3.转换成py文件

打开pycharm,因为我们之前是配置过在当前目录下生成py文件,所以在这里直接找到刚刚保存的ui文件,右键菜单里选择之前配置的工具。

python qt CreateBrowserSync 缩放网页_前端_09

然后就在当前目录下生成了一个相同名称的py文件。
可以先执行一下py文件,发现刚刚的前端小功能已经可以用了。
因为是手画的页面,页面的精准度有待商议。
强迫症朋友如果想让页面看起来更简洁整齐,这个时候就可以看一下输入框的尺寸,修改代码做到统一。

4.一些可能遇到的问题

1.进入QT designer时没有弹出新建窗体。

可以点击文件-》创建。或者直接快捷键ctrl+N来创建新窗体。

2.在转换成py文件后,执行py没跳出来页面
可以检查下py文件最后是否自动生成了以下这段代码。

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    ui.setupUi(MainWindow)
    MainWindow.show()
    sys.exit(app.exec_())

这段代码就是帮助我们执行调试用的,其实后面我也会注释掉。
如果没有自动生成,跟配置项有关,
可以打开设置看一下。Arguments里是否有-x,如果没有,就不会自动生成该段代码

$FileName$ -o $FileNameWithoutExtension$.py -x

python qt CreateBrowserSync 缩放网页_qt_10


(大概这么多,有遇到别的会更新上来)