PyQt5 Qt Designer 新手教程（二）—— 使用控件搭建简易对话框窗体

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：预览（预览目前设计的窗口）

三、预览需设计的窗口

1. 预览需要设计的窗口（目前这些控件已经摆放到位，并且用布局限制好了）：
   
2. CTRL+R 预览一下：
   

四、对话框窗体设计理念

这一部分，博主认为也很重要，对设计一个窗口有帮助，这些部分是书上的，搬运过来。

对于步骤 1 与步骤 2 来说，工作总是从 “后” 往 “前” 的，也就是，总会是先从容器（群组框、Tab 窗口部件、框架等）开始，然后再到它们所包含的常规狂口部件，即放到它们上面的东西。

1. 拖动一个窗口部件并将其放到窗体上大致正确的位置；无须仔细对它进行调整，通常情况下，只有容器窗口部件才进行尺寸大小的调整。（补充：后续可以用布局，或细微调整）

2. 如果有必要，可以设置窗口部件的属性；如果打算在代码中引用这个窗口部件，那么至少要给它指定一个名字。（补充：实际代码我们也要给一个标签取名字，同样如此）

3. 重复步骤1和步骤2，直至所需的全部窗口部件都放到了窗体上。

4. 如果还有大的间隙，可以放进来一个水平或者竖直分隔符(spacer，看起来好像是蓝色的弹簧)来填充起来；有的时候，在间隙比较明显的时候，会在第1步和第2步中就添加一些分隔符。

5. 选择需要布局的两个或者多个窗口部件(或者分隔符，或者布局；可以在每个上面都先按下 Ctrl 键再点击鼠标)，然后再使用布局管理器或者切分窗口（spilter) 对它们进行布局。（补充：CTRL+鼠标点选：选中一些东西（连续选中，多选），然后对它们布局）

6. 重复第 5 步，直至所有的窗口部件和分隔符都布局好为止。

7. 点击窗体（就可以放弃选中的任何东西）并使用布局管理器对其进行布局。

8. 为窗体的标签创建伙伴。（补充：所谓的伙伴指的是绑定关系，比如：标签与行编辑绑定为伙伴关系，可以通过标签的加速键（比如：标签的 Text 设置为 &File -> 按下 Alt 后，就可以变为 File），快速移动到行编辑处）

9. 如果按键次序有问题，设置窗体的 Tab 键次序。（补充：Tab 可以快速切换一些键盘键入的输入框）

10. 在适当的地方为内置信号和槽建立信号-槽连接。

11. 预览窗体并检查所有东西能否按照设想进行工作。

12. 设置窗体的对象名(会在其类名中用到这个)、窗体的标题并保存它，以便使其拥有一个文件名。例如，如果对象名是“PaymentDlg"，就应当给它的标题命名为“Payment"，文件名为 paymentdlg.ui。

大致，了解这一些内容，我们可以正式开始用控件搭建一个对话框了。

四、使用控件搭建对话框窗体

1. 新建不带按钮的对话框窗口
   

2. 在左边 Display Widgets 中把 Label 拖入中间的窗体中
   

3. 修改第一个标签的属性
   输入 Find &What:，可以双击输入，或者右边改（&作用是加速键 Alt，不懂可自查）：
   

4. 在左边 Input Widgets 中把 LineEdit 拖入中间的窗体中
   

5. 修改第一个行编辑框的属性
   修改此行编辑框的对象名（作用是在后面的实际代码编写中，还可以用到，因此取一个有意义的名字）
   操作类似于：findLineEidt = QLabel()
   

6. 重复上述几个操作，变成下面这样
   第二个标签的文本为Replace w&ith:
   第二个行编辑框的对象名字为 replaceLineEidt
   

7. 在左边 Buttons 中把 check Box 拖入中间的窗体中
   把复选框的文本改为&Case sensitive，对象名改为caseCheckBox
   

8. 重复上述操作
   把复选框的文本改为Wh&ole words，对象名改为wholeCheckBox
   

9. 继续添加一个 Syntax 的标签
   标签的文本设置为&Syntax:

10. 在左边 Input Widgets 中把 Combo Box 拖入中间的窗体中
    

11. 给组合框添加项目
    右键点击组合框，选 Edit Items
    
    点击加号
    
    输入Literal text与Regular expression
    
    
    点击 OK
    

12. 在左边 Spacers 中把 Vertical Spacer 拖入中间的窗体中
    如果用户重新修改了窗体的尺寸大小，如果希望各个窗口部件能够放在一起而不是分散开来，可以 Combo box 的下面放置一个竖直分隔符（Vertical Spacer）
    

13. 在左边 Display Widgets 中把 Vertical Line 拖入中间的窗体中
    要让这些按钮能够与已经创键的窗口部件在形式上区分开来，可以在它们和其他窗口部件之间放一根竖线。
    

14. 在左边 Buttons 中把 Push Button 拖入中间的窗体中
    按钮的文本为&Find，对象名为findButton
    

15. 依次重复上述提到的操作，直至到下面的情况
    依次输入文本、对象名：
    &Replace、replaceButton；
    Replace &All、replaceAllButton；
    Close、closeButton。

16. 设置第一个布局
    CTRL+鼠标，选中以下控件
    
    点击网格布局
    
    

17. 接下来的依次布局即可
    
    对布局和控件，可以继续布局，可以如果选起来不方便，可以在右上角的停靠窗口选择
    
    

18. 用方向键、快捷键等操作优化一下窗口
    这就涉及到美学设计，这里就随便演示一下。
    

19. 预览一下，Ctrl+R
    

20. 设置伙伴关系
    这一步就可以消除之前标签里的&，并且让伙伴功能上线。
    
    
    F3 退出此状态

21. 设置 Tab 顺序
    用默认即可，F3 退出
    

22. 绑定 Close 的槽函数
    
    依次选择 clicked()、reject()、ok，即把 Close 按钮绑定到主窗体的关闭函数
    
    

23. 设定窗体类名、标题名、文件名
    点击空白窗体处，右边修改窗体类名、标题名。
    
    
    文件保存时，File->Save，命令为 findandreplacedlg.ui
    

五、小结

这一节我们详细的讲述了如何用 Qt 设计师搭建一个简易的对话框窗体。
在适当的位置，博主也加以注释，希望让大家更加能看懂。
我们下一节见！

点我回顶部 ☚

 
 
 
 
 
 
 
Fin.