pycharm中使用pyqt实现UI界面设计

参照几个相关的博文,终于搞定了PyGUI 的第一步,汗汗!
https://blog.csdn.net/g96889/article/details/84400373
https://www.cnblogs.com/dalanjing/p/6978373.html
使用QtDesigner设计第一个界面
学习python+pycharm利用pyQt5生成UI界面
PS:具体步骤链接更精准有效哦!

主要涉及到pycharm、Qt Designer、PyUIC

1、pycharm

首先需要安装好pycharm。这个话不多说可以参照
手把手教你如何安装Pycharm——靠谱的Pycharm安装详细教程

2、Qt Designer

Qt Designer是用来设计界面的,可以让用户在极短的时间里创建一个图形化用户界面的图形设计器。利用 Qt Designer,我们可以通过拖拉或点击的方式,在窗口的适当位置上添加一些输入框和按钮等窗口组件构造图形用户界面,并可预览效果。其界面如下:

pycharm中使用pyqt实现UI界面设计_第1张图片

2.1 如何配置Qt Designer?

Pycharm安装PyQt5和pyqt5-tools从而使用Qt Designer
网上配置Qt designer的教程很多,主要有使用anaconde下载以及在pycharm里的第三方库里下载。下面的链接整合了几个比较好的Qt designer配置方法。亲测过第二种方法,详细教程如下:
1、安装pyqt5的包
file -> setting->project->project interpreter->点击右边的加号->搜索pyqt5(如下图)
依次如下面图片所示:
pycharm中使用pyqt实现UI界面设计_第2张图片

pycharm中使用pyqt实现UI界面设计_第3张图片

pycharm中使用pyqt实现UI界面设计_第4张图片
如果出现下图所示的,叫表示成功安装Qt5了
在这里插入图片描述
2、在external tool中配置qt designer
pycharm中使用pyqt实现UI界面设计_第5张图片

pycharm中使用pyqt实现UI界面设计_第6张图片
name:(自己命名)
description:(做一个相关的描述)
program:找到之前下载好的designer.exe文件位置
working directory:如图

pycharm中使用pyqt实现UI界面设计_第7张图片
至此qt designer就配置好了,可以在主菜单栏的tool->external tools中找到刚刚配置好的pyqt designer。试着打开看看。
pycharm中使用pyqt实现UI界面设计_第8张图片
如果出现下图样式,则说明成功配置了
pycharm中使用pyqt实现UI界面设计_第9张图片

2.2 Qt designer的使用

QTdesigner的使用笔记

3、QtGUI

3.1QtGUI的配置方法

配置过程于qt designer相似,直接上图吧。
这里面program:需要找到自己装的python.exe文件位置。
***arguments:***-m PyQt5.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py
pycharm中使用pyqt实现UI界面设计_第10张图片

3.2配置QtGUI中遇到的坑

(后期补充吧)

4功能实现

成功完成上述步骤之后可以尝试能否实现想要的功能:即自己设计一个UI界面,并运行代码使其成功出现;编辑UI界面的后台逻辑关系,使其按照自己设定的功能运行。
第一部分成三步:
1、打开pycharm->使用qt designer编辑你的UI界面
进入qt designer之后你回遇到一个这样的界面,这表示你需要创建的界面类型,请记住自己所选的类型,对于后面程序编写很重要。
pycharm中使用pyqt实现UI界面设计_第11张图片
例如选择Main Window框架,点击create创建,从1框中拖拽组件进入面板,命名调整位置及大小,如图所示。(命名为calculator)
pycharm中使用pyqt实现UI界面设计_第12张图片

2、保存成.UI格式文件,使用pyGUI将其转换成,py文件
点击保存,如果在打开pycharm时已经创建了项目,则自动保存在该项目 之下,如果未创建项目则自定义储存路径,保存好.ui文件之后,返回pycharm界面会发现已经生成calculator.ui文件
pycharm中使用pyqt实现UI界面设计_第13张图片
右键该文件,选择external tools 使用之前配置好的pyGUI将其转换问.py文件
pycharm中使用pyqt实现UI界面设计_第14张图片
会发现自动生成.py文件
pycharm中使用pyqt实现UI界面设计_第15张图片

内部代码会显示由.ui文件生成而来。至此已经成功获得了UI界面的.py文件。
pycharm中使用pyqt实现UI界面设计_第16张图片
3、修改并运行上述.py文件,成功弹出你刚刚设计的界面
在代码段末尾添加如下代码:

import sys
import untitled 
from PyQt5.QtWidgets import QApplication, QMainWindow

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

其中第二行import untitled填写你的.py文件名;
PS:如果你创建的时使用的时Widget框架,则将上述代码中所有 MainWindow 替换成Widget。

试运行:右键.PY文件选择RUN,或者使用上方菜单栏RUN
pycharm中使用pyqt实现UI界面设计_第17张图片
pycharm中使用pyqt实现UI界面设计_第18张图片
成功弹出刚刚设计的界面。
第二部分现在还在试运行后期补充

你可能感兴趣的:(pyQT)