第四讲使用qt designer 快速设计界面

图11 连接信号与槽函数
按照同样的操作方式，连接Login这个按钮的clicked()信号与QQLoginDlgClass的槽函数 login()，再连接Clear按钮的信号clicked()与userNameLEdit的槽函数clear()（这个函数是系 统定义的，作用是清除行编辑输入框中的内容）。一个信号可以连接到多个部件的槽函数上，我 们希望当点击Clear按钮的时候，清除用户名输入框与口令输入框的内容，因此，再次连接按钮 Clear的clicked()信号到passwordLEdit的槽函数clear()上，最后的情况是： 发送者 信号 接收者 槽函数 passwordLEdit textChanged QQLoginDlgClass enableLoginButton loginButton clicked QQLoginDlgClass login clearButton clicked usernameLEdit clear clearButton clicked passwordLEdit clear 如下图12所示：
图10 添加槽函数的声明 然后点击“确定”，回到“编辑窗口部件”模式。 现在连接信号与槽函数，单击菜单“编辑→编辑信号/槽“（或者按F4进入信号－槽编辑模 式），我们希望，当用户在口令输入框输入口令之后，让Login按钮可以enable，换句话说，不 允许空口令，我们打算在enableLoginButton函数中去enable这个Login按钮。不过，现在，首先 需要将passwordLEdit的textChanged信号与这个enableLoginButton函数连接起来，以便当用户 在这个输入框中输入口令的时候，让Login按钮enable。 连接信号与槽函数的操作就像连接文本标签与其伙伴(buddy)的操作一样， 在 “编辑信号/槽” 模式下，单击passwordLEdit行编辑输入框并按着鼠标左键，将红色的箭头拖动到窗体的空白处 (因槽函数enableLoginButton是属于主窗体的)，释放鼠标按键。在弹出的“配置连接”对话框 中选择左边passwordLEdit的信号textChanged(QString) 并同时选择右边QQLoginDlgClass的槽 函数enableLoginButton(QString)，然后点击“确定”即可，如下图11所示：
图4 Qt 设计师主界面 默认情况下，Qt设计师（Qt Designer）的用户界面由几个顶级窗口组成，如果你喜欢那种 一个顶级窗口带几个子窗口的MDI形式的操作界面，那么你可以单击“设置”“属性”，选择
用户界面模式为“锚接的窗口”即可。上图即为锚接的形式。 第一步是创建子窗口部件并且把它们放置到窗体中。先将对话框界面上默认产生的一个标签 和两个按钮删除，按照图1，我们创建两个标签(Label)、两个行编辑器(Line Edit)和两个按钮 (PushButton)。对于这里的每一项，可先从Qt设计师的窗口部件工具箱中拖拽其名字或者图表并 将其放到窗体中的大概位置。现在不必为怎么摆放这些部件花费太多的时间，稍后我们使用Qt的 布局管理器，可以把这些部件摆放好。 使用Qt设计师的属性编辑器（图2中右中部分）可以设置每一个窗口部件的属性： 1. 单击第一个文本标签， 设置它的objectName的属性为 “label1” ， text属性设置成” User &Name”。 2. 对第二个文本标签， 设置它的objectName属性为 “label2” ， text属性设置成 “&Password” 。 3. 单击第一个行编辑器，设置它的objectName属性为“userNameLEdit”。 4. 单击第二个行编辑器，设置它的objectName属性为“passwordLEdit”。 5. 同样将第一个按钮的objectName设置为“loginButton”，将它的enabled属性设置成 “false”，将它的text属性设置成“＆Login”，再将它的default属性设置成“true”。 6. 将第二个按钮的objectName设置为“clearButton”，将它的text属性设置成“&Clear”。 7. 单击这个窗体中空白的地方，选中窗体本身。将objectName设置成“QQLoginDlg”，并 且将它的windowTitle属性设置成“QQ”。然后拖动窗体的右下角的黑色方块向上，使得窗体大 小看起来合适一点，完成后如下图5所示：
图7 选择多个部件 然后点击“窗体栅格布局”，将它们设置在一个网格的布局中，效果如下图8所示，部件 自动摆放好了：
图8 栅格布局 现在，单击“编辑编辑tab顺序”，在每一个可以接受焦点的窗口部件上，都会出现一个 带蓝色矩形的数字。如下图9所示。按照你所希望的接受焦点的顺序单击每一个窗口的部件，然 后单击“编辑→编辑窗口部件”，离开Tab键顺序模式。
4.3 Qt提供的控件和对话框类
Qt 提供了许多控件和对话框类，可以满足多种情况的需要。这一节将对它们进行介绍。有 些特殊的控件如：QMenuBar，QToolBar 和 QStatusBar 主窗口类控件在第五讲介绍，QSplitter 和 QScrollArea 在第六讲介绍。在下面即将介绍的控件中，用透明的方式显示其外观。 Qt 提 供 四 种 方 式 的 按 钮 ： QPushButton, QToolButton, QCheckBox, 和 QRadioButton. QPushButton 和 QToolButton 主要用来提供点击动作，可以做为套索按钮（点击时显示按下的状 态，再次点击后恢复） 。QCheckBox 可以用来表示开关选项。QRadioButtons 一般是多个组合起来 一起使用，提供一个单一的选择。 Qt 提供的容器类控件可以容纳其他的控件。QFrame 可以单独使用，可以在其上画直线 等，它也被其他许多控件类继承，如 QToolBox 和 QLabel。 QTabWidget 和 QToolBox 是多页对话框，每一页都是一个子控件，页数从 0 开始。列表视图 一般处理大量数据，经常需要使用滚动条来显示全部内容。滚动条机制的基类是
图12 连接信号与槽示意 好了，基本完成，现在Ctrl+S，保存文件，现在可以预览一下程序运行的效果，要预览效果， 点击菜单“窗体”“预览”即可看到效果。
4.2 编写代码完成程序
现在可以编译，运行一下看看效果了，程序运行的效果如图1所示，在用户名和口令行编辑 输入框中输入一些内容，然后点击Clear按钮(或者按Alt+C)，输入的内容被清空了。不过，现在， Login按钮是disable的，下一步，也是最后一步，实现对话框中的自定义槽函数。 打开项目中的qqLoginDlgimpl.h文件，在槽函数声明区里增加槽函数的声明，该文件的最后 内容如下： #ifndef QQLOGINDLGIMPL_H #define QQLOGINDLGIMPL_H #include <QDialog> #include "ui_qqLoginDlg.h" class QQLoginDlgImpl : public QDialog, public Ui::QQLoginDlg { Q_OBJECT public: QQLoginDlgImpl( QWidget * parent = 0, Qt::WFlags f = 0 ); private slots: void enableLoginButton(const QString &); //槽函数的声明 void login(); //槽函数的声明 }; #endif
图6 设置伙伴（buddy）关系 单击“编辑→编辑窗口部件”离开伙伴设置模式。
下一步在窗体中摆放这些部件，单击部件的时候按住Ctrl键来可同时选择几个部件，再点击 “窗体”菜单下的某种布局（或工具栏上的布局按钮： 来设置布局。 简单起见，我们将所有的部件设置在“栅格布局（GridLayout）”中：按住Ctrl键，选择所 有的部件（如果在窗体中不好选择部件，也可以在下图右半部分的Object窗口中选择）,如下图7 所示：
第四讲 ：使用 qt designer 快速设计界面4.1 Nhomakorabea速设计对话框
对于程序员来说，纯粹通过编写C++源代码来开发整个Qt应用程序并不稀奇。不过，许多程 序员还是喜欢使用可视化的方法来设计窗体，Qt设计器(Qt Designer)为程序员们提供了可供使 用的新选择，它提供可视化的设计能力。用Qt Designer 设计的对话框和用c++代码写成的对话 框是一样的，可以用做一个常用的工具，并不对编辑器产生影响。 在这一节中，我们介绍使用Qt Designer来创建如图1所示的qqLoginDlg的窗体和程序代码, 无论用编写代码的方式还是用Qt Designer，创建对话框都有如下基本的步骤：
图1 QQ的登陆框 1、创建和初始化子控件。 2、把子控件放到布局管理器中。 3、设置子控件的tab 顺序和控件之间的伙伴关系。 4、创建信号和槽。 5、实现对话框的自己的槽函数。 打开QDevelop，创建一个工程，工程的模板选择“带对话框的工程”，工程名、文件名等设 置如下图2所示:
图2 创建新的工程
图9 设置窗体的Tab键顺序 接下来建立信号－槽函数之间的连接，在我们的这个程序中，有两个我们自己自定义的槽函 数：login()和enableLoginButton(Qstring&)，为了能连接这两个槽函数，我们先声明它，当然， 也可以在以后手工在代码中自己添加，只是，这里我们展示一下如何使用工具。在“编辑窗口部 件”模式下，右键单击窗体中空白的地方(因为这两个槽函数都是属于对话框主窗体的，所以在 窗体上右键单击，如果要声明其他部件的槽函数，就在该部件上右键单击)，在弹出的右键菜单 中选择“改变信号/槽”，弹出编辑“QQLoginDlgClass信号和槽”的对话框，在槽（slots）部 分，单击那个加号，添加这两个函数，如下图10所示：
当然，既然有函数声明，也应该有实现，我们打开qqLoginDlgimpl.cpp文件，在文件的最后 添加上面两个槽函数的实现代码，最后的文件内容如下： #include <QMessageBox> #include "qqLoginDlgimpl.h" // QQLoginDlgImpl::QQLoginDlgImpl( QWidget * parent, Qt::WFlags f) : QDialog(parent, f) { setupUi(this); } void QQLoginDlgImpl::enableLoginButton(const QString &text) { loginButton->setEnabled(!text.isEmpty()); } void QQLoginDlgImpl::login() { QString userName = userNameLEdit->text(); QString password = passwordLEdit->text(); if("888888"==userName){ if("888888"==password){ QMessageBox::information(this,tr("Congratulation"),tr("welcome!")); } else QMessageBox::information(this,tr("warning"),tr("password invalide!")); } else QMessageBox::information(this,tr("warining"),tr("this user is not exist!")); }// login函数的实现很简单，如果输入的用户名是“888888”，口令也一样，则显示欢迎，否 则显示相应的出错信息。 好了，大功告成，可以运行测试一下了。
然后点击“确定”，则工具会创建工程有关的几个文件，在“文件浏览器”中可以看到几个 已经创建好的文件，如下图3所示：
图3 QDevelop主窗口 双击“qqLoginDlg.ui”文件，QDevelop将会启动“Qt 设计师(Qt Designer)”来打开这个 文件，刚启动设计师designer的时候，它会问是否需要“新建窗体”，因为已经有了一个窗体， 因此我们选择“关闭”。现在你应该得到一个窗口，其名称为“qqLoginDlg.ui”，如下图4所示：
图5 初步设计的窗体 现在，除了文本标签，所有的窗口部件看起来都很不错，文本标签仍然显示“User &Name” 和“＆Password”。单击菜单“编辑→编辑伙伴”（或者单击工具栏上的“编辑伙伴”工具按钮） 进入一种允许设置窗口部件伙伴(buddy)的特殊模式。然后单击第一个文本标签并按住鼠标左键 将红色箭头拖到第一个行编辑器上在释放鼠标按键，同样单击第二个文本标签并将红色箭头拖到 第二个行编辑器上。现在文本标签看起来没有问题了。如下图6所示：