091.PyQt5_QtDesigner_简介&环境配置安装

我 的 个 人 主 页：👉👉 失心疯的个人主页 👈👈
入 门 教 程 推 荐 ：👉👉 Python零基础入门教程合集 👈👈
虚 拟 环 境 搭 建 ：👉👉 Python项目虚拟环境(超详细讲解) 👈👈
PyQt5 系 列 教 程：👉👉 Python GUI(PyQt5)文章合集 👈👈
Oracle数据库教程：👉👉 Oracle数据库文章合集 👈👈
优 质 资 源 下 载 ：👉👉 资源下载合集 👈👈

QtDesigner_简介

搭建GUI界面的方式

• 纯手码
  • 一行一行的通过手工写代码来实现GUI界面效果
  • 特点
    • 工作量大
    • 新手会把代码结构搞的特别混乱
• 手码+设计工具
  • 通过可视化的设计工具，来按照所见即所得的方式进行界面设计，然后自动转换成代码
  • 特点
    • 直观、高效
    • 通过鼠标拖动、点击就可以搞定
    • 工作量小，方便修改调试
    • 界面和逻辑分离
  • 正规开发，一般都使用此种方法
• 自定义类必须通过纯手码来实现
• QtDesigner介绍
  • QtDesigner中的操作方式十分灵活，通过拖拽的方式放置空间可以随时查看空间效果，并预览效果
  • QtDesigner的设计复核MVC(设计模式：模型、视图、逻辑)的架构，实现了视图和逻辑的分离，从而实现了开发的便捷
  • QtDesigner生成的.ui文件（实际上是XML格式的文件），可以直接使用

    from PyQt5.uic import loadUi
    loadUi('login.ui', self)
    1
    2

  • 也可以通过pyuic5工具将.ui文件转换成.py文件

---

---

QTDesigner_环境安装

创建虚拟环境

• Python项目虚拟环境创建(详细步骤)

安装第三方库

• 我们学习的Python GUI图形界面是通过PyQt5第三方库来实现的，所以需要手动安装第三方库
• 方法一：通过pip命令安装
  • 1、 安装 PyQt5
    • 我们需要用到的pyuic5(ui文件转py文件)工具和pyrcc5(资源文件转py文件)工具都在这个模块中
    • 通过PyCharm —— Terminal激活虚拟环境，然后安装

      pip install PyQt5
      1

  • 2、（已过时）安装辅助工具：pyqt5-tools
    • 课程中通过安装pyqt5-tools获取designer工具
    • 但是我用的python3.9的版本中，designer工具已经不在pyqt5-tools模块中了，在pySide2模块中，所以我们需要安装PySide2模块

      pip install pyqt5-tools
      1

  • 3、安装 PySide2
    • 我们需要用到的designer工具在这个模块中

      pip install PySide2
      1

• 方法二：通过PyCharm的Setings配置安装

  • 注意：使用该方法安装第三方库，需要先修改安装源为国内镜像源，否则安装时间非常长

  • 国内镜像源

    清华大学 ：https://pypi.tuna.tsinghua.edu.cn/simple/
    阿里云：http://mirrors.aliyun.com/pypi/simple/
    中国科学技术大学 ：http://pypi.mirrors.ustc.edu.cn/simple/
    华中科技大学：http://pypi.hustunique.com/
    豆瓣源：http://pypi.douban.com/simple/
    腾讯源：http://mirrors.cloud.tencent.com/pypi/simple
    华为镜像源：https://repo.huaweicloud.com/repository/pypi/simple/
    1
    2
    3
    4
    5
    6
    7

  • 修改安装源
    PyCharm —— File —— Setings —— Project:xxx —— Python Interpreter

    • 

  • 安装第三方库
    PyCharm —— File —— Setings —— Project:xxx —— Python Interpreter

    • 安装PyQt5

      • 

    • 安装PySide2

      • 

    • 当安装界面下面显示 Package 'xxxxxx' installed successfully 则表示安装成功了

      • 

    • 我这里就不安装pyqt5-tools了

PyCharm添加外部工具快捷方式

• 1、添加图形界面设计工具 QtDesigner

  • File —— Settings —— Tools —— External Tools —— “+”

  • 

    Name：              # 外部工具显示名称
    Description：       # 对外部工具的描述
    Program：           # 外部工具名称关联工具，也就是点击名称要打开的工具
    Arguments：         # 转换参数
    Working directory： # 默认保存目录。就是.ui文件保存目录
    
    $ProjectFileDir$    # 项目文件所在目录
    1
    2
    3
    4
    5
    6
    7

• 2、添加ui文件转py文件工具 pyuic5

  • File —— Settings —— Tools —— External Tools —— “+”

  • 

    Name：              # 外部工具显示名称
    Description：       # 对外部工具的描述
    Program：           # 外部工具名称关联工具，也就是点击名称要打开的工具
    Arguments：         # 转换参数
    Working directory： # 默认保存目录。就是生成的.py文件保存目录
    
    # 参数说明
    $FileName$ -o $FileNameWithoutExtension$_ui.py -x
    $FileName$                  # 原文件名（带扩展名）
    -o                          # 输出到指定文件中
    $FileNameWithoutExtension$  # 不带扩展名的原文件名
    -x                          # 如果添加了，转换成py文件时，会生成__main__函数
    
    $FileDir$                   # 当前文件所在目录
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

• 3、添加qrc资源文件转py文件工具 pyrcc5

  • File —— Settings —— Tools —— External Tools —— “+”

  • 

    Name：              # 外部工具显示名称
    Description：       # 对外部工具的描述
    Program：           # 外部工具名称关联工具，也就是点击名称要打开的工具
    Arguments：         # 转换参数
    Working directory： # 默认保存目录。就是生成的.py文件保存目录
    
    # 参数说明
    $FileName$ -o $FileNameWithoutExtension$_rc.py
    $FileName$                  # 原文件名（带扩展名）
    -o                          # 输出到指定文件中
    $FileNameWithoutExtension$  # 不带扩展名的原文件名
    
    $FileDir$                   # 当前文件所在目录
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

使用外部工具

• 图形化界面环境配置完成。接下来就可以直接使用图形化界面创建窗体了

• 方式一：Tools —— External Tools —— QTDesigner

  • 

• 方式二：项目 —— 鼠标右键 —— External Tools —— QTDesigner

  • 

• 打开界面如图

  •