QT学习：02 界面布局管理

---
title: framework-cpp-qt-02-界面布局管理
EntryName: framework-cpp-qt-02-ui-layout-manage
date: 2020-04-08 17:09:53
categories:
tags:
- qt
- c/c++
---

章节描述：

Qt 的界面设计使用了布局（Layout）功能。布局管理是 GUI 设计的必备技巧。

界面组件布局

所谓布局，就是界面上组件的排列方式，使用布局可以使组件有规则地分布，并且随着窗体大小变化自动地调整大小和相对位置。

界面组件的层次关系

为了将界面上的各个组件的分布设计得更加美观，经常使用一些容器类，如 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()。