【翻译】Qt Designer 快速入门

原文链接：https://doc.qt.io/qt-6/designer-quick-start.html

用 Qt Designer 搞UI，总共分四步：

1. 把窗体形式（Main Windows\Widget等）选中并新建
2. 把控件拖到窗体里
3. 把信号（signal）关联到信号槽（slot）
4. 预览

废话不多说，先上图

如上图所示，这是一个很常见的RGB控制器，在图像处理软件设计中甚是常见。

新建窗体

新建窗体对话框中选中Widget，创建新UI文件

控件布局

拖动3个Label控件，3个Spin Box控件，3个Vertical Slider到窗体。双击Label控件即可修改默认文字，至于这三组控件，可以根据自己的喜好进行布局。

要达到如上图的布局效果，需要用到栅格布局，像下图一样选中一组控件，右键-布局-栅格布局（快捷键Ctrl + 5）,其它两组操作同上。

接下来要将这哥三与主布局融为一体。主布局即顶级widget的布局。顶级widget的布局非常重要，如果没有，当窗口放大缩小时组件不会随之变化。那么要如何设置该布局呢？在窗体中任何空白位置点击右键，选中布局-水平布局。当然你也可以选择栅格布局，显示效果是一样的，如下图。

注意：主布局不会直观的在窗体上显示，可以通过放大缩小窗体验证其是否生效。另外，你可以看一下对象检查器，如果顶级widget没有布局，它的Form对象上会有一个被破坏的图标，如下图所示。

关联信号槽实现联动

当滑动条拖动时，数字调节框中应该显示对应位置的值，反之亦然。要实现这种效果，需要将滑动条控件的valueChanged() 信号与数字调节框控件的setValue() 信号槽进行关联，然后还需要反向关联，即将数字调节框控件的valueChanged() 与滑动条控件的 setValue() 信号槽进行关联。

首先我们要切换到编辑信号/槽模式下，通过编辑-编辑信号/槽菜单或F4快捷键进行模式切换（顺便啰嗦一句，默认状态下我们是处于编辑窗口部件模式）。

鼠标放到控件上会变红，点击滑动条控件按住鼠标不放拖动至对应的数字调节框，弹出配置连接对话框，选中正确的信号和信号槽，点击OK，完活。

反向关联操作同上，不再赘述，一图胜千言。

一顿骚操作之后我们已经完成了一组部件的相互关联，再对其它两组部件进行同样的操作即可。

还有一个关键的步骤，周所周知RGB的值是0到255之间，我们需要限制Spin Box和Slider的最大值和最小值，最小值默认是0无需修改，修改最大值之前我们需要F3切换回编辑部件模式。

选中需要修改的Spin Box或Slider，修改其maximum值，记得都要设置哦。

预览

接下来就是见证奇迹的时刻，通过窗体-预览菜单或Ctrl+R快捷键预览我们设计的窗体。

Bingo！和预期的效果一样，呀扎嘿！

扩展阅读

Qt Designer 最新中文手册文档（Qt6）