Qt Designer界面设计器简介
我们在制作 UI 界面的时候,一般可以通过UI制作工具和纯代码编写两种方式来实现。在 PyQt5 中,也可以采用这两种方式。在 PyQt5 中我们使用 Qt Designer 工具来制作 UI 界面。
Qt Designer 可以通过拖拽的方式完成复杂的界面设计,而且还可以随时预览查看效果。它生成的 UI 界面是一个后缀为.ui的文件,其实就是一个 XML 格式的文本文件。通过使用 pyuic5 命令将.ui文件转换为.py文件,然后将.py文件引入到自定义的 Python 代码中。下面我们来介绍一下 Qt Designer 的简单使用。
新建主窗口
新建窗口
模板选择 Main Window , 创建一个主窗口,主窗口默认添加了菜单栏、状态栏。
选择模板
在创建好的主窗口中可以看到,主窗体、菜单栏、状态栏、centralwidget
区域1是工具箱,其中提供了很多控件,可以直接拖放到主窗口中 区域2是主窗口区,用于进行界面布局。
区域3是对象查看区,可以查看主窗口中放置的控件列表。 区域4是属性编辑器,可以在此对控件属性进行设置。
objectName: 控件对象名称,类似于身份ID,在一个窗体中不能重复。
geometry: 相对坐标系。设置控件的 (x, y, width, height) 坐标位置。
sizePolicy: 控件大小策略。
minimumSize: 最小宽度、高度。
maximumSize: 最大宽度、高度。如果想让窗口或者控件的大小固定,就把最小最大属性设置成一样的。
font: 字体。
cursor: 鼠标光标。
windowTitle: 窗口标题。
windowIcon / icon: 窗口图标、控件图标。
iconSize: 图标大小。
text: 控件文字。
toolTip: 提示信息。
statusTip: 任务栏提示信息。鼠标移入到控件上,在状态栏显示的信息。
shortcut: 快捷键。
区域5是信号槽与动作编辑器。在信号槽中可以为控件添加信号和槽函数。不过我在Mac上使用的 Qt Designer 功能感觉没有那么强大,更可能得原因是我比较菜,没有发现它的强大之处。我并不会在编辑器里面去设置信号,最多是看一下哪个控件有什么信号可用。
说到这里必须得推荐两款软件:Dash和Zeal,前者是在Mac下使用的,后者是在Windows和Linux下使用的,非常好的离线文档阅读器。这两个软件我都用过,Dash当然是棒极了,谁用谁知道。当然 PyQt5 的离线文档是没有,不过有 Qt5 的离线文档。我们知道 PyQt5 是 Qt5 的 Python 版,所以大部分函数属性都是一样的。
在使用的过程中,有时候我们拖动一个控件上去,等布局好了以后,又想把它换成其他类型的控件。一种方式是在对象编辑区,通过变型把控件更改为其他控件。
但是这种是有限制的,继承自同样父类的控件才能相互转换。如果是不同类的控件呢?我们知道.ui文件是一个XML文件,这个文件里面是什么样子的呢?
上面是编辑器里面设置的控件位置。
.ui文件中的geometry属性与编辑器里的一样。而且我们看到上面的class和name属性,如果要改变控件类型,就修改class为指定控件的类名即可,这种方式,我们可以修改为任意类型的控件。但是要注意不同的控件有不同的属性,如果是特殊属性的,修改为其他控件后,就会消失。
保存了.ui以后,就可以使用 pyuic5 命令将其转换为.py文件。由于这个文件是用.ui生成的,可以称其为界面文件。因为每次使用.ui文件生成是都会初始化.py文件,所以我们需要创建一个新的py文件作为逻辑处理文件,将界面和逻辑分离开来。
界面文件:mainwindow.py
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(150, 80, 113, 32))
self.pushButton.setObjectName("pushButton")
self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_2.setGeometry(QtCore.QRect(150, 140, 113, 32))
self.pushButton_2.setObjectName("pushButton_2")
self.pushButton_3 = QtWidgets.QPushButton(self.centralwidget)
self.pushButton_3.setGeometry(QtCore.QRect(150, 200, 113, 32))
self.pushButton_3.setObjectName("pushButton_3")
MainWindow.setCentralWidget(self.centralwidget)
self.menubar = QtWidgets.QMenuBar(MainWindow)
self.menubar.setGeometry(QtCore.QRect(0, 0, 800, 22))
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.pushButton_2.setText(_translate("MainWindow", "PushButton"))
self.pushButton_3.setText(_translate("MainWindow", "PushButton"))
逻辑文件:main_window.py
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import QMainWindow, QApplication
from mainwindow import Ui_MainWindow
class MainUI(Ui_MainWindow, QMainWindow):
def __init__(self, parent=None):
super(MainUI, self).__init__(parent)
self.registerEvent()
def registerEvent(self):
self.pushButton.clicked.connect(self.on_btn_click)
def on_btn_click(self):
print("点击按钮")
if __name__ == "__main__":
app = QApplication(sys.argv)
main = MainUI()
main.show()
sys.exec(app.exec_())
采用这种方式实现界面和逻辑的分离,以后想要更新界面,只需要对.ui文件进行更新,然后编译成.py文件就行了。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- [C#]不通过事件方式获取键盘按钮按下的状态
- 15.深入k8s:Event事件处理及其源码分析
- SwiftUI:使用计时器重复触发事件
- SwiftUI:获取应用进入后台的通知
- Windows格式化namenode报错 - Error: JAVA_HOME is incorrectly set. Please update F:hadoopconfhadoop-e...
- Windows格式化namenode报错 - ERROR namenode.NameNode: Failed to start namenode.
- Windows启动HDFS报错 - 系统找不到文件 hadoop。
- Windows启动HDFS报错 - org.apache.hadoop.io.nativeio.NativeIO$Windows.access0(Ljava/lang/String;I)Z
- Windows启动HDFS报错 - Could not locate Hadoop executable: E:soft_workhadoop-2.6.0binwinutils.exe
- Windows中jps命令无法查看java进程问题
- Windows搭建HDFS 2.6.0(附加搭建Hadoop)
- Windows搭建HBase 2.0.2
- 病毒与安全防护-网络安全
- 应用层安全协议-Kerberos
- 组网设备