PyQt5 Qt Designer 新手教程(二)—— 使用控件搭建简易对话框窗体
教程博文
一、前言
这一部分的教程,将教大家如何用部分控件搭建一个简易的窗体,并使用 layout 布局方式布局窗口部件,让窗口尽可能的好看一些。
(PS. 本章的演示例子来自于《Python Qt GUI 快速编程 —— PyQt 编程指南》)
二、常用快捷键介绍
用过设计软件的人,肯定知道快捷键的重要性,它能加快设计人员或者开发人员的速度,很有用。
CTRL+S
: 快速保存(前提:另存为)
CTRL+A
: 全选(选择全部控件)
CTRL+C
: 复制(可以复制控件)
CTRL+V
: 粘贴(可以粘贴控件)
Ctrl+Z
:撤销(撤回上几步)
上下左右方向键键
:移动一大步(可能有 10 px)
CTRL+鼠标点选
:选中一些东西(连续选中,多选)
CTRL + 上下左右方向键
:移动 1 px(强迫症的福音)
CTRL+R
:预览(预览目前设计的窗口)
三、预览需设计的窗口
- 预览需要设计的窗口(目前这些控件已经摆放到位,并且用布局限制好了):
- CTRL+R 预览一下:
四、对话框窗体设计理念
这一部分,博主认为也很重要,对设计一个窗口有帮助,这些部分是书上的,搬运过来。
对于步骤 1 与步骤 2 来说,工作总是从 “后” 往 “前” 的,也就是,总会是先从容器(群组框、Tab 窗口部件、框架等)开始,然后再到它们所包含的常规狂口部件,即放到它们上面的东西。
-
拖动一个窗口部件并将其放到窗体上大致正确的位置;无须仔细对它进行调整,通常情况下,只有容器窗口部件才进行尺寸大小的调整。(补充:后续可以用布局,或细微调整)
-
如果有必要,可以设置窗口部件的属性;如果打算在代码中引用这个窗口部件,那么至少要给它指定一个名字。(补充:实际代码我们也要给一个标签取名字,同样如此)
-
重复步骤1和步骤2,直至所需的全部窗口部件都放到了窗体上。
-
如果还有大的间隙,可以放进来一个水平或者竖直分隔符(spacer,看起来好像是蓝色的弹簧)来填充起来;有的时候,在间隙比较明显的时候,会在第1步和第2步中就添加一些分隔符。
-
选择需要布局的两个或者多个窗口部件(或者分隔符,或者布局;可以在每个上面都先按下 Ctrl 键再点击鼠标),然后再使用布局管理器或者切分窗口(spilter) 对它们进行布局。(补充:
CTRL+鼠标点选
:选中一些东西(连续选中,多选),然后对它们布局) -
重复第 5 步,直至所有的窗口部件和分隔符都布局好为止。
扫描二维码关注公众号,回复: 12729822 查看本文章 -
点击窗体(就可以放弃选中的任何东西)并使用布局管理器对其进行布局。
-
为窗体的标签创建伙伴。(补充:所谓的伙伴指的是绑定关系,比如:标签与行编辑绑定为伙伴关系,可以通过标签的加速键(比如:标签的 Text 设置为 &File -> 按下 Alt 后,就可以变为 File),快速移动到行编辑处)
-
如果按键次序有问题,设置窗体的 Tab 键次序。(补充:Tab 可以快速切换一些键盘键入的输入框)
-
在适当的地方为内置信号和槽建立信号-槽连接。
-
预览窗体并检查所有东西能否按照设想进行工作。
-
设置窗体的对象名(会在其类名中用到这个)、窗体的标题并保存它,以便使其拥有一个文件名。例如,如果对象名是“PaymentDlg",就应当给它的标题命名为“Payment",文件名为 paymentdlg.ui。
大致,了解这一些内容,我们可以正式开始用控件搭建一个对话框了。
四、使用控件搭建对话框窗体
-
新建不带按钮的对话框窗口
-
在左边 Display Widgets 中把 Label 拖入中间的窗体中
-
修改第一个标签的属性
输入Find &What:
,可以双击输入,或者右边改(&
作用是加速键 Alt,不懂可自查):
-
在左边 Input Widgets 中把 LineEdit 拖入中间的窗体中
-
修改第一个行编辑框的属性
修改此行编辑框的对象名(作用是在后面的实际代码编写中,还可以用到,因此取一个有意义的名字)
操作类似于:findLineEidt = QLabel()
-
重复上述几个操作,变成下面这样
第二个标签的文本为Replace w&ith:
第二个行编辑框的对象名字为replaceLineEidt
-
在左边 Buttons 中把 check Box 拖入中间的窗体中
把复选框的文本改为&Case sensitive
,对象名改为caseCheckBox
-
重复上述操作
把复选框的文本改为Wh&ole words
,对象名改为wholeCheckBox
-
继续添加一个 Syntax 的标签
标签的文本设置为&Syntax:
-
在左边 Input Widgets 中把 Combo Box 拖入中间的窗体中
-
给组合框添加项目
右键点击组合框,选 Edit Items
点击加号
输入Literal text
与Regular expression
点击 OK
-
在左边 Spacers 中把 Vertical Spacer 拖入中间的窗体中
如果用户重新修改了窗体的尺寸大小,如果希望各个窗口部件能够放在一起而不是分散开来,可以 Combo box 的下面放置一个竖直分隔符(Vertical Spacer)
-
在左边 Display Widgets 中把 Vertical Line 拖入中间的窗体中
要让这些按钮能够与已经创键的窗口部件在形式上区分开来,可以在它们和其他窗口部件之间放一根竖线。
-
在左边 Buttons 中把 Push Button 拖入中间的窗体中
按钮的文本为&Find
,对象名为findButton
-
依次重复上述提到的操作,直至到下面的情况
依次输入文本、对象名:
&Replace
、replaceButton
;
Replace &All
、replaceAllButton
;
Close
、closeButton
。 -
设置第一个布局
CTRL+鼠标,选中以下控件
点击网格布局
-
接下来的依次布局即可
对布局和控件,可以继续布局,可以如果选起来不方便,可以在右上角的停靠窗口选择
-
用方向键、快捷键等操作优化一下窗口
这就涉及到美学设计,这里就随便演示一下。
-
预览一下,Ctrl+R
-
设置伙伴关系
这一步就可以消除之前标签里的&
,并且让伙伴功能上线。
F3 退出此状态 -
设置 Tab 顺序
用默认即可,F3 退出
-
绑定 Close 的槽函数
依次选择 clicked()、reject()、ok,即把 Close 按钮绑定到主窗体的关闭函数
-
设定窗体类名、标题名、文件名
点击空白窗体处,右边修改窗体类名、标题名。
文件保存时,File->Save,命令为 findandreplacedlg.ui
五、小结
这一节我们详细的讲述了如何用 Qt 设计师搭建一个简易的对话框窗体。
在适当的位置,博主也加以注释,希望让大家更加能看懂。
我们下一节见!
点我回顶部 ☚
Fin.