Qt Designer极速开发python桌面小工具详解

今天来讲下如何使用Qt Designer设计UI,快速实现pyhon桌面小工具的开发,且UI与逻辑分离。

我的环境如下:

  • Windows 7
  • Python 3.7.1
  • PyCharm PROFESSIONAL 2019.3 (你可以用各种同类IDE替代或者安装它)
  • PyQt5
  • Qt Designer

本文并不讨论Python和PyCharm的安装,关于PyCharm具体安装可以参见文章《2020最新Pycharm四步破解教程(永久破解)》(再次提醒,PyCharm版本需要与文中版本一致,否则将导致破解失败)

Qt Designer极速开发python桌面小工具详解

一、安装PyQt5

下面直接使用pip来安装PyQt5,此处可能是pip/pip3,或者两者皆可,后面不再重复

1、直接pip安装PyQt5

pip install PyQt5

2、由于Qt Designer已经在Python3.5版本从PyQt5转移到了tools,因此我们还需要安装pyqt5-tools

pip install pyqt5-tools

3、到这一步,PyQt5就安装完成了,你可以通过下面来检查是否已经安装成功:

在cmd中输入pyuic5,如果返回“Error: one input ui-file must be specified”说明安装成功。

Qt Designer极速开发python桌面小工具详解

二、初识Qt Designer

根据参考文章:在win10中可以用Win+S呼出Cornata主面板(搜索框)来启动各种应用,那么这里就是在搜索框中输入designer并敲回车,就能够启动Qt Designer了。

但我的系统为win7,并不能这样操作,最后只有在python安装路径下搜索“designer.exe”

最终路径为 :

[python安装目录]/Lib/site-packages/qt5_applications/Qt/bin

Qt Designer极速开发python桌面小工具详解

双击启动。初次启动会弹出这个“新建窗体”窗口,一般来说默认选择“Main Window”然后点击“创建”就可以了。下方有个“启动时显示这个对话框”的勾选框,如果不想每次启动都看到这个“新建窗体”窗口,可以取消勾选。

Qt Designer极速开发python桌面小工具详解

创建“Main Window”之后,我们会看到如下画面:

Qt Designer极速开发python桌面小工具详解

下面就来简单介绍下整个画面的构成:

左侧的“Widget Box”就是各种可以自由拖动的组件;

中间的“MainWindow - untitled”窗体就是画布;

右上方的"对象查看器"可以查看当前ui的结构;

右侧中部的"属性编辑器"可以设置当前选中组件的属性;

右下方的"资源浏览器"可以添加各种素材,比如图片,背景等等,目前可以不管;

大致了解了每个板块之后,就可以正式开始编写第一个UI了。

三、绘制一个简单的汇率转换器UI

1、添加输入框

在左侧的“Widget Box”栏目中找到“Input Widgets”分类,将“Line Edit”拖拽到屏幕中间的“MainWindow”画布上,你就获得了一个单行输入框,如下图所示。

Qt Designer极速开发python桌面小工具详解

2、添加文本

在左侧的“Widget Box”栏目中找到“Display Widgets”分类,将“Label”拖拽到“Line Edit”旁边,你就获得了一个仅用于显示文字的文本框,如下图所示。

Qt Designer极速开发python桌面小工具详解

双击上图中的“TextLabel”,就可以对文本进行编辑,这里我们将其改成美元缩写“USD”,如下图所示。如果文字没有完全展示出来,可以自行拖拽空间改变尺寸。

Qt Designer极速开发python桌面小工具详解

特别提醒:编辑完文本之后记得敲击回车令其生效!

3、添加按钮

使用同样的方法添加一个按钮(PushButton)并将其显示的文本改成“转换”,如下图所示。

Qt Designer极速开发python桌面小工具详解

4、按照上面1、2步骤,完善汇率UI,如下图所示。

Qt Designer极速开发python桌面小工具详解

5、修改窗口标题

下面修改窗口标题。选中右上方的"Object Inspector"中的“MainWindow”,然后在右侧中部的"属性编辑器"中找到“windowTitle”这个属性,在Value这一栏进行修改(改为“汇率换算器”),修改完记得敲击回车。

Qt Designer极速开发python桌面小工具详解

6、编辑菜单栏

注意到画布的左上方有个“在这里输入”(Type Here),双击它即可开始编辑菜单栏。菜单栏支持创建多级菜单以及分割线(separator)。我随意创建了一些菜单项目,如下图所示。

Qt Designer极速开发python桌面小工具详解

7、预览

使用快捷键Ctrl+R预览当前编写的GUI(或者从菜单栏的Form > Preview / Preview in进入)

此时你尝试去缩放窗口,会发现组件并不会自适应缩放,因此我们需要回到Qt Designer中进行一些额外的设置。

Qt Designer极速开发python桌面小工具详解

上一页123下一页


留言