界面组件布局
所谓布局,就是界面上组件的排列方式,使用布局可以使组件有规则地分布,并且随着窗体大小变化自动地调整大小和相对位置。
界面组件的层次关系
为了将界面上的各个组件的分布设计得更加美观,经常使用一些容器类,如 QGroupBox、QTabWidget、QFrame 等。
我们可以在UI 设计器的右上方的 Object Inspector 中 看到组件的层次关系。
例如:将多个组件拖动到 GroupBox中,此时拖动GroupBox,其下的所有组件一起动。
布局管理
Qt 为界面设计提供了丰富的布局管理功能,在 UI 设计器中,组件面板里有 Layouts 和 Spacers 两个组件面板,在窗体上方的工具栏里有布局管理的按钮。
Layouts 和 Spacers 两个组件面板里的布局组件的功能见表
布局组件 | 功能 |
---|---|
Vertical Layout | 垂直方向布局,组件自动在垂直方向上分布 |
Horizontal Layout | 水平方向布局,组件自动在水平方向上分布 |
Grid Layout | 网格状布局,网状布局大小改变时,每个网格的大小都改变 |
Form Layout | 窗体布局,与网格状布局类似,但是只有最右侧的一列网格会改变大小 |
Horizontal Spacer | 一个用于水平分隔的空格 |
Vertical Spacer | 一个用于垂直分隔的空格 |
使用组件面板里的布局组件设计布局时,先拖放布局组件到窗体上。布局组件会以红色边框显示。
再拖动组件或者布局组件,到布局组件中,即可。注意,布局组件是可以嵌套的。
例如:先放一个 Horizontal Layout 到窗体上,再往布局组件里拖放 3 个 Push Button 和 2 个 Horizontal Spacer,可以得到对齐效果。
在设计窗体的上方有一个工具栏,用于调整设计器进入不同的状态,以及进行布局设计,工具栏上各按钮的功能见表
按钮及快捷键 | 功能 |
---|---|
Edit Widget (F3) | 界面设计进入编辑状态,就是正常的设计状态 |
Edit Signals/Slots(F4) | 进入信号与槽的可视化设计状态 |
Edit Buddies | 进入伙伴关系编辑状态,可以设置一个Label 与一个组件成为伙伴关系 |
Edit Tab Order | 进入Tab 顺序编辑状态,Tab 顺序是在键盘上按Tab 键时,输入焦点在界面各组件之间跳动的顺序 |
Lay Out Horizontally (Ctrl+H) | 将窗体上所选组件水平布局 |
Lay Out Vertically (Ctrl+L) | 将窗体上所选组件垂直布局 |
Lay Out Horizontally in Splitter | 将窗体上所选组件用一个分割条进行水平分割布局 |
Lay Out Vertically in Splitter | 将窗体上所选组件用一个分割条进行垂直分割布局 |
Lay Out in a Form Layout | 将窗体上所选组件按窗体布局 |
Lay Out in a Grid | 将窗体上所选组件网格布局 |
Break Layout | 解除窗体上所选组件的布局,也就是打散现有的布局 |
Adjust Size(Ctrl+J) | 自动调整所选组件的大小 |
使用工具栏上的布局控制按钮时,只需在窗体上选中需要设计布局的组件,然后点击某个布局按钮即可。在窗体上选择组件时同时按住 Ctrl 键,可以实现组件多选,选择某个容器类组件,相当于选择了其内部的所有组件。
伙伴关系
伙伴关系(Buddy)是指界面上一个 Label 和一个组件相关联。伙伴关系是为了在程序运行时,在窗体上用快捷键快速将输入焦点切换到某个组件上。
在 UI 设计工具栏上单击“Edit Buddies”按钮可以进入伙伴关系编辑状态,单击一个 Label,按住鼠标左键,然后拖向一个组件,就建立了 Label 和组件之间的伙伴关系。
正确的伙伴关系是标签的蓝色箭头指向另外一个组件。
例如,在设定“姓名”标签的 Text 属性为“姓名(&N)”,其中符号“&”用来指定快捷字符,界面上并不显示“&”,这里指定快捷字母为 N。那么程序运行时,用户按下 Alt+N
,输入焦点就会快速切换到“姓名”关联的输入框内。
Tab 顺序
在 UI 设计器工具栏上单击“Edit Tab Order”按钮进入Tab 顺序编辑状态(如图 8 所示)。Tab 顺序是指在程序运行时,按下键盘上的 Tab 键时输入焦点的移动顺序。一个好的用户界面,在按 Tab 键时,焦点应该以合理的顺序在界面上移动,而不是随意地移动。
进入 Tab 顺序编辑状态后,在界面上会显示具有 Tab 顺序组件的编号,依次按希望的顺序单击组件,就可以重排 Tab 顺序了。没有输入焦点的组件是没有 Tab 顺序的,如 Label 组件。
项目功能实现
我们通过简单的项目,介绍:
- 采用 UI 设计器设计了窗体界面
- 信号槽的3种实现方式
了解完大概的概念以后,下面开始设计程序功能。
对于该程序,希望它的功能如下:
- 单击 UnderLine、Italic、Bold 3 个 CheckBox(勾选框) 时,根据其状态,设置 PlainTextEdit 里的文字的字体样式;
- Black、Red、Blue 3 个 RadioButton(单选框) 是互斥选择的,单击某个 RadioButton 时,设置文字的颜色;
- 单击“退出”按钮时,关闭窗口,退出程序。
添加界面组件
拖拽3个CheckBox组件、3个RadioButton、1个pushButton。
参考下表,修改对象名以及属性。
设置步骤不是必须的,只是为了规范以及方便对照下文的代码,才建议这么做的。
对象名 | 类名称 | 属性设置 | 备注 |
---|---|---|---|
txtEdit | QPlainTextEdit | Text="Hello, Text" | 用于显示文字内容,可编辑 |
chkBoxUnder | QCheckBox | Text="Underline" | 设置字体为下划线 |
chkBoxItalic | QCheckBox | Text="Italic" | 设置字体为斜体 |
chkBoxBold | QCheckBox | Text="Bold" | 设置字体为粗体 |
rBtnBlack | QRadioButton | Text="Black" | 字体颜色为黑色 |
rBtnRed | QRadioButton | Text="Red" | 字体颜色为红色 |
rBtnBlue | QRadioButton | Text="Blue" | 字体颜色为蓝色 |
btnClose | QPushButton | Text="Exit" | 退出程序 |
字体样式设置
针对字体样式的设置,我们采取界面化的操作。
回到Edit Widget(F3)
模式选中 chkBoxUnder 组件,单击右键调出其快捷菜单。在快捷菜单中单击菜单项“Go to slot…转到槽”, 出现一个对话框。
该对话框列出了 QCheckBox 类的所有信号,第一个是 clicked(),第二个是带一个布尔类型参数的 clicked(bool),还有其他的信号..
- 信号 clicked(bool) 会将 CheckBox 组件当前的选择状态作为一个参数传递,在响应代码里可以直接利用这个传递的参数。
- 信号 clicked(),需要在代码里读取 CheckBox 组件的选中状态。
选择 clicked(bool)
信号。 单击“OK”按钮,在 Widget 的类定义中,会在 private slots 部分自动增加一个槽函数声明,函数名是根据发射对象及其信号名称自动命名的。 我们在函数体中添加以下代码:
void Widget::on_chkBoxUnder_clicked(bool checked)
{
QFont font=ui->plainTextEdit->font();
font.setUnderline(checked); // 设置下划线
ui->plainTextEdit->setFont(font);
}
以此类推,我们完成选择框的这些样式对应的功能
...
font.setItalic(checked); // 设置斜体
...
font.setBold(checked); // 设置加粗
运行程序,可以看到字体的设置已经成功了。
字体颜色设置
为了理解信号槽的开发流程,我们这里不再通过界面生成代码。
我们自定义槽函数,再将3个RadioButton的clicked(bool)
信号关联到同一个槽函数。
添加槽
在widget.h
中,我们在Widget
类中的 private slots:
添加一个槽。
void setTextFontColor();
并在widget.cpp
中,完成上述方法的实现。
void Widget::setTextFontColor()
{
QPalette plet=ui->plainTextEdit->palette();
if (ui->rBtnBlue->isChecked())
plet.setColor(QPalette::Text,Qt::blue);
else if (ui->rBtnRed->isChecked())
plet.setColor(QPalette::Text,Qt::red);
else if (ui->rBtnBlack->isChecked())
plet.setColor(QPalette::Text,Qt::black);
else
plet.setColor(QPalette::Text,Qt::black);
ui->plainTextEdit->setPalette(plet);
}
如果编译运行程序,点击界面并没有实现有关的效果。这是因为我们现在还没将槽和信号连接(connect)起来。
连接槽与信号
按钮功能实现
剩下点击按钮退出程序这一步骤了。有2种方法:
Signals Slots Editor
回忆起我们在以前通过Signals Slots Editor
的方式添加并自动连接信号槽。
界面中间靠下的位置,找到Action Editor
那一行,点击Signals Slots Editor
点击绿色的加号,做以下选择:
- 发送者:btnClose
- 信号:
clicked()
- 接收者:Widget
- 槽:
close()
Edit Signal/Slots
在 UI 设计器里,单击上方工具栏里的“Edit Signals/Slots(快捷键 F4)”按钮,窗体进入信号与槽函数编辑状态。
将鼠标移动到按钮上方,再按下鼠标左键,移动到窗体的空白区域释放左键;弹出“配置连接”对话框。
勾选显示从QWidget继承的信号和槽
,在左侧列表中选择clicked()
,在右侧列表选择close()
。