QT学习:02 界面布局管理

时间:2024-03-05 20:18:48
--- 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种实现方式

了解完大概的概念以后,下面开始设计程序功能。

对于该程序,希望它的功能如下:

  1. 单击 UnderLine、Italic、Bold 3 个 CheckBox(勾选框) 时,根据其状态,设置 PlainTextEdit 里的文字的字体样式;
  2. Black、Red、Blue 3 个 RadioButton(单选框) 是互斥选择的,单击某个 RadioButton 时,设置文字的颜色;
  3. 单击“退出”按钮时,关闭窗口,退出程序。

添加界面组件

拖拽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()