PyQt5快速入门教程(二) --- Qt Designer基础操作

PyQt5快速入门(二)

回顾上节课

  • 搭建PyQt5环境
  • 测试PyQt5环境
    什么你没有看? 好吧, 传送门走起

本节课内容

  • Qt Designer基础用法
  • 让python显示我们画的ui

让咱们开始吧!

创建第一个QWindows

还记得上节课我们创建的designer.exe快捷方式吗, 让我们打开
PyQt5快速入门教程(二) --- Qt Designer基础操作_第1张图片

全英文的, 不要怕, 快速入门要记的东西并不多

点击新建按钮

可以创建的有两种窗口

  1. Windows 就是最常见那种窗口
  2. Dialog 就是对话框, 只有关掉才能继续操作窗口那种
    这里我们选择Windows, 点击Create继续

操作 Qt Designer

PyQt5快速入门教程(二) --- Qt Designer基础操作_第2张图片

这便是我们的程序界面, 控件直接拖过来就好

控件可以随意拖动和控制大小
PyQt5快速入门教程(二) --- Qt Designer基础操作_第3张图片

我这里随意画了一个登录的ui
PyQt5快速入门教程(二) --- Qt Designer基础操作_第4张图片
使用了2个Qlabel, 两个QlineEdit, 一个QpushButton
关于常用控件我们将在下一节详细学习


控件的属性

一个控件该显示什么样子, 显示在哪里, 显示什么内容, 都由属性确定

在点击不同控件的时候, 我们可以看见, 在属性区内容是不一样的
笔者只讲最常用的属性, 其他的可以自行翻译, 尝试修改
PyQt5快速入门教程(二) --- Qt Designer基础操作_第5张图片
PyQt5快速入门教程(二) --- Qt Designer基础操作_第6张图片
黄色部分为所有控件都有的属性

  • objectName 每个控件唯一的id值, 不可重复
  • enable 可否使用, 不能使用时就是所谓的灰色图标
  • font 字体以及字体大小
  • cursor 鼠标指针在控件上时的形状

下面的蓝色部分每一个控件都不一样, 可以翻译知道到底是什么意思
现在以Qlabel(标签为例)

  • text 控件显示的文字
  • pixmap 显示的图片
  • scaledContents 缩放图片

注意!! objectName一定不能重复!!
至此, 我们的第一个ui已经写完了


python来调用刚写的ui

点击保存按钮将ui文件保存至我们的工程

生成ui文件

PyQt5快速入门教程(二) --- Qt Designer基础操作_第7张图片

  1. 点击保存
  2. 选择路径至工程路径
  3. 修改ui名, 我这里取名 my_first_ui
  4. 点击保存

PyQt5快速入门教程(二) --- Qt Designer基础操作_第8张图片

在目录下就会多出一个ui文件

.ui转换成.py文件

在刚刚的.ui文件同级下新建一个文本文件, 并写下以下内容

pyuic5 -o my_first_ui.py my_first_ui.ui
pause

将文件改名为 translate.bat, 双击执行此文件
以后每次修改.ui文件都要执行这个文件, 以转换ui
PyQt5快速入门教程(二) --- Qt Designer基础操作_第9张图片

弹出窗口如图, 同时同目录下多出一个与ui同名的.py文件
什么, 记事本弹出来了? 看看文件后面有没有.txt? 如果没有点击这里查看怎么修改扩展名

打开刚才生成的.py文件, 我们可以看到如下代码
PyQt5快速入门教程(二) --- Qt Designer基础操作_第10张图片

此文件不要改动, 因为每次我们修改ui文件, 里面的东西都会被重置
我们做的只需要记住红框里的class名称 (这个名称和QMainWindows的objectName一致)
如果没有那个class? 说明前面几步你可能写错了, 检查一下吧

调用这个py文件

在.ui目录同级下建立新的python文件, 命名为main.py(名字自取)
还记的第一节课中要记住的代码吗, 让我们复制进去, 再稍加改动

import sys
from PyQt5.QtWidgets import *
from PyQt5.QtGui import *
from PyQt5.QtCore import *


from my_first_ui import *  # 导入我们刚转换的ui


class MyWindows(Ui_MainWindow, QMainWindow):
    def __init__(self):
        super(MyWindows, self).__init__()
        self.setupUi(self)


app = QApplication(sys.argv)

my_windows = MyWindows()  # 实例化对象
my_windows.show()  # 显示窗口

sys.exit(app.exec_())

首先我们用一个类继承了窗口类和QMainWindow类以避免在原文件上修改
然后使用super去初始父类
此写法都是固定的, 要修改的是MyWindows名称
如果有多个窗口的话就构建多个class, 如图
PyQt5快速入门教程(二) --- Qt Designer基础操作_第11张图片

按ctrl+s保存后按F5进行运行, 结果如下
PyQt5快速入门教程(二) --- Qt Designer基础操作_第12张图片
至此, 我们的第一个窗口就创建成功了!


本节课我们学习了Qt Designer基础用法和让python显示我们画的ui, 下节课将学习常用控件的使用

你可能感兴趣的:(python)