python怎么使用qtdesigner设计的ui 如何在pyqt中使用qt的ui来自

PyQt Designer\u8bbe\u8ba1\u51fa\u6765\u7684\u754c\u9762\u600e\u4e48\u548cpython \u4ee3\u7801\u7ed3\u5408\u8d77\u6765

\u4fdd\u5b58\u4e3a.ui\u7684\u6587\u4ef6\u540e\uff0c\u53ef\u4ee5\u4ecepyqt\u7684\u4ee3\u7801\u6587\u4ef6\u91cc\u76f4\u63a5\u5f15\u7528\u3002\u5177\u4f53\u5b9e\u73b0\uff0c\u5982\u679c\u4f60\u662f\u5728win\u4e0b\u88c5\u7684\u4f1a\u81ea\u5e26Pyqt\u7684demo\uff0c\u53c2\u770b\u4e0b\u6e90\u7801\u5c31\u53ef\u4ee5\uff0c\u5982\u679c\u662fUnix\u91cc\uff0c\u53ef\u4ee5\u53bb\u5b98\u7f51\u4e0b\u4efd\u5355\u72ec\u7684tar.gz\u7684\u5305\uff0c\u91cc\u9762\u4e5f\u6709demo\u90e8\u5206\u7684\u6e90\u7801
uic.loadUi \u65b9\u6cd5\u53ef\u4ee5\u5bfc\u5165ui\u6587\u4ef6
\u4f46\u662f\u6211\u53d1\u73b0\uff0c\u5728\u4f17\u591a\u7684PyQt demo\u91cc\u9762\u53ea\u7528\u5230.ui \u6587\u4ef6\u7684\u4f8b\u5b50\u53ea\u662f\u5360\u4e86\u4e00\u90e8\u5206\uff0c\u5e76\u4e0d\u662f\u5927\u90e8\u5206\u4f8b\u5b50\u90fd\u662f\u901a\u8fc7\u8f7d\u5165ui\u6587\u4ef6\uff0c\u800c\u662f\u542c\u8fc7Python \u8c03\u7528PyQt \u62fc\u6210\u7684 \u754c\u9762\u3002
\u6216\u8005\u8bf4\u662f\u4e0d\u662f\u540e\u8005\u6709\u7740\u66f4\u597d\u7684\u63a7\u5236\u6216\u8005\u6027\u80fd\uff1f


\u5176\u5b9e\u6211\u662f\u7528Vala\u5199GTK\u7684\uff0c\u6211\u81ea\u5df1\u662f\u7528\u76f4\u63a5\u5728\u4ee3\u7801\u91cc\u5199\u5e03\u5c40\u7684\uff0c\u4e0d\u7528\u53ef\u89c6\u5316\u7684\u5e03\u5c40\u65b9\u6848\uff0c\u5f53\u7136\u540e\u8005\u6027\u80fd\u4f1a\u66f4\u597d\u4e00\u4e9b\u4f46\u662f\u53ef\u4ee5\u5ffd\u7565\u4e0d\u8ba1\uff0c\u6709\u66f4\u597d\u7684\u53ef\u63a7\u6027\u662f\u771f\u7684\u3002

\u3000\u3000\u6b65\u9aa4\u5982\u4e0b\uff1a
\u3000\u3000\u5728\u5f00\u59cb\u83dc\u5355\u6240\u6709\u5e94\u7528\u4e2d\u627e\u5230PyQt\u6587\u4ef6\u5939\u4e0b\u7684Designer\uff0c\u53cc\u51fb\u6253\u5f00\u3002
\u3000\u3000\u65b0\u5efa\u7a97\u4f53\u5bf9\u8bdd\u6846\u9009\u62e9\u9017Dialog without Buttons\u5730\uff0c\u70b9\u51fb\u521b\u5efa\u6309\u94ae\u3002
\u3000\u3000\u5728\u5de6\u4fa7\u63a7\u4ef6\u680f\u4e2d\u62d6\u5165\u4e00\u4e2aLabel\u548c\u4e00\u4e2aLine Edit\u5e76\u5c06\u5176\u9009\u4e2d\u540e\u8fdb\u884c\u62d6\u52a8\u590d\u5236\u4f4d\u4e09\u4e2a\u3002\u518d\u4ece\u5de6\u4fa7\u62d6\u5165\u4e00\u4e2a PushButton\u6309\u94ae\u3002
\u3000\u3000\u53cc\u51fbLabel\u548cPushButton\u63a7\u4ef6\uff0c\u8f93\u5165\u540d\u79f0\uff0c\u4f7f\u5176\u7b26\u5408\u8981\u6c42\u3002
\u3000\u3000\u5206\u522b\u9009\u4e2d\u5355\u4e2a\u63a7\u4ef6\uff0c\u5728\u53f3\u4fa7\u5c5e\u6027\u680f\u4e2d\u4fee\u6539\u5176\u5c5e\u6027\uff0c\u5e76\u6446\u653e\u597d\u5927\u81f4\u4f4d\u7f6e\u3002\u4fee\u6539\u5c5e\u6027\u5e94\u5305\u62ec\u7ed9\u63a7\u4ef6\u4e00\u4e2a\u89c1\u540d\u77e5\u610f\u7684\u5bf9\u8c61\u540d\u79f0\uff1b\u5bc6\u7801Line Edit\u63a7\u4ef6\u7684echoMode\u5c5e\u6027\u7684\u503c\u8bbe\u7f6e\u4e3aPassword\uff0c\u5373\u4e0d\u53ef\u89c1\uff1b\u7cbe\u786e\u8c03\u6574\u63a7\u4ef6\u5927\u5c0f\u548c\u6446\u653e\u4f4d\u7f6e\uff0c\u4f7f\u4e4b\u5bf9\u9f50\u7b49\u7b49\uff08\u6446\u653e\u4f4d\u7f6e\u4ea6\u53ef\u901a\u8fc7\u4e0b\u8ff0\u7684\u9017\u5e03\u5c40\u5730\u8fdb\u884c\u5bf9\u9f50\uff09\u3002
\u3000\u3000\u5355\u51fb\u83dc\u5355\u680f\u7684Edit\uff0c\u7f16\u8f91Tab\u987a\u5e8f\uff0c\u4ece\u4e0a\u5230\u4e0b\u4f9d\u6b21\u662f1\uff0c2\uff0c3\uff0c4\u3002
\u3000\u3000\u4ece\u5de6\u4fa7\u62d6\u5165\u4e00\u4e2aHorizontal Spacer\u63a7\u4ef6\u7f6e\u4e8ePushButton\u63a7\u4ef6\u540c\u884c\u5de6\u4fa7\uff0c\u5e76\u4fee\u6539\u4f7f\u5176\u957f\u5ea6\u9002\u5b9c\u3002\u5206\u522b\u9009\u62e9\u4f4d\u4e8e\u540c\u4e00\u884c\u7684\u63a7\u4ef6\u5e76\u70b9\u51fb\u9017\u7a97\u53e3\u5730\u4e2d\u7684\u9017\u6c34\u5e73\u5e03\u5c40\u5730\uff0c\u6700\u540e\u9009\u4e2d\u6240\u6709\uff0c\u70b9\u51fb\u9017\u7a97\u53e3\u5730\u4e0b\u62c9\u83dc\u5355\u4e0b\u7684\u9017\u5782\u76f4\u5e03\u5c40\u5730\u3002\u9009\u4e2d\u6240\u6709\uff0c\u5e76\u9017\u6805\u683c\u5e03\u5c40\u5730\u548c\u8c03\u6574\u5bf9\u8bdd\u6846\u5230\u5408\u9002\u5927\u5c0f\uff0c\u7ed3\u679c\u5982\u4e0b\u3002

\u3000\u3000\u5207\u6362\u5230\u9017\u7f16\u8f91\u4fe1\u53f7/\u69fd\u5730\u6a21\u5f0f\uff0c\u62d6\u52a8\u786e\u5b9a\u5230\u7a7a\u767d\u4f4d\u7f6e\u3002\u5728\u5f39\u51fa\u7684\u9017\u914d\u7f6e\u8fde\u63a5\u5730\u5bf9\u8bdd\u6846\u4e2d\u5de6\u9009\u62e9\u9017clicked()\u5730,\u53f3\u9009\u62e9\u9017accept()\u5730\u3002
\u3000\u3000\u4fdd\u5b58\u4e3aui\u6587\u4ef6\uff0c\u4e0d\u59a8\u547d\u540d\u4e3atest\u3002
\u3000\u3000\u7ec8\u7aef\u4e0b\u4f7f\u7528\u76d8\u7b26\u548ccd\u547d\u4ee4\u8fdb\u5165\u5230ui\u6587\u4ef6\u6240\u5728\u7684\u4f4d\u7f6e\u3002\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u8fdb\u5165\u4f4d\u7f6e\u9700\u8981\u5206\u4e24\u6b65\u8d70\u3002\u4f8b\u5982ui\u4fdd\u5b58\u5728 C:/savehere/,\u800c\u5f53\u524d\u7684\u76ee\u5f55\u662f\u5728D:/,\u5219\u6211\u4eec\u8981\u547d\u4ee4\u63d0\u793a\u7b26\u7a97\u53e3\u8fd0\u884cC:\u548ccd C:/savehere/\uff0c\u4e0d\u533a\u5206\u5148\u540e\u987a\u5e8f\u3002
\u3000\u3000\u8fdb\u5165\u76ee\u5f55\u540e\uff0c\u4f7f\u7528pyuic4\u5de5\u5177\u8fdb\u884c\u8f6c\u5316\uff0c\u5177\u4f53\u6572pyuic4 test.ui -o test.py\uff0c\u5e76\u56de\u8f66\u3002
\u3000\u3000\u53f3\u952e\u70b9\u51fb\u5728test.ui\u76f8\u540c\u76ee\u5f55\u4e0b\u751f\u6210test.py,\u9009\u62e9Edit with IDLE\u3002\u5c31\u53ef\u770b\u5230\u4ee3\u7801\u3002

软硬件环境

• OS X EI Capitan

• Python 3.5.1

• PyQt 5.5.1

• PyCharm 5.0.1

前言

在PyQt5系列教程的第一篇h50218157，我们已经搭建好了开发环境，今天，我们就用Python开发第一个Qt GUI程序，让大家感受下Qt开发的魅力，熟悉下Qt开发GUI程序的一般流程。

制作程序UI界面，一般会有2种方法，利用UI制作工具和纯代码编写，像移动开发中的Android和iOS都是这样，在PyQt5中，我们也有这么2种方式。

QtDesigner工具简介

QtDesigner是专门用来制作Qt程序UI界面的工具，它使用起来非常简单，只要通过拖拽和点击就可以完成复杂的界面设计，而且还可以随时预览查看效果图。

其中，区域1是UI界面制作导向，QtDesigner为我们提供了一些常用模块，非常方便；区域2是UI控件列表；区域3是控件属性列表；区域4是Action Editor编辑列表；区域5信号和槽的编辑列列表；区域6是资源处理窗口。

第一个PyQt5程序

说了这么多，还不如来动手实践一下。

这个是我们第一个PyQt5项目的界面效果图，需要实现的是当点击界面上的按钮时，弹出一个提示框，提示框内显示一串文字。

好了，目标定好了，马上开始去实现它。

QtDesigner设计UI

创建一个基于Main Window模块的UI文件，取名叫firstPyQt5.ui。从Widget Box中找到(也可以)Push Button，将它拖拽到工作空间里，调整位置，在Button上输入文字，调整字体及大小，这些都可以在Property Editor里操作。按钮点击弹框的操作会牵出Qt里非常重要的一对概念，即信号和槽(signal and slot)，关于这个我打算再开一篇博文细讲。现在你只需要知道slot就是一个函数，如果一个signal和一个slot绑定以后，那么signal被触发，slot就会被执行。

那么问题来了，怎么在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__ = '[email protected]'



• 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文件单独存成一个文件，便于更新。

扩展阅读：python手机版下载官方 ... python初学者使用教程 ... python手机在线编程入口 ... python基础代码大全 ... python代码自动生成器 ... python官网入口 ... python编程入门自学 ... python idle使用教程 ... python界面怎么调成中文版 ...