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

PythonPyqt5

咕鸽框架 更新2020年03月31日 58 3890字 CID:P7

PyQt5快速入门(二)

回顾上节课

  • 搭建PyQt5环境
  • 测试PyQt5环境

本节课内容

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

让咱们开始吧!

创建第一个QWindows

还记得上节课我们创建的designer.exe快捷方式吗, 让我们打开
[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OlV4vuy0-1585657791714)(https://s2.ax1x.com/2019/04/16/AxiJb9.md.png)]](https://imgchr.com/i/AxiJb9)

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

点击新建按钮
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bYOD7K2p-1585657791716)(http://i2.bvimg.com/682239/68aadb334031acff.png)]

可以创建的有两种窗口

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

操作 Qt Designer

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZVGWBu6C-1585657791717)(https://s2.ax1x.com/2019/04/16/AxitER.png)]

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

控件可以随意拖动和控制大小
[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7lp1sl1u-1585657791718)(https://s2.ax1x.com/2019/04/16/AxiQ3T.md.gif)]](https://imgchr.com/i/AxiQ3T)

我这里随意画了一个登录的ui
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ic4EqKBd-1585657791719)(https://s2.ax1x.com/2019/04/16/AxiNU1.png)]
使用了2个Qlabel, 两个QlineEdit, 一个QpushButton
关于常用控件我们将在下一节详细学习


控件的属性

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

在点击不同控件的时候, 我们可以看见, 在属性区内容是不一样的
笔者只讲最常用的属性, 其他的可以自行翻译, 尝试修改
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IJmok13R-1585657791720)(https://s2.ax1x.com/2019/04/16/AxiU4x.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KVK5Hz9s-1585657791721)(https://s2.ax1x.com/2019/04/16/AxidC6.png)]
黄色部分为所有控件都有的属性

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

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

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

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


python来调用刚写的ui

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

生成ui文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H8OrNrnK-1585657791722)(https://s2.ax1x.com/2019/04/16/AxicVA.png)]

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

AxiBvD.png

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

.ui转换成.py文件

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

pyuic5 -o my_first_ui.py my_first_ui.ui
pause

将文件改名为 translate.bat, 双击执行此文件
以后每次修改.ui文件都要执行这个文件, 以转换ui
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EwdBQuSR-1585657791723)(https://s2.ax1x.com/2019/04/16/AxE8Rx.png)]

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

打开刚才生成的.py文件, 我们可以看到如下代码
[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uAUvnHh-1585657791724)(https://s2.ax1x.com/2019/04/16/AxisDH.md.png)]](https://imgchr.com/i/AxisDH)

此文件不要改动, 因为每次我们修改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, 如图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nq2UwOuu-1585657791725)(https://s2.ax1x.com/2019/04/16/Axi25t.png)]

按ctrl+s保存后按F5进行运行, 结果如下
[[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HU7AhFEg-1585657791726)(https://s2.ax1x.com/2019/04/16/AxigUI.md.png)]](https://imgchr.com/i/AxigUI)
至此, 我们的第一个窗口就创建成功了!


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

版权声明:
本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:http://blog.z31.xyz/index.php/archives/7/ (转载时请注明本文出处及文章链接)

评论

咕鸽框架

咕鸽框架

⭐相关推荐

Django Rest framework(drf) 快速入门(二) -- 使用Serializer大幅简化代码量

0x00 前言接上次代码, 完成了数据的获取和提交, 本次将会用到Serializer对数据进行定义, 从而大幅减少代码量, 提高代码复用率0x01 编写...

PyQt5快速入门教程(三) --- 常用控件

PyQt5快速入门教程(三) --- 常用控件回顾上节课Qt Designer基础用法让python显示我们画的ui本节课内容熟悉常用控件的功能熟悉常用控...

PyQt5快速入门(一) --- 环境配置与第一个程序

PyQt5快速入门(一)前言为什么选择PyQt5作为GUI框架?API与Qt一致, 学会PyQt后再使用qt很简单开发迅速, 可视化操作,使用design...

PyQt5中在QListWidget自定义Item的方法

PyQt5中在QListWidget自定义Item的方法效果图自定义一个Item新建一个QWidget对象在QWidget内添加Layout在Layout...

✨当下热门