pyqt5 designer mounting step

 design requires a separate installation. Directly pip3 install PyQt5-tools you will be prompted to find the installation files.

https://github.com/altendky/pyqt5-tools/releases/tag/v5.7.dev1

pip install PyQt5-tools -i http://pypi.douban.com/simple --trusted-host=pypi.douban.com

 

Qt Designer Introduction

PyQt prepared UI interface may be implemented by the code directly, can also be done by Qt Designer. Qt Designer is designed to meet the MVC architecture, which realizes the separation of view and logic, enabling easy development. Qt Designer mode of operation is very flexible in its place controls by drag and drop effects can view the controls at any time. Qt Designer generated .ui file (XML format file substantially) may also be converted into files .py pyuic5 tool.
Qt Designer with PyQt5-tools installed with the package, its installation path "Python installation path \ Lib \ site-packages \ pyqt5 -tools".
To start Qt Designer directly to the above-mentioned folder, double-click to open designer.exe Qt Designer; or environment variable added to the route, the designer open command input line; PyCharm or in the external tool that is configured to open.
Below PyCharm example, about PyCharm Qt Designer in the configuration.

PyCharm in PyQt5 configuration tool

Open PyCharm, select Settings -> Tools -> External Tools, click on the upper left corner of the green plus sign.

 

Create Tool

Name fill QtDesigner (facilitate subsequent use, the name does not matter). Program selection PyQt5-tools following our installation designer.exe. Working directory select our working directory. Then click OK, then added QtDesigner as PyCharm external tools.
Then add PyUIC (UI conversion tool), PyUIC the Program for the Python.exe, in the installation directory of the Python Scripts directory, Working directory empathy to our working directory, Arguments then fill in the following code:

-m PyQt5.uic.pyuic  $FileName$ -o $FileNameWithoutExtension$.py 

Finally add pyrcc for PyQt5 resource file transcoding. DETAILED same configuration with the foregoing, Arguments fill:

$FileName$ -o $FileNameWithoutExtension$_rc.py 

Before exiting, click Apply to save the configuration. After configuration is complete, PyCharm will join three tools.

 

Configured tool

Click QtDesigner QtDesigner interface opens.

About Qt Designer interface

Just open Qt Designer, pop-up windows as shown in FIG.

 

Template window

Create a new Form gives five templates, which most commonly Widget and Main Window. Here we choose to create a Main Window.

 

QtDesigner interface

Leftmost menu screen above is Widget Box, Widget Box Widget contains all the components PyQt5, we can drag from the left side of the assembly, such as the Widget Box Button, View, and the like to the intermediate Input window.
Click Form -> Preview (shortcut key is Ctrl + R) you can preview we designed interface can also be used to select the Preview In the preview at the appropriate topic style.

We drag a Label and Button to enter the main window (Main Window).

 

Main window

At this time, the object can be seen (label and pushButton) Qt classes and their corresponding main window has been placed in the upper right corner of the Object Inspector (Object Viewer).

 

Object Viewer

Label with an example, when we click the Main Window in the label or the label selected in the Object Inspector, to see an area on the right side of --Property Editor (Attribute Editor).

 

Property Editor

Which mainly comprises the following attributes:

name	meaning
objectName	Controls object name
geometry	Width and height corresponding to the coordinates
sizePolicy	Controls the size of the strategy
minimumSize	The minimum width and height
maximumSize	The maximum width and height
font	Fonts
cursor	cursor
...	...

PS: After the value is set to the same minimumSize and maximumSize, the window size is fixed.

The lower right corner of the part is the Resource Browser (Explorer), Explorer can be added accordingly as picture material, such as a Label or Button control's background pictures.

 

Explorer

Qt Designer's UI files

Qt Designer design files saved to .ui format.
By saving and use Notepad to open the software, we can see the contents of .ui file is as follows:

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0"> <class>MainWindow</class> <widget class="QMainWindow" name="MainWindow"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>800</width> <height>600</height> </rect> </property> <property name="windowTitle"> <string>MainWindow</string> </property> <widget class="QWidget" name="centralwidget"> <widget class="QLabel" name="label"> <property name="geometry"> <rect> <x>240</x> <y>80</y> <width>72</width> <height>15</height> </rect> </property> <property name="text"> <string>TextLabel</string> </property> </widget> <widget class="QPushButton" name="pushButton"> <property name="geometry"> <rect> <x>240</x> <y>120</y> <width>93</width> <height>28</height> </rect> </property> <property name="text"> <string>PushButton</string> </property> </widget> </widget> <widget class="QMenuBar" name="menubar"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>800</width> <height>26</height> </rect> </property> </widget> <widget class="QStatusBar" name="statusbar"/> </widget> <resources/> <connections/> </ui> 

.Ui from the first line of the file we will be able to see, and its essence is an XML file. ui file stored in the relevant attributes of all the controls in the main window. UI using XML files to store files, with high readability and portability, so we can easily convert .ui file to .py file, so that we Python GUI programming language design above can be used.

Convert files to .py file .ui

.Ui convert files to .py files is very simple, we have set up in front of pyuic5 this tool. If you do not set this tool PyCharm or simply did not use PyCharm, you can go to the command line, use the following command to achieve .ui conversion of .py.

pyuic5 - o 目标文件名.py 源文件名.ui

Or directly in PyCharm, find .ui file, open the menu to find the right External Tools-> PyUIC. After clicking, we will have a .py file in the corresponding project directory. (Note, .ui file must be saved under the corresponding item in the set of our External Tools directory)

 

Fuic

After the conversion is complete, open the .py file.

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

# Form implementation generated from reading ui file 'mainWindow.ui'
#
# Created by: PyQt5 UI code generator 5.10.1
# # WARNING! All changes made in this file will be lost! from PyQt5 import QtCore, QtGui, QtWidgets class Ui_MainWindow(object): def setupUi(self, MainWindow): MainWindow.setObjectName("MainWindow") MainWindow.resize(800, 600) self.centralwidget = QtWidgets.QWidget(MainWindow) self.centralwidget.setObjectName("centralwidget") self.label = QtWidgets.QLabel(self.centralwidget) self.label.setGeometry(QtCore.QRect(240, 80, 72, 15)) self.label.setObjectName("label") self.pushButton = QtWidgets.QPushButton(self.centralwidget) self.pushButton.setGeometry(QtCore.QRect(240, 120, 93, 28)) self.pushButton.setObjectName("pushButton") MainWindow.setCentralWidget(self.centralwidget) self.menubar = QtWidgets.QMenuBar(MainWindow) self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 26)) self.menubar.setObjectName("menubar") MainWindow.setMenuBar(self.menubar) self.statusbar = QtWidgets.QStatusBar(MainWindow) self.statusbar.setObjectName("statusbar") MainWindow.setStatusBar(self.statusbar) self.retranslateUi(MainWindow) QtCore.QMetaObject.connectSlotsByName(MainWindow) def retranslateUi(self, MainWindow): _translate = QtCore.QCoreApplication.translate MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow")) self.label.setText(_translate("MainWindow", "TextLabel")) self.pushButton.setText(_translate("MainWindow", "PushButton")) 

Observe the above-mentioned documents can not be made to see if the interface by Qt Designer, we will time and time again debugger, speaking Label buttons and so on in the right place, it will be an extremely painful process. And by Qt Designer, we can make quick UI, and generates Python code, enabling developers to quickly UI.

.Py files using Conversion

However, this time the conversion between good run Python file can not display any window. Because this document is only Python code definition of the main window and its controls, and no code of program entry. In order to uphold the principle of the separation of view and logic, we have to write a new script to call up the file, and create a window.

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow from mainWindow import * class MyWindow(QMainWindow, Ui_MainWindow): def __init__(self, parent=None): super(MyWindow, self).__init__(parent) self.setupUi(self) if __name__ == '__main__': app = QApplication(sys.argv) myWin = MyWindow() myWin.show() sys.exit(app.exec_()) 

By the above code, we inherited Ui_MainWindow class, using its Constructs main window procedure and defines an inlet, a window is created by creating Qt QApplication object. Its operating results are as follows:

 

Qt window

By the above operation, we are familiar with Qt Designer interface design, to achieve approximately workflow business logic. By streamlining this workflow can achieve the speed increase.
By separating the business logic of view, each change in Qt Designer UI design time, you do not re-write the code, but only for some of the changes made slight modifications.

Author: Schrodinger's cat raising
link: https: //www.jianshu.com/p/5b063c5745d0
Source: Jane books
are copyrighted by the author. Commercial reprint please contact the author authorized, non-commercial reprint please indicate the source.