PyQt窗口设计之Qt Designer_qtdesigner

  Qt Designer，即Qt设计师，是一个强大、灵活的可视化GUI设计工具，可以帮助我们加快开发PyQt程序的速度。Qt Designer是专门用来制作PyQt程序中UI界面的工具，它生成的UI界面是一个后缀为.ui的文件。该文件使用起来非常简单，可以通过命令将ui文件转换成.py格式的文件，并被其他Python文件引用；也可以通过专门的工具，如：Eric6等进行手工转换。

一、界面介绍

说明：

• 窗口界面：第一次打开界面如下，左上角的红色框就是之前讲的PyQt预置的窗口样式，一般这里选择Main Window，当有之前的文件时，根据右下角红框的内容选择。
  
    然后就可以像第一张图那样在窗口内放置、布局自己的组件了。
• 工具栏：
    工具栏就是一些操作的快捷使用入口，具体解析如下。
  
• 菜单栏
    菜单栏包含所有的处理和设置，虽然很多并不会使用菜单栏去设置，但还是需要说一下其中的几个，文件没啥说的，编辑就是对窗口组件的放置，绑定信号槽等，这里的部分功能就是上面快捷工具的原型，窗体菜单就是布局管理，视图可以设置自己的窗口界面。
  
• 组件框
    组件框是设计程序界面显示不可缺少的部分，在Qt Designer中，组件被按作用分成个几大板块，其中最常用的是布局、空间、按钮、组件容器、输入、显示，组件的放置也是相当简单，把组件拖拽到窗口即可。
  
• 对象查看器
    对象查看器就是我们在窗口放置的所有组件，按层级结构展示，这里还有个作用就是当组件放置的很复杂时，在窗口中很难定位到想要的组件，这时候直接在这里点击相应组件名称，就可以选中。
• 属性编辑器
    属性编辑也是相当重要的，每个组件的各种属性，比如：位置、字体、大小、颜色、背景，等等，反正组件细化下来的一切都是这里配置。
• 其他编辑器
   这里有三个内容，讲解如下：
    信号/槽编辑器：给组件绑定信号，但一般组件的信号都是手动去绑定的，因为这里的信号就是简单的预置，没法实现具体的操作。
    动作辑器：编辑菜单栏和工具栏的快捷动作，但一般也是手动写，原因还是具体操作预置代码无法实现。
    资源器：绑定在设计时需要的图片等其他资源。这样打包后的程序就不依赖于本地的资源。

二、Qt Designer的使用

1、Qt Designer使用

  Qt Designer的使用基本都是拖拽组件，配置布局，修改属性，没啥好讲的，要自己去实际操作，知道不同组件有哪些属性可以配置，有哪些布局适合需要。这里讲一些特殊的操作。

1. 工具栏的放置

直接开启工具栏长这样

下一步只需要在动作编辑器新建动作，然后设置好图标，文字等，直接拖动到工具栏，即可实现工具栏的放置。
效果如下：

2. 资源的加载

  直接在资源编辑器，编辑，新建或者打开，注意要设置文件的前缀，方便程序识别文件类型，选择文件，即可在项目文件夹生成对应的qrc文件，然后把qrc文件转化成py文件，就可以在python代码中调用了（需要导入，如 import 财报）

3. 使用Qt Designer编译的代码

最后生成的代码大概长这样，因为它是生成的，所以是个单独的类，这样方便主代码的调用，也方便后期的维护。

为了调用上面生成的ui文件，要自建一个主代码类，不考虑其他操作的情况下，主代码很简单，
直接把下面这段代码放在你们ui代码下面，就可以运行。

class Main_Ui(QMainWindow, Ui_MainWindow):

    def __init__(self):
        super().__init__()
        self.setupUi(self)


if __name__ == '__main__':

    app = QtWidgets.QApplication([])
    main_ui = Main_Ui()
    main_ui.show()
    app.exec_()
1
2
3
4
5
6
7
8
9
10
11
12
13

  这里需要注意的的地方，Main_Ui(QMainWindow, Ui_MainWindow)，你得导入QMainWindow，注意你自己的ui类名，虽然一般生成的都是Ui_MainWindow；至于你要绑定其他的操作，只需要在自定义的主函数初始化的地方绑定即可（ self.setupUi(self)之后）

2、 ui文件的转化

  Designer生成的是ui结尾的文件，那如何使用呢？有三种方法。

1. 使用命令行：

python -m PyQt5.uic.pyuic 12组重点链接跟进.ui -o 12组重点链接跟进.py
1

  这里需要注意的有两点，不然没法转成功。一是你的环境变量已经添加了python的路径；二是操作的时候必须在ui文件所在的文件夹（cd 文件路径跳转）。

2. 执行PyUIC程序

Anaconda自带Prompt运行如下代码：

pyuic5 demo.ui -o demo.py
1

  需要注意的还是操作的时候必须在ui文件所在的文件夹（cd 文件路径跳转）。

3. PyCharm设置External Tools （强烈推荐）

  为了PyCharm更方便的使用，需要配置两个，一个是Qt designer，一个是PyUIC，前者直接打开Qt designer，后者把ui文件转换成py文件，方便后续使用。

  点击File->Settings，找到Tools选项，点击“+”号，后续配置如图：
配置Qt designer

参数说明：
Program:这里就是你安装PyQt5-tools里面的designer.exe
Work directory：使用变量$FileDir$

配置PyUIC

参数说明：
Program:这里就是你安装的python编译的里面的python.exe
Arguments:D:\Anaconda\Lib\site-packages\PyQt5\uic\pyuic.py $FileName$ -o $FileNameWithoutExtension$.py （自己的路径+后面那段）
Work directory：使用变量$ProjectFileDir$或者$FileDir$，两者的区别在于执行时文件夹是项目所在文件夹还是用户指定的任意文件夹。

设置完成拓展工具后，右键ui文件选择external tools的PyUIC，即可自动生成。

3、 qrc文件的转化

1. 使用命令行

pyrcc5 resource.qrc -o resource_rc.py
1

2. PyCharm 配置

参数说明：
Program:这里就是你安装的pyrcc5.exe的位置（这个是自带的，不需要自己安装，找到位置就好）
Arguments：$FileName$ -o $FileNameWithoutExtension$.py
Work directory：使用变量$ProjectFileDir$或者$FileDir$，两者的区别在于执行时文件夹是项目所在文件夹还是用户指定的任意文件夹。

设置完成拓展工具后，右键qrc文件选择external tools的qrc tool，即可自动生成。
生成的文件长这样：

学完这一节，你应该已经配置好环境，设计了自己ui界面了吧，持续更新中…