PyQt5基础学习(二)——QTDesigner工具界面设计初步应用

PyQt5基础(二)——QTDesigner工具界面设计初步应用

QTDesigner绝对算得上是一个强大的UI设计工具,甚至可以完全避免学习UI设计的相关代码,只需要理解概念,学习界面设计,掌握UI设计师的职能就能设计并实现出一个基本健壮性完整的界面了。

1.QTDesigner工具初步认识

在该工具的左侧组件选择器中,具体分布大致如下:

1.1 Layouts(布局组件)

1.1.1 布局组件基本使用

在这里插入图片描述
以上主要是对于按钮等等控件在布局上的整体设计组件,例如:在这里插入图片描述
实现的是在一列对齐情况下的布局组件,如下所示:

布局名称布局类型
Vertical垂直布局
Horizontal水平布局
Grid栅格布局
Form表单布局

如下
在这里插入图片描述
在该布局组件中加入的控件时,需要注意在调整布局组件大小时,如使用如下垂直布局,控件水平间距不变。所以整体是有一定局限性的
在这里插入图片描述
在这里插入图片描述

1.1.2 布局水平垂直组件的嵌套使用

如下图,备注(Label)和备注框(Line Edit)就是一个垂直布局,姓名(Label)、填写框(Line Edit)和确定键(Push Button)是一个水平布局,而整个又是一个大的垂直布局。
遵循先小后大布局嵌套原则。
在这里插入图片描述

1.1.3 栅格布局

如下就是一个简单的栅格布局
在这里插入图片描述

1.1.4 表单布局

在这里插入图片描述

1.2 Spaces(间隔布局)

在设置布局的基础上,为两个模块设置一定的间隔,就像是弹簧
在这里插入图片描述
在这里插入图片描述

1.3 Buttons(按钮控制组件)

大致分为控制按键,单选按钮,多选按钮、判断按钮等等。
在这里插入图片描述

1.3.1 Push Button(按键按钮)
属性方法
minimumSize声明按钮的宽高不能低于最小大小值
maximumSize声明按钮的宽高不能高于最大大小值

1.4 Input Widge(输入组件)

在这里插入图片描述

1.5 Containers(容器组件)

在这里插入图片描述

1.5.1 Frame容器

原理和布局相像,在容器中加入各种组件后,通过给容器设置布局,即可满足。
在这里插入图片描述

1.6 Display Widgets()

1.6.1 Label(文本显示)

提供基本显示在界面的文本输入

1.6.2 Horizontal Line && Vertical Line(垂直分割线 && 水平分割线)

为两个模块之间添加一条可见的线,其他属性无任何改变

1.6.3 QWebEngineView(外置网址浏览器)

提供外站直接显示的窗口界面,如下:
窗口内访问外站网页
注意: 部分版本包括PYQT5最新版不支持该框架,所以需要一个之前的版本,上一文章中提供了5.10.1版本,支持该框架,经测试,可以正常使用。

当然正常来说PYQT5是都支持的,最新版只是改变了名称,实际上功能是完全一致的,如果碰见报错的问题,也可以通过修改UI转为py文件后最下面的

from PyQt5 import QtWebEngineWidgets

改成

from PyQt5.QtWebEngineWidgets import *

注意以上的相应代码也要修改,QWebEngineView即可

2. 属性编辑器

2.1 geometry(绝对布局)

在属性中,geometry(绝对路径)控制整个容器所在位置
在这里插入图片描述

2.2 sizePolicy(尺寸策略)

联合最小和最大的限定属性,在兼容性放大缩小等等场景下有重要用处!

水平策略含义
Fixed(常用)固定值
Minimum设置尺寸的最小值
Maximum设置尺寸的最大值
Prefreed默认
Expanding(常用)权重占比,比如三个控件依次填入2,2,4,此时三者占比为25%,25%,50%

3 伙伴(组件关联关系)

3.1 Windows热键概念

在这里插入图片描述
热键需要Alt加对应的键才可唤醒

3.2 QTDesigner中对于热键的应用

在某个Label下加入英语括号和&X即可,如(&A)表示按住ALT+A即可快速跳转至姓名所依赖的输入栏下。
只有设置依赖关系才能只显示A,否则不具有各种操作意义。
在这里插入图片描述

3.3 伙伴(依赖)关系的设置

找到Edit–>编辑伙伴
在这里插入图片描述
点击想要设置的被依赖Label,拖拽至依赖的输入栏,
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
红点说明建立了依赖关系
PS:这里只是举例Label,实际上它也能连自己,各种基本上都能相连

设置伙伴完成后,选择Edit–>编辑窗口/部件,即可返回普通模式

在这里插入图片描述
此时(&A)中的&消失,说明伙伴关系生效
在这里插入图片描述

4 Tab顺序

通常情况下,Tab的递进顺序是从上到下的原则,如果想要更改目前默认的顺序,可以做如下更改:
进入Edit–>编辑Tab顺序
在这里插入图片描述

4.1 鼠标双击法

直接按照自己想要的顺序依次进行双击即可改变,如下
在这里插入图片描述

4.2 制表符方法

右键鼠标,选择制表符顺序列表,通过表右方箭头进行控制。
在这里插入图片描述

5 设置信号与槽

5.1 概念

信号(signal)
槽(slot)

是Qt的核心机制,也是PyQt的核心机制
信号:是由对象或控件发射出去的消息

按钮的单击事件
当单击按钮时,按钮就会向外部发送单击的消息,这些发送的信号,需要一些代码来拦截,这些代码就是槽

槽本质上是一个函数或方法

信号可以理解为事件,槽可以理解为事件函数

需要将信号和槽绑定

一个信号可以和多个槽绑定,一个槽也可以拦截多个信号

5.2 信号与槽应用

5.2.1 进入编辑状态

Edit—>编辑信号/槽进入
在这里插入图片描述

5.2.2 控件具体含义

点击某一控件,拖动至text Eidt等,会出现以下类似框图
在这里插入图片描述

操作方法具体方法含义
clicked()close()关闭整个窗口
toggled(bool)setVisible(bool)显示/隐藏某一个文本等等框
setEnabled(bool)可用/不可用某一个文本等框

6 为窗口添加菜单栏和工具栏

在这里插入图片描述

6.1 添加菜单栏

在菜单栏所在位置点击后输入名称确定,然后下面会有复选栏,依次输入,添加分隔符即可,结果如下:
在这里插入图片描述

添加工具栏

首先需要明白,工具栏的所有按钮都是一个动作(action),所以在工具栏中无法直接使用容器按钮等等进行拖拽添加操作。
在视图中打开视图编辑器中的动作编辑器
在这里插入图片描述
在这里插入图片描述
可以看到,其中的动作都是和菜单中的命名完全对应,双击其中某个动作,如下:
编辑动作
然后拖动至工具栏处即可。
在这里插入图片描述

到此,QTDesigner工具使用完毕,后续就要开展代码进阶的PyQt的使用了!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值