PyQT5 入门教程(之一)

2021年11月23日 阅读数:3
这篇文章主要向大家介绍PyQT5 入门教程(之一),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

REFpython

https://www.jianshu.com/p/5b063c5745d0编程

 

Qt Designer的介绍

在PyQt中编写UI界面能够直接经过代码来实现,也能够经过Qt Designer来完成。Qt Designer的设计符合MVC的架构,其实现了视图和逻辑的分离,从而实现了开发的便捷。Qt Designer中的操做方式十分灵活,其经过拖拽的方式放置控件能够随时查看控件效果。Qt Designer生成的.ui文件(实质上是XML格式的文件)也能够经过pyuic5工具转换成.py文件。
Qt Designer随 PyQt5-tools 包一块儿安装,其安装路径在 “Python安装路径\Lib\site-packages\pyqt5-tools”下。
若要启动Qt Designer能够直接到上述目录下,双击designer.exe打开Qt Designer;或将上述路径加入环境变量,在命令行输入designer打开;或在PyCharm中将其配置为外部工具打开。
下面以PyCharm为例,讲述PyCharm中Qt Designer的配置方法。
示例以下:浏览器

 从上图可知:架构

 安装了Anaconda3,或,安装了PyQt5-tools 就会有 Qt Designerapp

 

PyCharm中PyQt5工具配置

打开PyCharm,选择 File -> Settings -> Tools -> External Tools,点击左上角的 加号 + 。
less

 

 
Create Tool

Name 填入QtDesigner(方便后续使用,名称无所谓)。编辑器

Program 选择咱们安装的 PyQt5-tools下面的 designer.exe [D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin\designer.exe]。工具

Working directory 则选择咱们的工做目录 [D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin]。字体

而后点击OK,则添加了QtDesigner做为PyCharm的外置工具。ui

 

 

 


而后添加PyUIC(UI转换工具),PyUIC的

Program为Python.exe,在Python的安装目录下面的Scripts目录下【D:\Program Files\python_3_6_4\python.exe】,

Working directory 同理设为咱们的工做目录(最好与其余工具相同目录  )[D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin],

Arguments则填入以下代码:

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


最后添加 pyrcc 用于PyQt5的资源文件转码。

Program为Python.exe,在Python的安装目录下面的Scripts目录下【D:\Program Files\python_3_6_4\python.exe】,

Working directory 同理设为咱们的工做目录(最好与其余工具相同目录  )[D:\Program Files\python_3_6_4\Lib\site-packages\qt5_applications\Qt\bin],

具体配置与上述内容相同,Arguments填入:

$FileName$ -o $FileNameWithoutExtension$_rc.py


退出以前,点击Apply保存配置。配置完成以后,PyCharm中会加入3个工具。

配置好的工具

 

 
点击QtDesigner则打开QtDesigner的界面。


 Qt Designer界面简介

刚打开Qt Designer,则弹出以下图所示的窗口。

模板窗口

 

 



建立新的Form给出了5个模板,其中 Widget 与 Main Window 最为经常使用。这里咱们选择建立一个Main Window。

QtDesigner界面

 

 

 



上面界面的最左侧菜单为Widget Box,Widget Box中包含PyQt5中的全部Widget组件,咱们能够从左侧的Widget Box中拖拽出诸如Button、View和Input等组件到中间的窗口中。
点击Form -> Preview(快捷键为Ctrl+R)则能够预览咱们设计好的界面,也能够用Preview In来选择在相应的主题风格下预览。

咱们拖拽一个Label与Button进入主窗口(Main Window)。

主窗口

 

 

 

 

 

 


此时在右上角的Object Inspector(对象查看器)中能够看到主窗口中的已放置的对象(label与pushButton)以及其相应地Qt类。
对象查看器

 

 


以Label为例,此时咱们点击Main Window中的label或是在Object Inspector中选取label后,查看右侧的一块区域——Property Editor(属性编辑器)。
属性编辑器

 

 


其主要包含属性有以下:
名称     含义
objectName     控件对象名称
geometry     相应宽和高与坐标
sizePolicy     控件大小的策略
minimumSize     最小的宽和高
maximumSize     最大的宽和高
font     字体
cursor     光标
...     ...

PS:将minimumSize和maximumSize设为同样的数值以后,则窗口的大小固定。

最右下角的部分则为Resource Browser(资源浏览器),资源浏览器中能够添加相应地如图片素材,做为Label或Button等控件的背景图片等。

资源浏览器

 

 


Qt Designer的UI文件

使用Qt Designer设计保存的文件为.ui格式的文件。
经过保存并使用记事本等软件打开,咱们能够看到.ui文件的内容以下:

<?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="QPushButton" name="pushButton">
    <property name="geometry">
     <rect>
      <x>80</x>
      <y>100</y>
      <width>75</width>
      <height>23</height>
     </rect>
    </property>
    <property name="text">
     <string>PushButton</string>
    </property>
   </widget>
   <widget class="QLabel" name="label">
    <property name="geometry">
     <rect>
      <x>90</x>
      <y>50</y>
      <width>54</width>
      <height>12</height>
     </rect>
    </property>
    <property name="text">
     <string>TextLabel</string>
    </property>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menubar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>800</width>
     <height>21</height>
    </rect>
   </property>
  </widget>
  <widget class="QStatusBar" name="statusbar"/>
 </widget>
 <resources/>
 <connections/>
</ui>

从.ui文件的第一行咱们便能看出,其实质是一个XML文件。ui文件中存放了在主窗口中的一切控件的相关属性。使用XML文件来存储UI文件,具备高可读性和移植性,所以咱们能够方便地将.ui文件转换到.py文件,从而使得咱们可使用Python语言在设计的GUI上面编程。


将.ui文件转换为.py文件

将.ui文件转换到.py文件很简单,在前面咱们曾设置了pyuic5这个工具。若是你没有在PyCharm中设置这个工具,或者根本没有使用PyCharm,则能够到命令行中使用以下命令实现.ui到.py的转换。


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


或者直接在PyCharm中,找到.ui文件,右键 打开菜单找到 External Tools->PyUIC。点击以后,咱们在相应工程目录下会产生一个.py文件。(注意,.ui文件必须存放在咱们的External Tools中设置的相应项目目录下)

 

 

 转换完成以后,打开.py文件。

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

# Form implementation generated from reading ui file 'firstQTui.ui'
#
# Created by: PyQt5 UI code generator 5.15.4
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


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.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(80, 100, 75, 23))
        self.pushButton.setObjectName("pushButton")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(90, 50, 54, 12))
        self.label.setObjectName("label")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 21))
        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.pushButton.setText(_translate("MainWindow", "PushButton"))
        self.label.setText(_translate("MainWindow", "TextLabel"))

 

 

观察上述文件,能够看到若是不经过Qt Designer来制做界面的话,咱们将会一次次地调试程序,来将按钮和Label等放在合适的位置,这将是极其痛苦的过程。而经过Qt Designer,咱们能够快速地制做UI,并生成Python的代码,从而实现快速地UI的开发。


使用转换的.py文件

然而,此时之间运行这个转换好的Python文件是没法显示任何窗口的。由于这个Python文件只有定义主窗口以及其控件的代码,并无程序入口的代码。为了秉持视图与逻辑分离的原则,咱们再编写一个新的脚原本调用这个文件,而且建立一个窗口。

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_())

经过上述代码,咱们继承了Ui_MainWindow类,使用其构造方法构造主窗口,并定义了程序的入口,经过建立QApplication对象来建立Qt窗口。其运行结果以下:

 

 


Qt窗口

 

 
经过上述操做,咱们熟悉了Qt Designer设计界面,到实现业务逻辑的大体工做流程。经过这个工做流程能够简化工做,实现速度的提高。
经过对视图与业务逻辑的分离,在每次更改Qt Designer的UI设计的时候,也不用从新编写代码,而只需对更改的部分作稍微的修改便可。

 

REF

https://www.jianshu.com/nb/26159952