在上一节,通过一个简单的应用程序,分析了 Qt 创建的 GUI 应用程序中各个文件的作用,剖析了可视化设计的UI文件是如何被转换为 C++ 的类定义,并自动创建界面的。这些是使用 Qt Creator 可视化设计用户界面,并使各个部分融合起来运行的基本原理。
本节再以一个稍微复杂的例子来讲解设计 GUI 的常见功能,包括界面设计时布局的管理,以及程序里如何访问界面组件。
实例程序功能
创建一个 Widget Application 项目 samp2_2,在创建窗体时选择基类 QDialog,生成的类命名为 QWDialog,并选择生成窗体。
如此新建的项目 samp2_2 有一个界面文件 qwdialog.ui,一个头文件 qwdialog.h 和源程序文件 qwdialog.cpp。此外,还有项目文件 samp2_2.pro 和主程序文件 main.cpp。
qwdialog.ui 界面文件设计时界面如图 1 所示。程序的主要功能是对中间一个文本框的文字字体样式和颜色进行设置。
图 1 实例程序 samp2_2 设计时界面
在界面设计时,对需要访问的组件修改其 objectName,如各个按钮、需要读取输入的编辑框、需要显示结果的标签等,以便在程序里区分。对于不需要程序访问的组件则无需修改其 objectName,如用于界面上组件分组的 GroupBox、Frame、布局等,让 UI 设计器自动命名即可。
对图 1 中几个主要组件的命名、属性设置见表 2。
表 2 qwdialog.ui 中各个组件的相关设置
对象名
类名称
属性设置
备注
txtEdit
QPlainTextEdit
Text="Hello, World
It is my demo. "
Font.PointSize=20
用于显示文字内容,可编辑
chkBoxUnder
QCheckBox
Text="Underline"
设置字体为下划线
chkBoxItalic
QCheckBox
Text="Italic"
设置字体为斜体
chkBoxBold
QCheckBox
Text="Bold"
设置字体为粗体
rBtnBlack
QRadioButton
Text="Black"
字体颜色为黑色
rBtnRed
QRadioButton
Text="Red"
字体颜色为红色
rBtnBlue
QRadioButton
Text="Blue"
字体颜色为蓝色
btnOK
QPushButton
Text="确定"
返回确定,并关闭窗口
btnCancel
QPushButton
Text="取消"
返回取消,并关闭窗口
btnClose
QPushButton
Text="退出"
退出程序
QWDialog
QWDialog
windowTitle="Dialog by Designer"
界面窗口的类名称是QWDialog,objectName 不要修改
对于界面组件的属性设置,需要注意以下几点。
objectName 是窗体上创建的组件的实例名称,界面上的每个组件需要有一个唯一的 objectName,程序里访问界面组件时都是通过其 objectName 进行访问,自动生成的槽函数名称里也有 objectName。所以,组件的 objectName 需要在设计程序之前设置好,设置好之后一般不要再改动。若设计程序之后再改动 objectName,涉及的代码需要相应的改动。
窗体的 objectName 就是窗体的类名称,在 UI 设计器里不要修改窗体的 objectName,窗体的实例名称需要在使用窗体的代码里去定义。
界面组件布局
Qt 的界面设计使用了布局(Layout)功能。所谓布局,就是界面上组件的排列方式,使用布局可以使组件有规则地分布