pyqt5界面的布局与资源文件的载入

在阅读本博文之前建议先阅读下我之前写的文章python3+pyqt5+opencv3简单使用。

在利用pyqt5设计界面过程中可能会遇到放大缩小或最大化界面时控件的布局并没有跟着改变，导致界面看上去非常的丑。故本博文通过设计一个简单的界面来简要介绍界面的布局方法以及资源文件的载入。下图为原始界面与最大化后的界面的外观：

从图中可以看出将软件界面最大化后各控件也会跟着调整（主要是图像显示区域），看起来不会很突兀。废话不多说。接下来开始界面的设计。

 

界面的设计与布局

首先在pycharm中通过tool -> external tool -> qtdesigner打开Qt Designer创建一个Main Window窗口：

创建完成后首先双击主界面的左上角的“Type Here”添加主菜单栏与子菜单栏（具体的操作过程在之前的博文中有讲就不在细说）。

添加一个Group box并双击左上角的文字并改为“Image Area”，在该Group box中添加一个Label用于载入图像。

在右侧的Property Editor窗口中设置“minimumSize”，其值按照“geometry”中的设置（geometry中的值是用户自己手动拉伸的Group box大小），其目的是防止后期布局时变的特别小。

接着在右侧的Object Inspector窗口中选中刚添加的Group box，反键 -> Lay out -> Lay out in a Grid（将Label按照Grid方式布局在Group box中）

 

接下来在界面右侧添加一个Group box改名为“Information”，在该Group box中添加两个Label、两个Line Edit和一个Vertical Spacer控件，并按下图进行摆放：

接着在右侧的Property Editor窗口中设置两个Line Edit的“minimumSize”参数，同样其值按照“geometry”中的值进行设置

接着选中名为Information的Group Box，在右侧的Property Editor窗口中首先设置“minimumSize”参数，同样其值按照“geometry”中的值进行设置，接着设置sizePolicy中的Horizontal Policy为Fixed，其目的是为了固定其水平方向的尺寸使其在缩放界面中Group box只能在竖直方向进行拉伸（保证group box中的Line Edit宽度不会发生变化）。

接着在Object Inspector窗口中选中名为information的Group box，反键 -> Lay out -> Lay Out Vertically，对Group box中的控件进行垂直布局。布局完成后在右侧的Property Editor窗口中新增一个Layout属性，可通过调整其中的layoutSpacing的值来控制各控件在竖直方向的间隔距离。

 

接下来直接在界面下方添加三个Push Button和一个Horizontal Spacer控件，同样在右侧的Property Editor窗口中设置这三个Push Button的“minimumSize”值。接着选中这四个控件反键 -> Lay out -> Lay Out Horizontally进行水平布局。

以上基本已经添加了所有需要的控件，接下来将名为Image Area的Group box和名为Information的Group box进行水平布局，并将合并后的布局与界面下方包含Push Button的水平布局进行垂直布局。

最后还需要对整个界面进行布局，如果不进行布局，则缩放界面时控件不会跟着变动。在右侧的Object Inspector窗口中选中主窗口MainWindow，反键 -> Lay out -> Lay out in a Grid，至此整个界面的布局全部完成。按住Ctrl+R可以预览界面的效果。

贴出右侧Object Inspector窗口中的布局框架：

最后在UI对应的逻辑文件中写入相应的功能模块即可。

 

资源文件的载入

在C++使用qt开发过程中通常直接使用qrc文件即可， 但在python的pyqt中会比C++中使用麻烦一点，但仍是使用qt的qrc资源文件，本博文主要简单介绍如何创建资源文件，并简单载入一些图标。

同样在前面的qtcreator中进行操作，如下图所示首先在右侧的Resource Browser窗口中点击铅笔形状的图标，接着在弹出的窗口中点击“New Resource File”按钮，接着给资源文件命名。

接着在Edit Resources窗口中点击“Add Prefix”按钮命名文件前缀，由于后面要载入icon图标故起名icon，接着点击“Add Files”按钮打开icon图标所在目录选择需要载入的图标点击“打开”即可。

添加完资源文件后，接下来要在子菜单栏中添加图标，首先在qtcreator右侧窗口中点击“Action Editor”按钮，接着选择要添加图标的action，反键选择“Edit”

在弹出的“Edit action”中点击Icon右侧的下拉菜单选择“Choose Resource”，在弹出的“Select Resource”界面左侧先选择icon所在文件夹名称，接着在右侧选择自定义图标。按同样的流程设置其他的action下拉图标，设置完成后点击下拉菜单就能看到设置的图标。

接着在界面中添加工具栏，在主界面空白处反键选择“Add Tool Bar”

 接着在右侧"Action Editor"窗口中将对应的action通过拖拽方式放入工具栏中

接下来保存所有文件，保存后会生成两个文件，一个是.ui文件，一个是qrc资源文件

然后选中ui文件点击鼠标反键 -> External Tools -> PyUIC将生成的ui文件转化成相应的pyhon文件

接着创建一个与ui界面相对应的py逻辑文件，在逻辑文件中调用界面文件

import sys
import cv2
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.QtCore import *
from PyQt5.QtWidgets import QFileDialog, QMessageBox, QDockWidget, QListWidget
from PyQt5.QtGui import *
 
from test import Ui_MainWindow  # 导入ui生成的py文件
 
class mywindow(QtWidgets.QMainWindow,Ui_MainWindow):  
 
    def __init__(self):
        super(mywindow, self).__init__()
        self.setupUi(self)
 
if __name__ == '__main__':
    app = QtWidgets.QApplication(sys.argv)
    window = mywindow()
    window.show()
    sys.exit(app.exec_())

 如果现在直接运行程序则会报错ModuleNotFoundError: No module named 'qt_icon_rc'，是因为不能直接调用qrc文件，需要将qrc文件转换成py资源文件后才能调用。

首先在pycharm中的External tool中添加将qrc转换成py文件的工具，在pycharm的File -> Settings中按照下图进行设置。在4中填入pyrcc5的路径，例如我的是G:\TF_info\Anaconda\Scripts\pyrcc5.exe（pyrcc5是在安装python文件夹下的Scripts中，不是在pyqt5文件夹中），在5中填入指令参数$FileName$ -o $FileNameWithoutExtension$_rc.py，在6中填入$FileDir$即可。

设置完成后在pycharm中选中qrc文件，鼠标反键 -> External Tools -> Pyqrc将qrc资源转为py资源文件

最后运行刚刚建立的py逻辑文件，成功运行，最大化显示正常，撒花！！！