Qt5入门系列1：使用QtCreator绘制UI界面

获取更多文章和更新，请关注我的个人主页：https://leiting6.cn

写在前面

关于PyQt入门的教程网上并不缺少，说实话，真稀缺的还是比较进阶的教程。不过我自己也是自学Python到现在，并且使用PyQt写了几个小工具，感觉挺不错，所以从上手入门开始写。我的教程里面可能并不会非常系统和全面，只是觉得作为新手学习一门新的语言和工具，成就感是一件非常重要的事情！快速入门，从照猫画虎到举一反三再到自己独立编写出工具，是最能激发热情的。在此过程中，必定会学会查阅官方文档和网络文章来充实细枝末节的知识，认知体系也就自然系统、全面了。

关于QTCreator

QtCreator是跨平台的QT IDE，提供图形化的UI绘制工具。目前QTCreator内部只支持C++语言编写后台逻辑，但是既然QT已经为Pyhton做了比较全面的移植，所以后面肯定会说到怎么能利用Python来给图形界面编写后台功能。

下载QTCreator

首先，你的系统中必须准备好Python环境，并且安装对应版本的PyQt5库，再然后安装对应版本的QtCreator。

点击跳转到Python官方下载地址

点击跳转到各个版本PyQt5安装包下载地址

点击跳转到QTCreator官方下载地址

QT官方提供各个版本的QTCreator下载，到目前为止最新版本为4.5.2，下载的时候注意选择适合自己操作系统和Python版本的装包。比如我使用的是Win10 64bit系统，安装的是Python3.4 32bit，所以我下载的是qt-creator-opensource-windows-x86-4.5.2.exe。

之所以还在用Python3.4是因为py2exe支持的比较好，可以比较完美的将Python工程转换为exe可执行文件。

使用QTCreator

认识QtCreator

安装QTCreator之后打开软件，我们会发现这个IDE的界面包含的组件并没有很多。这是因为QTCreator不是完整的QT IDE，它更关注于快速地完成项目设计和开发。

QTCreator的主界面内容我就不一一介绍了，这里从创建工程开始讲。

文件 -> 新建文件或者项目 -> QT ，然后我们可以看到如下界面：

1.jpg

 

这里不要着急选择Python，因为那并不是我们所需要的。选择QT，然后选择Qt设计师界面类。我们需要创建一个类。面向对象语言中，类是个很重要的概念，C++中会用到，Python中同样会用到。

2.jpg

这一步我们可以选择：

• 创建Dialog（对话框），包括带按钮、不带按钮的

• 创建Main Window（主窗口）

• 创建Widget（小窗口）

除此之外，还可以创建各种窗口部件类；至于各个部件是什么，不着急，等我们进了设计界面自然能看到。开始我们先选择创建一个Main Window吧，在Main Window里面有需要的话可以放置各种部件，以及创建新的Wighet。

一直点击下一步，选择存储位置，然后点击完成，进入设计界面。

3.jpg

稍微研究一下就可以发现：

• QtCreator软件最中间就是我们创建的Main Window的UI界面，起初是空白的，只有一个外框可以调整大小；调整大小的时候观察对象属性中的geometry属性中的分辨率大小也会随之改变，这个分辨率很明显就是Main Window的分辨率了；在对象属性中，我们可以更改这个主窗口的名称（objectName属性），这里保持默认的MainWindow；还可以改变主窗口的标题（windowTitle），我的想法是先做一个最简单的加法器，所以改为“加法器”；

• 左侧工具栏中有很多控件，很多也是我们平时使用软件过程中经常见到的，比如按钮（pushButton），下拉框（comboBox），单行文本框（lineEdit），多行文本框（textEdit）等等；不知道做什么的可以通过搜索引擎来寻找一下信息，更直白的方法是拖入到Main Window中看看具体是什么样子。

拖入控件，设置属性

一个简单的加法器，包含一个程序界面标题、2个输入数字的单行文本框、一个加号、一个等于号、和一个显示结果的单行文本框，而且我想要显示结果的文本框是只读的。大概思索一下会是怎样一个布局，这时候就可以动手来改变一下主窗口的形状并拖放控件了。

具体怎么操作就不赘述了，我设计完成之后是下面这个样子：

image.png

下面是所有用到的组件的属性：

组件	objectName属性	text属性	其他属性
mainWindow	MainWindow	---	---
label	label_MainTitle	"简易加法器"	alignment->水平的->alignHCenter
lineEdit	lineEdit_Adder1	---	---
label	label_plus	"+"	alignment->水平的->alignHCenter
lineEdit	lineEdit_Adder2	---	---
label	label_equals	"="	alignment->水平的->alignHCenter
lineEdit	lineEdit_sum	---	readOnly
pushButton	pushButton_calc	"计算"	---

表格中，组件都是从工具栏中拖拽进来的；objectName是这个组件的名字，只所以要起名字，是不想组件多了之后都叫label1、label2、label3，导致难以分辨，这个名字是我们后面写QT后台逻辑必须用到的；text属性决定了标签、按钮显示什么内容；当然还有些其他的属性可以实现其他的功能和特性。

怎么布局好看、实用，还是需要自己摸索，当然QtCreator本身也是有各种layout方式可以自动帮你排版的，具体的可以点击左侧工具栏中的layout尝试一下。到此利用QtCreator进行一个简单程序的UI设计就完成了，记得保存。进入创建工程时选择的文件夹，可以发现一个.ui文件。

作者：雷霆同学
链接：https://www.jianshu.com/p/3be3bfcdd62e
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。