pycharm pyqt5 gui designer 安装及配置使用

news2024/11/23 3:58:05

参考文章：
https://blog.csdn.net/wshyb0314/article/details/127916084
https://zhuanlan.zhihu.com/p/32259868

一、安装pyqt5、pyqt5-tools(QtDesigner在这个包里)

pip install pyqt5 -i https://pypi.douban.com/simple --trusted-host pypi.douban.com
pip install pyqt5-tools -i https://pypi.douban.com/simple --trusted-host pypi.douban.com

二、配置pycharm

打开pycharm，然后按照下面路径打开extrernal tools：

file->设置->tools->extrernal tools->点击“+”号->弹出对话框，配置如下：

(1).增加qt设计界面“qt designer”

在这里插入图片描述
— 这个就是设计qt界面的工具

program选择pyqt安装目录中 designer.exe 的路径
work directory 使用变量 $p ro j ec t f i l e d i r$ （点击后面的…）
在这里插入图片描述

(2).增加“pyuic” ——这个主要是用来将 qt界面转换成 py代码

program选择pyqt安装目录中 pyuic5.bat 的路径
parameters设置为 $f i l e nam e$ -o $f i l e nam e w i t h o u t e x t e n s i o n$ .py
work directory 设置为 $p ro j ec t f i l e d i r$ （点击后面的…）
在这里插入图片描述

工具建立成功后返回externaltools界面，如下：
在这里插入图片描述

可以在tools里面看到我们的工具
在这里插入图片描述

三、使用pyqt

1、点击qtdesigner工具，弹出设计器窗口：
在这里插入图片描述

如果打开qt designer 时，提示this application failed to start because no qt platform plugin could be：

可以把 c:usersbobin.yangpycharmprojectsuntitledvenvlibsite-packagespyqt5_toolsqtpluginsplatforms 目录的qwindows.dll拷贝到

c:usersbobin.yangpycharmprojectsuntitledvenvlibsite-packagespyqt5_toolsqtbinplatforms 目录里, 或者直接覆盖原来的文件。

注意：两个文件, 正确的文件大小 1.42m, 错误文件大小38k。

2、制作窗体，另存该界面为untitled.ui文件到项目文件夹下。
在这里插入图片描述

3、返回pycharm 项目界面，项目列表下多出了这个.ui文件
在这里插入图片描述

把制作好的ui文件打开后，选择pyuic即可转换为*.py文件

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'D:\PycharmProjects\UbuntuPycharm\Operation_tool\designer\test.ui'
#
# Created by: PyQt5 UI code generator 5.15.9
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_Dialog(object):
    def setupUi(self, Dialog):
        Dialog.setObjectName("Dialog")
        Dialog.resize(754, 537)
        self.buttonBox = QtWidgets.QDialogButtonBox(Dialog)
        self.buttonBox.setGeometry(QtCore.QRect(20, 140, 171, 32))
        self.buttonBox.setOrientation(QtCore.Qt.Horizontal)
        self.buttonBox.setStandardButtons(QtWidgets.QDialogButtonBox.Cancel|QtWidgets.QDialogButtonBox.Ok)
        self.buttonBox.setObjectName("buttonBox")

        self.retranslateUi(Dialog)
        self.buttonBox.accepted.connect(Dialog.accept) # type: ignore
        self.buttonBox.rejected.connect(Dialog.reject) # type: ignore
        QtCore.QMetaObject.connectSlotsByName(Dialog)

    def retranslateUi(self, Dialog):
        _translate = QtCore.QCoreApplication.translate
        Dialog.setWindowTitle(_translate("Dialog", "Dialog"))

4、调用方式

# -*- coding utf-8 -*-
import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QDialog
from Operation_tool.designer.test import Ui_Dialog  #调用designer生成的test.py Ui_Dialog
# from Operation_tool.designer.test import Ui_MainWindow


# class MyWindow(QMainWindow, Ui_MainWindow):
#     def __init__(self, parent=None):
#         super(MyWindow, self).__init__(parent)
#         self.setupUi(self)

class MyDialog(QDialog, Ui_Dialog):
    def __init__(self, parent=None):
        super(MyDialog, self).__init__(parent)
        self.setupUi(self)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    # myWin = MyWindow()
    myWin = MyDialog()   #创建的ui类别不是MainWindow，而应该改为Dialog，才能使用界面中的OK CANCEL等QDialogButtonBox类的按钮
    myWin.show()
    sys.exit(app.exec_())

‘QMainWindow‘ object has no attribute ‘accept‘
解决方法： https://blog.csdn.net/qq_39020664/article/details/116989574

执行结果
在这里插入图片描述

四、designer工具界面说明

Qt Designer工具主界面

打开路径：${python安装目录}/Lib/site-packages/pyqt5_tools/designer.exe。主界面如下：
在这里插入图片描述
主界面不同区域介绍：
工具箱区域：提供GUI界面开发使用的各种基本控件，如单选框、文本框等。可以拖动到新创建的主程序界面。
主界面区域：用户放置各种从工具箱拖过来的各种控件。模板选项中最常用的就是Widget（通用窗口）和MainWindow（主窗口）。二者区别主要是Widget窗口不包含菜单栏、工具栏等。可以分别创建对比看看。
对象查看器区域：查看主窗口放置的对象列表。
属性编辑器区域：提供对窗口、控件、布局的属性编辑功能。比如修改控件的显示文本、对象名、大小等。
信号/槽编辑器区域：编辑控件的信号和槽函数，也可以添加自定义的信号和槽函数。