PyQt5系列教程(二)利用QtDesigner设计UI界面
软硬件环境
- OS X EI Capitan
- Python 3.5.1
- PyQt 5.5.1
- PyCharm 5.0.1
前言
在PyQt5系列教程的第一篇http://blog.csdn.net/djstavaV/article/details/50218157，咱们已经搭建好了开发环境，今天，咱们就用Python开发第一个Qt GUI程序，让你们感觉下Qt开发的魅力，熟悉下Qt开发GUI程序的通常流程。python
制做程序UI界面，通常会有2种方法，利用UI制做工具和纯代码编写，像移动开发中的Android和iOS都是这样，在PyQt5中，咱们也有这么2种方式。api
QtDesigner工具简介
QtDesigner是专门用来制做Qt程序UI界面的工具，它使用起来很是简单，只要经过拖拽和点击就能够完成复杂的界面设计，并且还能够随时预览查看效果图。app
其中，区域1是UI界面制做导向，QtDesigner为咱们提供了一些经常使用模块，很是方便；区域2是UI控件列表；区域3是控件属性列表；区域4是Action Editor编辑列表；区域5信号和槽的编辑列列表；区域6是资源处理窗口。函数
第一个PyQt5程序
说了这么多，还不如来动手实践一下。工具
这个是咱们第一个PyQt5项目的界面效果图，须要实现的是当点击界面上的按钮时，弹出一个提示框，提示框内显示一串文字。字体
好了，目标定好了，立刻开始去实现它。ui
QtDesigner设计UI
建立一个基于Main Window模块的UI文件，取名叫firstPyQt5.ui。从Widget Box中找到(也能够)Push Button，将它拖拽到工做空间里，调整位置，在Button上输入文字，调整字体及大小，这些均可以在Property Editor里操做。按钮点击弹框的操做会牵出Qt里很是重要的一对概念，即信号和槽(signal and slot)，关于这个我打算再开一篇博文细讲。如今你只须要知道slot就是一个函数，若是一个signal和一个slot绑定之后，那么signal被触发，slot就会被执行。.net
那么问题来了，怎么在QtDesigner里绑定signal和slot呢？打开菜单栏里的Edit—>Edit Signals/Slots，而后光标移到按钮上点击拖拽，这时会弹出一个编辑框命令行
由于是点击，因此signal选择clicked()，slot函数如今尚未，咱们就点击Edit新建一个，叫firstPyQt5_button_click()设计
为了演示一下资源文件的使用，这里导入两张图片，一张给主窗口，另外一张给帮助菜单项里的Action。
在QtDesigner引用资源文件以前，须要先准备一个qrc文件，它跟xml文件比较相似，用来制定资源文件的路径
<RCC version="1.0">
<qresource>
<file>qt.png</file>
<file>penguin.jpg</file>
</qresource>
</RCC>
接下来就能够在QtDesigner的Resource Browser里倒入qrc文件，这样qrc文件中描述的资源就可使用了
将firstPyQt5.ui转换成python代码
很是简单，经过Qt提供的命令行工具pyuic5就能够轻松实现
pyuic5 -o firstPyQt5.py firstPyQt5.ui
建立PyCharm工程
新建一个新的python文件main.py,代码以下
# -*- coding: utf-8 -*-
__author__ = 'djstava@gmail.com'
import sys
from PyQt5.QtWidgets import QApplication , QMainWindow
from firstPyQt5 import *
if __name__ == '__main__':
'''
主函数
'''
app = QApplication(sys.argv)
mainWindow = QMainWindow()
ui = Ui_mainWindow()
ui.setupUi(mainWindow)
mainWindow.show()
sys.exit(app.exec_())
接下修改下firstPyQt5.py文件，主要是去实现slot函数，由于以前在QtDesigner里没有实现，让它弹出一个消息框
def firtPyQt5_button_click(self):
QtWidgets.QMessageBox.information(self.pushButton,"标题","这是第一个PyQt5 GUI程序")
最后运行下工程
这里通常将ui文件单独存成一个文件，便于更新。