首页 > 其他分享 >PySide6、PyQt6、ui文件转py文件、Qt Designer 使用

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用

时间:2022-12-20 17:06:23浏览次数:67  
标签:__ 文件 Designer Qt 控件 self 布局 QtWidgets MainWindow

QT 官网:​​https://www.qt.io/zh-cn/develop​

1、PySide6、PyQt6、PyQt5

PySide6、PySide2、PyQt5 都是基于 Qt 库,Qt 是一组 C++ 库和开发工具,包括图形用户界面、网络、线程、正则表达式、SQL 数据库、SVG、OpenGL、XML、用户和应用程序设置、定位和定位服务、短程通信( NFC 和蓝牙)、网页浏览、3D 动画、图表、3D 数据可视化以及与应用商店的交互。,有非常强大的图形界面开发库。

那么 PyQt5、PySide2、PySide6 三者有什么区别 ?

        PyQt5 与 PySide2 基本上没有太大区别,都是在 Python 环境下的一套 Qt API库,但是 PySide2 由 Qt 官方维护,不过 pyside 掉了一段时间的队,其间 pyqt 火了,导致用 pyside 的人不多。不过 pyside 的优点在于有详细的官方维护的文档,PySide6 是 PySide2 的更新版本 【Qt 5 升级到 Qt 6 后,PySide2 也跟着升级到了 PySide6 (从2直接到6)】 ,二者几乎没什么差别。它们三者之间的代码转化也非常简单。所以推荐使用 PySide6 来创建基于 Qt6 的GUI 程序。     

1.1 主要概念

 Qt for Python 官方文档:​​https://doc.qt.io/qtforpython/contents.html​

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python

1. 界面承载部分( 控件 )

2. 界面框架部分 ( 布局 )

  • 主类:QLayout
  • 继承类:
            QGridLayout (网格布局)
            QBoxLayout(简单的上下布局)
            QStackedLayout (可切换widget的布局)
            FlowLayout

3. 界面组件部分( 其实也是 Widget 类 )

  • button
  • label
  • 等等

4. 界面样式部分

  • color
  • size
  • font
  • Icon

5. 界面交互部分

  • action
  • event
  • signal
  • slot
  • connect

概念之间关系

  • QWidget 作为页面的主体,挂载在 layout (布局) 上,layout (布局) 可以添加页面的组件,通过 action(动作,类似于点击),event(事件),signal(信号),slot(信号槽),connect(动作绑定)产生交互
  • 通过样式类,类似于 Icon(图标),大小,颜色,字体等,修改界面的细节
  • widget 上需要有 layout,layout 可以 继续添加 widget,可以一直加下去

 三个 窗口基类 ( QMainWindow、QWidget、QDialoh ) 的区别

在平常 qt 开发中,通常要写自己的窗口类,那么这个窗口类该继承自哪个类呢?

  • QWidget 继承于 QObject 和 QPaintDevice,
  • QDialog 和 QMainWindow 则继承于 QWidget。

下面就来看下三个窗口基类的区别:

  • 1. QMainWindow: QMainWindow类 提供一个有 "中央窗口部件、菜单栏、工具栏、状态栏" 的 主应用程序窗口。QMainWindow 窗口经常被继承。QMainWindow 拥有自己的布局,可以使用 QMenuBar(菜单栏)、QToolBar(工具栏)、QStatusBar(状态栏)以及QDockWidget(悬浮窗体),布局有一个可由任何种类小窗口所占据的中心区域。
  • 2. QWidget:QWidet 类是所有用户界面对象的基类,窗口部件是用户界面的一个基本单元,它从窗口系统接收鼠标,键盘和其他消息,并在屏幕上绘制自己。一个窗口部件可以被他的父窗口或者是其他窗口挡住一部分。
  • 3. QDialog:QDialog 类是对话框窗口的基类,对话框窗口主要用于短期任务以及和用户进行短期通讯的顶级窗口,QDialog可以是模态对话框或者是非模态对话框。QDialog 支持扩展并带有返回值,可以有默认按钮。QDialog也可以有一个QSizeGrip在它的右下角,使用setSizeGripEnabled()。
    模式对话框
    阻塞同一应用程序中其它可视窗口输入的对话框。模式对话框有自己的事件循环,用户必须完成这个对话框中的交互操作,并且关闭了它之后才能访问应用程序中的其它任何窗口。模式对话框仅阻止访问与对话相关联的窗口,允许用户继续使用其它窗口中的应用程序。
    显示模态对话框最常见的方法是调用其exec()函数,当用户关闭对话框,exec()将提供一个有用的返回值,并且这时流程控制继续从调用exec()的地方进行。通常情况下,要获得对话框关闭并返回相应的值,我们连接默认按钮,例如:”确定”按钮连接到accept()槽,”取消”按钮连接到reject()槽。另外我们也可以连接done()槽,传递给它Accepted或Rejected。
    非模式对话框
    和同一个程序中其它窗口操作无关的对话框。在文字处理中的查找和替换对话框通常是非模式的,允许用户同时与应用程序的主窗口和对话框进行交互。调用show()来显示非模式对话框,并立即将控制返回给调用者。
    如果隐藏对话框后调用show()函数,对话框将显示在其原始位置,这是因为窗口管理器决定的窗户位置没有明确由程序员指定,为了保持被用户移动的对话框位置,在closeEvent()中进行处理,然后在显示之前,将对话框移动到该位置。
    半模式对话框
    调用setModal(true)或者setWindowModality(),然后show()。有别于exec(),show() 立即返回给控制调用者。
    对于进度对话框来说,调用setModal(true)是非常有用的,用户必须拥有与其交互的能力,例如:取消长时间运行的操作。如果使用show()和setModal(true)共同执行一个长时间操作,则必须定期在执行过程中调用QApplication::processEvents(),以使用户能够与对话框交互(可以参考QProgressDialog)。

QMainWindow、QWidget、QDialoh 使用原则

  • 如果需要嵌入到其他窗体中,则基于 QWidget 创建。
  • 如果是顶级对话框,则基于 QDialog 创建。
  • 如果是主窗体,则基于 QMainWindow 创建。

QMainWindow 使用示例:

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

from PySide6.QtCore import (
QCoreApplication, QDate, QDateTime, QLocale,
QMetaObject, QObject, QPoint, QRect,
QSize, QTime, QUrl, Qt
)
from PySide6.QtGui import (
QBrush, QColor, QConicalGradient, QCursor,
QFont, QFontDatabase, QGradient, QIcon,
QImage, QKeySequence, QLinearGradient, QPainter,
QPalette, QPixmap, QRadialGradient, QTransform
)
from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtWidgets import (
QApplication, QMainWindow, QMenuBar, QPushButton,
QSizePolicy, QStatusBar, QWidget, QPlainTextEdit
)


class Ui_MainWindow(object):
def setupUi(self, MainWindow):
if not MainWindow.objectName():
MainWindow.setObjectName(u"MainWindow")
MainWindow.resize(700, 567)
self.centralwidget = QWidget(MainWindow)
self.centralwidget.setObjectName(u"centralwidget")
self.plainTextEdit = QPlainTextEdit(self.centralwidget) # 添加的文本框
self.plainTextEdit.setObjectName(u"plainTextEdit")
self.plainTextEdit.setGeometry(QRect(90, 40, 521, 311))
self.pushButton = QPushButton(self.centralwidget) # 添加的按钮
self.pushButton.setObjectName(u"pushButton")
self.pushButton.setGeometry(QRect(330, 410, 75, 24))
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QMenuBar(MainWindow)
self.menubar.setObjectName(u"menubar")
self.menubar.setGeometry(QRect(0, 0, 700, 22))
MainWindow.setMenuBar(self.menubar)
self.statusbar = QStatusBar(MainWindow)
self.statusbar.setObjectName(u"statusbar")
MainWindow.setStatusBar(self.statusbar)

self.retranslateUi(MainWindow) # 调用下面的retranslateUi(self, MainWindow)函数。

QMetaObject.connectSlotsByName(MainWindow)

# setupUi

def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(
QCoreApplication.translate("MainWindow", u"\u81ea\u5b9a\u4e49\u7684\u6807\u9898\u680f", None))
self.plainTextEdit.setPlaceholderText(QCoreApplication.translate("MainWindow", u"\u8bf7\u8f93\u5165", None))
self.pushButton.setText(QCoreApplication.translate("MainWindow", u"\u70b9\u51fb", None))
# retranslateUi


# ================== 上面为 自动生成 的代码 ============================
# ================== 下面代码 使其显示出来 ============================
app = QApplication()
main_window = QMainWindow()

auto_ui_window = Ui_MainWindow() # 实例化部件
auto_ui_window.setupUi(main_window) # 调用setupUi()方法,并传入 主窗口 参数。

# 给按钮绑定调用函数。
# auto_ui_window.pushButton.clicked.connect(lambda x: print('点击了按钮'))
auto_ui_window.pushButton.clicked.connect(lambda x: auto_ui_window.plainTextEdit.appendPlainText("点击按钮"))

main_window.show()
app.exec()
pass

1.2 安装 PySide6

PySide6.QtWidgets:​​https://doc.qt.io/qtforpython-6/PySide6/QtWidgets/index.html#module-PySide6.QtWidgets​

PySide6 库还是非常大的,有将近 200M 左右,推荐使用国内的镜像来下载。PySide6 只支持Python 3.6+版本,另外特别注意的是,它只支持 64 位的 Python。

安装:pip install PySide6

安装完成后,python安装路径下 \Lib\site-packages 里找到 designer.exe。designer 是 Python 设计里面一个非常实用的工具,使得人们编写 qt 界面可以不仅仅是使用纯代码,而可以在可视化的基础上设置,非常方便。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_02

Pycharm 配置 Pyside6 工具

运行 Pycharm,设置 ---> 外部工具 ---> 点击 +,添加 Pyside6_Designer Pyside6_UIC 

  • 添加 Pyside6_Designer
            名称:Pyside6_Designer(可自己定义)
            程序:Pyside6-Designer 的安装路径。C:\Python39\Lib\site-packages\PySide6\designer.exe
            实参:不填
            工作目录: $FileDir$
  • 添加 Pyside6_UIC
            名称:Pyside6_UIC(可自己定义)
            程序:pyside6-uic 的安装路径。C:\Python39\Scripts\pyside6-uic.exe
            实参:$FileName$ -o $FileNameWithoutExtension$.py

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_03

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_04

简单示例:

import sys
import random
from PySide6 import QtCore, QtWidgets, QtGui


class MyWidget(QtWidgets.QWidget):
def __init__(self):
super().__init__()

self.hello = ["Hallo Welt", "Hei maailma", "Hola Mundo", "Привет мир"]

self.button = QtWidgets.QPushButton("Click me!")
self.text = QtWidgets.QLabel("Hello World", alignment=QtCore.Qt.AlignCenter)

self.layout = QtWidgets.QVBoxLayout(self)
self.layout.addWidget(self.text)
self.layout.addWidget(self.button)

self.button.clicked.connect(self.magic)

@QtCore.Slot()
def magic(self):
self.text.setText(random.choice(self.hello))


if __name__ == "__main__":
app = QtWidgets.QApplication([])

widget = MyWidget()
widget.resize(800, 600)
widget.show()

sys.exit(app.exec())

1.3 安装 PyQt6

如果使用 PySide6 进行开发,可以不用安装 PyQt6 或者 PyQt5

pip install PyQt6
pip install pyqt6-tools

安装完 "PyQt6-tools" 后,就可以在 Python 路径下的 Lib\site-packages\qt6_applications\Qt\bin

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_05

PyCharm 配置 designer.exe

  1. 在 " File ---> Settings ---> Tools ---> External Tools " 中点击 +
  2. 名称填写为 "Qt_Designer",这个名字可以随意填
  3. "程序" 中填入 "designer.exe" 的路径。
  4. "工作目录" 可以点击 输入框 上面的 + 号,选择预定义的目录变量,这里选择 $FileDir$

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_06

PyCharm 配置 Pyuic

PyUIC 主要是用来 " 将 Qt界面 转换成 py代码 "

  1. 在 " File ---> Settings ---> Tools ---> External Tools " 中点击 +
  2. 名称 填写为 "Py_UIC",这个名字可以随意填
  3. "程序" 中填入 "python.exe" 的路径。
  4. "实参" 中填入 -m PyQt6.uic.pyuic $FileName$ -o $FileNameWithoutExtension$.py
        说明:-m 参数就是 "将 库模块 作为脚本运行",这里 库模块 是 PyQt6.uic.pyuic,
                        查看 Lib\site-packages\PyQt5\uic 目录,发现 调用的是 pyuic.py
                   -o 参数是 输出 文件名
  5. "工作目录" 中填入  $FileDir$

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_07

系统自定义 宏参数( 点击 宏参数 时 可以实时显示对应当前工程 的 值 ):

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_08

1.4 命令行 执行 uic 生成 py代码

如果不填写 "实参" 这个选项时,在 Pycharm 中, 点击 .ui 文件 ---> 然后右键 ---> ExternalTools -> PyUIC 没法生成  .py 文件。只有通过命令行 生成 .py 文件:pyuic6.exe test.ui -o test.py。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_09

只要安装对应的 QT ,就可以找到对应的 uic 可执行文件,直接命令行执行即可。 

cmd 中打开 xxx.ui 所在路径例,然后执行:pyuic6 xxx.ui -o xxx.py

2、设计 UI 文件 并转换成 .py 文件

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_10

通过 Qt_Designer 设计 QT界面,然后保存为 "测试.ui" 文件

再通过 Py_UIC 会根据 "测试.ui" 文件 生成同名的 "测试.py" 文件。 

如果上面 Py_UIC 配置正确,生成 .py 文件很简单:

  • .ui文件 ---> 右键 -> External Tools ---> Py_UIC,即可自动生成 py 文件

生成的 .py文件 中只有一个从 object 类继承的 Ui_MainWindow 的类,无法直接运行,如果想要运行,继续往下看。

3、运行 .py 文件,出现图形界面

这个时候直接运行 .py 文件,发现图形界面不会显示。

有两种方法可以显示界面。

方法 1 :直接运行这个 .py文件 就能看到界面的方式

PySide6

在文件末尾加上这一段代码:

if __name__ == "__main__":
import sys
from PySide6 import QtWidgets
app = QtWidgets.QApplication(sys.argv) # 创建一个QApplication,也就是你要开发的软件app
MainWindow = QtWidgets.QMainWindow() # 创建一个QMainWindow,用来装载你需要的各种组件、控件
# MainWindow = QtWidgets.QWidget() # 创建一个QMainWindow,用来装载你需要的各种组件、控件
ui = Ui_MainWindow() # ui是你创建的ui类的实例化对象
ui.setupUi(MainWindow) # 执行类中的setupUi方法,方法的参数是第二步中创建的QMainWindow
MainWindow.show() # 执行QMainWindow的show()方法,显示这个QMainWindow
sys.exit(app.exec_()) # 使用exit()或者点击关闭按钮退出QApplication

完整代码:

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

################################################################################
## Form generated from reading UI file '测试.ui'
##
## Created by: Qt User Interface Compiler version 6.3.0
##
## WARNING! All changes made in this file will be lost when recompiling UI file!
################################################################################

from PySide6.QtCore import (
QCoreApplication, QDate, QDateTime, QLocale,
QMetaObject, QObject, QPoint, QRect,
QSize, QTime, QUrl, Qt
)
from PySide6.QtGui import (
QBrush, QColor, QConicalGradient, QCursor,
QFont, QFontDatabase, QGradient, QIcon,
QImage, QKeySequence, QLinearGradient, QPainter,
QPalette, QPixmap, QRadialGradient, QTransform
)
from PySide6 import QtWidgets
from PySide6.QtWidgets import (
QApplication, QMainWindow, QMenuBar, QPushButton,
QSizePolicy, QStatusBar, QWidget
)


class Ui_MainWindow(object):
def setupUi(self, MainWindow):
if not MainWindow.objectName():
MainWindow.setObjectName(u"MainWindow")
MainWindow.resize(800, 600)
self.centralwidget = QWidget(MainWindow)
self.centralwidget.setObjectName(u"centralwidget")
self.pushButton = QPushButton(self.centralwidget)
self.pushButton.setObjectName(u"pushButton")
self.pushButton.setGeometry(QRect(150, 160, 211, 111))
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QMenuBar(MainWindow)
self.menubar.setObjectName(u"menubar")
self.menubar.setGeometry(QRect(0, 0, 800, 22))
MainWindow.setMenuBar(self.menubar)
self.statusbar = QStatusBar(MainWindow)
self.statusbar.setObjectName(u"statusbar")
MainWindow.setStatusBar(self.statusbar)

self.retranslateUi(MainWindow)

QMetaObject.connectSlotsByName(MainWindow)

# setupUi

def retranslateUi(self, MainWindow):
MainWindow.setWindowTitle(QCoreApplication.translate("MainWindow", u"MainWindow", None))
self.pushButton.setText(QCoreApplication.translate("MainWindow", u"PushButton", None))
# retranslateUi


if __name__ == "__main__":
import sys
from PySide6 import QtWidgets

app = QtWidgets.QApplication(sys.argv) # 创建一个QApplication,也就是你要开发的软件app
MainWindow = QtWidgets.QMainWindow() # 创建一个QMainWindow,用来装载你需要的各种组件、控件
# MainWindow = QtWidgets.QWidget() # 创建一个QMainWindow,用来装载你需要的各种组件、控件
ui = Ui_MainWindow() # ui是你创建的ui类的实例化对象
ui.setupUi(MainWindow) # 执行类中的setupUi方法,方法的参数是第二步中创建的QMainWindow
MainWindow.show() # 执行QMainWindow的show()方法,显示这个QMainWindow
sys.exit(app.exec_()) # 使用exit()或者点击关闭按钮退出QApplication

PyQT5 

PyQt5基本功能http://code.py40.com/1961.html

和 PySide6 差不多,完整示例代码( temp.py

# -*- coding: utf-8 -*-
# @Author :
# @File : temp.py
# @Software: PyCharm
# @description : XXX


from PyQt5 import QtCore, QtGui, QtWidgets
import sys


class Ui_MainWindow(object):
def setupUi(self, Form):
Form.setObjectName("Form")
Form.resize(400, 300)
self.pushButton = QtWidgets.QPushButton(Form)
self.pushButton.setGeometry(QtCore.QRect(70, 220, 75, 23))
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(Form)
self.pushButton_2.setGeometry(QtCore.QRect(220, 220, 75, 23))
self.pushButton_2.setObjectName("pushButton_2")
self.checkBox = QtWidgets.QCheckBox(Form)
self.checkBox.setGeometry(QtCore.QRect(70, 180, 141, 16))
self.checkBox.setObjectName("checkBox")
self.lineEdit = QtWidgets.QLineEdit(Form)
self.lineEdit.setGeometry(QtCore.QRect(130, 56, 181, 20))
self.lineEdit.setObjectName("lineEdit")
self.lineEdit_2 = QtWidgets.QLineEdit(Form)
self.lineEdit_2.setGeometry(QtCore.QRect(130, 110, 181, 20))
self.lineEdit_2.setObjectName("lineEdit_2")
self.label = QtWidgets.QLabel(Form)
self.label.setGeometry(QtCore.QRect(70, 60, 54, 12))
self.label.setObjectName("label")
self.label_2 = QtWidgets.QLabel(Form)
self.label_2.setGeometry(QtCore.QRect(70, 110, 54, 12))
self.label_2.setObjectName("label_2")

self.retranslateUi(Form)
QtCore.QMetaObject.connectSlotsByName(Form)

def retranslateUi(self, Form):
_translate = QtCore.QCoreApplication.translate
Form.setWindowTitle(_translate("Form", "Form"))
self.pushButton.setText(_translate("Form", "取消"))
self.pushButton_2.setText(_translate("Form", "确定"))
self.checkBox.setText(_translate("Form", "记住用户名和密码"))
self.label.setText(_translate("Form", "用户名:"))
self.label_2.setText(_translate("Form", "密码:"))


if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv) # 创建一个QApplication,也就是你要开发的软件app
MainWindow = QtWidgets.QMainWindow() # 创建一个QMainWindow,用来装载你需要的各种组件、控件
ui = Ui_MainWindow() # ui是你创建的ui类的实例化对象
ui.setupUi(MainWindow) # 执行类中的setupUi方法,方法的参数是第二步中创建的QMainWindow
MainWindow.show() # 执行QMainWindow的show()方法,显示这个QMainWindow
sys.exit(app.exec_()) # 使用exit()或者点击关闭按钮退出QApplication

程序云截图:

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_11

PyQT6

ImportError: DLL load failed while importing QtGui: 找不到指定的程序。

准备使用 PySide6,就没再查找具体原因。

 

方法 2:在 别的文件 中 调用 这个模块

通过 继承 QtWidgets.QWidget 或者  QtWidgets.QMainWindow 来实现

class MyForm(QMainWindow, Ui_MainWindow): def __init__(self): super(MyForm, self).__init__() self.setupUi(self) if __name__ == '__main__': import sys app = QApplication(sys.argv) my_form = MyForm() my_form.setWindowTitle('my_form') my_form.show() sys.exit(app.exec()) pass


生成的 Python 文件只有定义主窗口以及其控件的代码,并没有程序入口的代码。为了秉持视图与逻辑分离的原则,可以再编写一个新的脚本来调用这个文件,并且创建一个窗口。这个和 方法 1 中的 右键 run 就能显示界面的方式 并不冲突,只是要在别的文件中调用这个模块。调用文件的写法( main.py

# -*- coding: utf-8 -*-
# @Author :
# @File : main.py
# @Software: PyCharm
# @description : XXX


import sys
from temp import Ui_MainWindow
from PyQt5 import QtWidgets


# 这个类继承界面UI类
class MyWindow1(QtWidgets.QWidget, Ui_MainWindow):
def __init__(self):
super(MyWindow1, self).__init__()
self.setupUi(self)


# 这个类继承界面UI类
class MyWindow2(QtWidgets.QMainWindow, Ui_MainWindow):
def __init__(self):
super(MyWindow2, self).__init__()
self.setupUi(self)


# 调用show
if __name__ == "__main__":
app = QtWidgets.QApplication(sys.argv)
form_1 = MyWindow1()
form_1.setWindowTitle('form_1')
form_1.show()

form_2 = MyWindow2()
form_2.setWindowTitle('form_2')
form_2.show()

sys.exit(app.exec_())

被调用文件( temp.py

程序运行截图:

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_12

4、PyQT5 之 Qt Designer 介绍与入门

在 PyQt 中编写 UI 界面可以直接通过代码来实现,也可以通过 Qt Designer 来完成。Qt Designer的设计符合 MVC 的架构,其实现了视图和逻辑的分离,从而实现了开发的便捷。Qt Designer中的操作方式十分灵活,其通过拖拽的方式放置控件可以随时查看控件效果。

Qt Designer 随 PyQt5-tools 包一起安装,其安装路径在 "Python安装路径\Lib\site-packages\PyQt5\Qt5\bin" 下。若要启动 Qt Designer 可以直接到上述目录下,

  • 双击 designer.exe打开 Qt Designer;
  • 或将上述路径加入环境变量,在命令行输入designer 打开;
  • 或在 PyCharm 中将其配置为外部工具打开。

Qt Designer 生成的.ui文件(实质上是XML格式的文件)可以通过 pyuic5 工具转换成 .py 文件。

Qt Designer 界面简介

点击 QtDesigner 打开 QtDesigner 的界面,弹出如下图所示的窗口。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_13

创建新的 Form 给出了5个模板,其中 Widget MainWindow 最为常用。这里创建一个 MainWindow 。上面界面的最左侧菜单为 Widget Box,Widget Box 中包含所有 Widget 组件,从左侧的 Widget Box 中拖拽出诸如 Button、View 和 Input 等组件到中间的窗口中。

点击 菜单栏 ---> 窗体 ---> 预览 ( 快捷键为Ctrl+R ) ,可以预览设计好的界面,也可以 "预览与" 来选择在相应的主题风格下预览。

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

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_14

此时在右上角的 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文件的内容如下:

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

5、PyQT5 速成教程 --- 3 布局管理


养薛定谔的猫 简书:​​https://www.jianshu.com/u/bf82b363ae88​

布局(Layout)管理

Qt Designer中,在工具箱中最上方可以看到有4种布局。分别是

  • 垂直布局
  • 水平布局
  • 网格布局
  • 表单布局

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_15

布局名称

布局含义

垂直(Vertical)布局

布局内的控件按照从上到下的顺序纵向排列

水平(Horizontal)布局

布局内的控件按照从左到右的顺序横向排列

栅格(Grid)布局,

也 叫网格布局

将控件放入栅格中,然后划分成若干行与若干列,并且将每个窗口控件放在合适的单元中

表单(Form)布局

控件以两列布局在表单中,左列包含标签,右列包含输入控件

在 Qt Designer 中实现布局有两种方式,

  • 通过 布局管理器
  • 通过 容器控件

通过 布局管理器

在左侧的工具箱中随意拖动一些控件,例如:按钮、标签、输入框等控件 到 主窗口中。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_16

由于刚才是随意拖拽至主窗口,因此所有控件的排放是乱七八糟的。此时,我们不选中任何控件,在空白处点击右键,找到弹出菜单最下方的 Layout 布局。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_17

可以看到,在右键菜单中可以指定布局的方式以及相应布局方式的快捷键。这里我们选择 Lay Out Vertically(垂直布局),整个主窗口内的所有控件一瞬间都垂直着排列整齐了。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_18

此时如果需要调整垂直布局的顺序,只需按住待调整的控件,上下拖动即可。但是这样布局是针对整个窗口的,有时我们需要让不同的布局有父子关系的继承。那么这时就不能单纯地在空白的地方点击右键来布局了。

再次 "点击右键 -> 布局 -> 拆分布局",  然后选中需要水平布局的2个控件,选中后点击右键,水平布局。再选中另外两个控件,选择水平布局。此时的主窗口应该如图所示:

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_19

最后,我们再将两个布局选中,点击右键垂直布局,来排列两个水平布局。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_20

最后在空白区域再次使用垂直布局。这样即使我们缩放窗口,整个窗口内的控件也会跟着窗口的变化做出相应改变了。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_21

在上述操作的过程中,我们的一系列操作有决定这些物体的父子关系(层级关系)。而其层级关系在对象查看器中可以直观地看出。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_22

布局管理

把布局保存为.ui文件,并使用 PyUIC 转换为 .py 文件。

使用 容器

容器(Container)指的就是能容纳其他子控件的一个控件。使用容器控件可以将容器控件中的所有控件归为一类,从而区别于其他的控件。当然,正如上文提到过的,使用容器也可以对控件进行布局。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_23

首先,从左侧的 Container 中拖出一个 Frame 控件到主窗口中,再拖出一些其他控件到 Frame 中。如下图:

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_24

选中 Frame 中空白地方,点击右键 -> 布局 -> 水平布局,则会自动水平排列 Frame 中的控件。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_25

当我们需要变更 Frame 的位置的时候,可以直接拖动 Frame 到相应地位置,这样管理更加方便。使用容器进行布局的实质也是使用容器管理器进行布局的。

绝对布局

前面学习了布局管理器。但是最简单的布局则是之间输入控件的 Geometry 属性值。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_26

在属性编辑器中,可以修改 X、Y 值来将控件放置在相应的位置,修改 Width 和 Height 来更改控件高度。

名称

含义

X

290

控件的最左上角距离主窗口的左侧290px

Y

140

控件的最左上角距离主窗口的上方140px

Width

93

按钮的宽度为93px

Height

28

按钮的高度为23px

而上述的 Geometry 属性在 .py 代码中如下:

self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(290, 140, 93, 28))
self.pushButton.setObjectName("pushButton")

可以看到,上述代码的第二行通过 setGeometry 方法指定了 Geometry 属性的四个值。通过以上的方法,我们可以对任何一个控件进行布局。

6、Designer 实战 --- 计算器界面

使用网格布局(Grid Layout)

首先分析整数计算器需要的一些按钮:
数字键:0-9共10个。
操作符:+ - * / = CE共6个
在 Designer 的主窗口中创建 16 个按钮之后,按照4行4列的顺序进行摆放。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_27

并且修改按钮的属性中的 objectName 为相对于的名称。如数字 0 的 objectName 设置为 Num_0,操作符 + 的 objectName 设置为 OP_plus。对于按钮的显示名称的修改,在主窗口中双击相应按钮则可以快速修改。由于计算器中的按钮是正方形(通常选择正方形),而且不想让这些按钮根据窗口的大小进行变化,通过全选16个按钮(在主窗口中使用鼠标左键拖出选择框,选中16个按钮)在右侧找到 mininumSize 和 maximumSize 属性。点击其左面的箭头符号展开选项,将其宽和高固定为 60。这样就不会因为缩放窗口而造成按钮的大小变化了。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_28

在对所有按钮完成相应操作之后,我们选中16个按钮,点击右键,使用网格布局来实现布局。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_29

使用 Spacer 增加空白间隔

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_30

在 输入控件 面板中,拖一个 line Edit 控件到计算器窗口上,用来显示输入结果与计算结果。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_31

通过在空白地方右键,对主窗口使用Vertical Lay Out。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_32

此时,我们实现了一个计算器的布局。但显示框与下面的按钮距离太近。这时便需要使用左侧工具箱内的 Spacer 控件。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Python_33

Spacer 顾名思义 "分隔器" 。可以通过以占位的形式来将布局中的不同控件分开部分举例。
此时,我们拖动一个 Vertical Spacer 到 Line Edit 与下面的键盘之间。同样,Horizontal Spacer也可以用来水平地分离控件之间的距离。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_34

虽然 Spacer 在我们的 Qt Designer 编辑器中是以蓝色的类似弹簧的外观存在的,但是在真正的窗体中,Spacer 是隐形的。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_35

但这时的 Spacer 大小和 Line Edit 的大小都不是想要的,而且也无法通过鼠标来拖动。如果想要改变这些,则需要进一步了解这些控件的一些属性。

sizePolicy 尺寸策略

在 Designer 中,控件的尺寸是可以变化的。每个控件都拥有 sizeHint 和 minisizeHint 两个尺寸。sizeHint 即尺寸提示;minisizeHint 则是最小尺寸。尺寸提示也是控件的期望尺寸,最小尺寸即窗口可以被压缩到的最小的尺寸。sizePolicy 与 sizeHint 和 minisizeHint 息息相关。

对于布局管理器中的布局无法满足的要求的时候,sizePolicy 属性便派上了用场。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_36

sizePolicy 可以实现控件的微调。sizePolicy 中共有如下几种水平和垂直策略。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_37

参数说明:

在 sizePolicy 的 Horizontal Policy 和 Vertical Policy 下面还有 Horizontal Stretch 和 Vertical Stretch 两个属性。现在找到 Spacer,并修改其属性的 Height 为 10。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_Qt_38

并将其 sizeType 修改为 Fixed 固定。此时,观察左面的计算器的主界面显示栏 Line Edit 与下面的键盘之间的间距变小了。

PySide6、PyQt6、ui文件转py文件、Qt Designer 使用_ide_39

标签:__,文件,Designer,Qt,控件,self,布局,QtWidgets,MainWindow
From: https://blog.51cto.com/csnd/5956111

相关文章

  • Python PyQt5 教程
     PyQt5教程 :http://code.py40.com/face 教程翻译自:​​http://zetcode.com/gui/pyqt5/​​ 【第一节】PyQt5简介:​​http://code.py40.com/1948.html​​​【第二节】P......
  • axios---根据文件路径转换成Blob类型进行下载
    在做下载功能过程中,常常遇到接口跨域的行为,因为权限不能够直接访问而无法实现下载的情况下,可以将文件路径转成文件流下载下来。下载方法//下载getDownLoadFil......
  • ModStartBlog v6.4.0 升级输入过滤、多文件组件,修复已知问题
    ModStart是一个基于Laravel模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。系统完全开源,基于Apache2.0开源协......
  • bat文件
    bat是dos下的批处理文件。​​批处理文件​​​是无格式的文本文件,它包含一条或多条命令。它的文件扩展名为.bat或.cmd。在命令提示下键入批处理文件的名称,或者双击该批......
  • python 之将xmind转为excel用例文件
    1.xmind文件模板如下所示(最后一个子级为预置条件)2.excel用例模板3.获取xmind文件数据并转成字典形式fromxmindparserimportxmind_to_dict#xmind_to_dict可读取......
  • ubuntu20.04下C++调用接口解压缩zip文件
     https://github.com/Lecrapouille/zipper Compiling/InstallingTodownloadtheprojectandcompileit:gitclonehttps://github.com/lecrapouille/zipper.g......
  • Qt QTreeView简单使用
    QT-QTreeView使用方法QTreeView:用于显示树状结构数据,适用于树状结构数据的操作。一、初始化​ 利用QStandardlternModel来初始化数据,标准的基于项数据的数据模型类,每......
  • react需要的三个文件
    react需要的三个文件<scriptsrc="https://unpkg.com/react@16/umd/react.development.js"crossorigin></script><scriptsrc="https://unpkg.com/react-dom@16/umd/r......
  • 关于XML文件运行一段时间后,发现程序加载XML文件的时候报错问题解决方法
    一、问题描述程序所使用的XML文件运行一段时间后,发现程序加载XML文件的时候报错,要么XML内容被清空,要么就是内容少了一些,节点不完整,不是有效的XML文件。二、问题分析针对......
  • qtablewidget 高亮显示某行
    //设定选择行为,按行选择tableWidget->setSelectionBehavior(QAbstractItemView::SelectRows);//设置选中行的背景色,必须要显示设置,即代码设置或者在ui文件的控件中设置,......