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逻辑文件，成功运行，最大化显示正常，撒花！！！