A Quick Start to Qt Designer

使用 Qt Designer 主要分为 4 步:

  1. 选择窗体类型和窗体上的对象
  2. 在窗体上布局对象
  3. 连接信号和槽函数
  4. 预览窗体

假设你想设计一个小的 widget (参考上图), 其中包含设置红, 绿, 蓝 (RGB) 值所需的控件 -- 这一类型的控件在图像操作程序中随处可见.

选择窗体类型

新建窗体 对话框选择 Widget .

在窗体上放置 widget

在窗体上分别拖入三个 Label, Spin Box, Vertical Slider. 在 Label 上双击, 修改默认文本. 你可以根据你想要的布局排列它们.

为了确保它们在程序中的布局与此完全相同, 你需要将这些 widget 放置到一个布局中. 按照 3 个不同类型的 widget 为一组. 首先, 点选 "RED" Label. 然后, 按住 Ctrl 键, 点选 Spin Box 和 Vertical Slider. 在 窗体 菜单中, 选择 栅格布局.

对另外两组重复相同的步骤.

下一步将三个布局合并为一个主布局. 主布局是顶级 widget(本例中为 QWidget) 的布局. 重要的是, 顶级 widget 需要设置一个布局; 否则, 调整窗口大小时, 窗口上的 widget 不会调整大小. 想要设置布局, 首先, 在窗体的任意空白区域右击, 然后, 在弹出菜单选择 布局 -> 水平布局. 或者, 你也可以选择 栅格布局 -- 你仍然会看到相同的排列 (如下所示).

注意: 在窗体上无法看到主布局. 如果你想检查是否有主布局, 调整窗口大小; 可以根据窗口上的 widget 大小是否改变判断. 或者, 你可以查看 Qt Designer 右上角的 对象检查器. 如果顶级 widget 没有有布局, 你可以看到一个打破布局的图标, .

你点击 Slider, 拖动滑块到某一数值时, 你希望 Spin Box 展示 Slider 的位置. 为了满足这一需求, 你需要连接 Slider 的 valueChanged() 信号到 Spin Box 的 setValue() 槽函数. 你也需要反向连接, 即., 连接 Spin Box 的 valueChanged() 信号到 Slider 的 setValue() 槽函数.

想要实现这一点, 你必须切换到 Edit Signals/Slots 模式, 也可以按 F4 键或从 编辑 菜单选择 Edit Signals/Slots.

连接信号和槽函数

点选 Slider , 并拖动鼠标到 Spin Box. 弹出 配置连接 对话框. 选择相应的信号和槽函数, 点击 确定 按钮.

重复上述步骤, 点选 Spin Box , 并拖动鼠标到 Slider, 连接 Spin Box 的 valueChanged() 信号到 Slider 的 setValue() 槽函数.

参考下图选择正确的信号和槽函数.

现在, 你已经成功连接 "RED" 的对象, 你可以采用相同的方式处理 "GREEN" 和 "BLUE" 的对象.

因为 RGB 的数值范围是 0 到 255, 所有, 我们也将 Spin Box 和 Slider 的数值范围限制在 0 到 255.

设置 widget 属性

点击 Spin Box. 在 属性编辑器 中, 你可以看到 QSpinBox 的属性. 在 maximum 中输入 "255" . 然后, 点击 Vertical Slider, 你可以看到 QAbstractSlider 的属性. 在 maximum 中输入 "255". 重复上面步骤设置其余的 Spin Boxe 和 Slider.

现在, 我们按 Ctrl + R 组合键或选择 窗体 菜单中的 预览, 查看窗体在应用程序中如何显示. 你可以拖动滑块或者调整 Spin Box的数值. 你也可以调整窗体大小, 查看布局如何管理窗体上的 widget, 设置它们的大小.