第四讲使用qt_designer_快速设计界面

第四讲 ：使用 qt designer 快速设计界面 4.1 快速设计对话框 对于程序员来说，纯粹通过编写C++源代码来开发整个Qt应用程序并不稀奇。不过，许多程 序员还是喜欢使用可视化的MATCH_ word word文档格式规范word作业纸小票打印word模板word简历模板免费word简历 _1717309442673_0来设计窗体，Qt设计器(Qt Designer)为程序员们提供了可供使 用的新选择，它提供可视化的设计能力。用Qt Designer 设计的对话框和用c++代码写成的对话 框是一样的，可以用做一个常用的工具，并不对编辑器产生影响。 在这一节中，我们介绍使用Qt Designer来创建如图1所示的qqLoginDlg的窗体和程序代码, 无论用编写代码的方式还是用Qt Designer，创建对话框都有如下基本的步骤： 图1 QQ的登陆框 1、创建和初始化子控件。 2、把子控件放到布局管理器中。 3、设置子控件的tab 顺序和控件之间的伙伴关系。 4、创建信号和槽。 5、实现对话框的自己的槽函数。 打开QDevelop，创建一个工程，工程的模板选择“带对话框的工程”，工程名、文件名等设 置如下图2所示: 图2 创建新的工程 然后点击“确定”，则工具会创建工程有关的几个文件，在“文件浏览器”中可以看到几个 已经创建好的文件，如下图3所示： 图3 QDevelop主窗口 双击“qqLoginDlg.ui”文件，QDevelop将会启动“Qt 设计师(Qt Designer)”来打开这个 文件，刚启动设计师designer的时候，它会问是否需要“新建窗体”，因为已经有了一个窗体， 因此我们选择“关闭”。现在你应该得到一个窗口，其名称为“qqLoginDlg.ui”，如下图4所示： 图4 Qt 设计师主界面 默认情况下，Qt设计师（Qt Designer）的用户界面由几个顶级窗口组成，如果你喜欢那种 一个顶级窗口带几个子窗口的MDI形式的操作界面，那么你可以单击“设置”“属性”，选择 用户界面模式为“锚接的窗口”即可。上图即为锚接的形式。 第一步是创建子窗口部件并且把它们放置到窗体中。先将对话框界面上默认产生的一个标签 和两个按钮删除，按照图1，我们创建两个标签(Label)、两个行编辑器(Line Edit)和两个按钮 (PushButton)。对于这里的每一项，可先从Qt设计师的窗口部件工具箱中拖拽其名字或者图 表 关于同志近三年现实表现材料材料类招标技术评分表图表与交易pdf视力表打印pdf用图表说话 pdf 并 将其放到窗体中的大概位置。现在不必为怎么摆放这些部件花费太多的时间，稍后我们使用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所示： 图5 初步设计的窗体 现在，除了文本标签，所有的窗口部件看起来都很不错，文本标签仍然显示“User &Name” 和“＆Password”。单击菜单“编辑→编辑伙伴”（或者单击工具栏上的“编辑伙伴”工具按钮） 进入一种允许设置窗口部件伙伴(buddy)的特殊模式。然后单击第一个文本标签并按住鼠标左键 将红色箭头拖到第一个行编辑器上在释放鼠标按键，同样单击第二个文本标签并将红色箭头拖到 第二个行编辑器上。现在文本标签看起来没有问题了。如下图6所示： 图6 设置伙伴（buddy）关系 单击“编辑→编辑窗口部件”离开伙伴设置模式。 下一步在窗体中摆放这些部件，单击部件的时候按住Ctrl键来可同时选择几个部件，再点击 “窗体”菜单下的某种布局（或工具栏上的布局按钮： 来设置布局。 简单起见，我们将所有的部件设置在“栅格布局（GridLayout）”中：按住Ctrl键，选择所 有的部件（如果在窗体中不好选择部件，也可以在下图右半部分的Object窗口中选择）,如下图7 所示： 图7 选择多个部件 然后点击“窗体栅格布局”，将它们设置在一个网格的布局中，效果如下图8所示，部件 自动摆放好了： 图8 栅格布局 现在，单击“编辑编辑tab顺序”，在每一个可以接受焦点的窗口部件上，都会出现一个 带蓝色矩形的数字。如下图9所示。按照你所希望的接受焦点的顺序单击每一个窗口的部件，然 后单击“编辑→编辑窗口部件”，离开Tab键顺序模式。 图9 设置窗体的Tab键顺序 接下来建立信号－槽函数之间的连接，在我们的这个程序中，有两个我们自己自定义的槽函 数：login()和enableLoginButton(Qstring&)，为了能连接这两个槽函数，我们先声明它，当然， 也可以在以后手工在代码中自己添加，只是，这里我们展示一下如何使用工具。在“编辑窗口部 件”模式下，右键单击窗体中空白的地方(因为这两个槽函数都是属于对话框主窗体的，所以在 窗体上右键单击，如果要声明其他部件的槽函数，就在该部件上右键单击)，在弹出的右键菜单 中选择“改变信号/槽”，弹出编辑“QQLoginDlgClass信号和槽”的对话框，在槽（slots）部 分，单击那个加号，添加这两个函数，如下图10所示： 图10 添加槽函数的声明 然后点击“确定”，回到“编辑窗口部件”模式。 现在连接信号与槽函数，单击菜单“编辑→编辑信号/槽“（或者按F4进入信号－槽编辑模 式），我们希望，当用户在口令输入框输入口令之后，让Login按钮可以enable，换句话说，不 允许空口令，我们打算在enableLoginButton函数中去enable这个Login按钮。不过，现在，首先 需要将passwordLEdit的textChanged信号与这个enableLoginButton函数连接起来，以便当用户 在这个输入框中输入口令的时候，让Login按钮enable。 连接信号与槽函数的操作就像连接文本标签与其伙伴(buddy)的操作一样，在“编辑信号/槽” 模式下，单击passwordLEdit行编辑输入框并按着鼠标左键，将红色的箭头拖动到窗体的空白处 (因槽函数enableLoginButton是属于主窗体的)，释放鼠标按键。在弹出的“配置连接”对话框 中选择左边passwordLEdit的信号textChanged(QString) 并同时选择右边QQLoginDlgClass的槽 函数enableLoginButton(QString)，然后点击“确定”即可，如下图11所示： 图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所示： 图12 连接信号与槽示意 好了，基本完成，现在Ctrl+S，保存文件，现在可以预览一下程序运行的效果，要预览效果， 点击菜单“窗体”“预览”即可看到效果。 4.2 编写代码完成程序 现在可以编译，运行一下看看效果了，程序运行的效果如图1所示，在用户名和口令行编辑 输入框中输入一些内容，然后点击Clear按钮(或者按Alt+C)，输入的内容被清空了。不过，现在， Login按钮是disable的，下一步，也是最后一步，实现对话框中的自定义槽函数。 打开项目中的qqLoginDlgimpl.h文件，在槽函数声明区里增加槽函数的声明，该文件的最后 内容如下： #ifndef QQLOGINDLGIMPL_H #define QQLOGINDLGIMPL_H #include #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 当然，既然有函数声明，也应该有实现，我们打开qqLoginDlgimpl.cpp文件，在文件的最后 添加上面两个槽函数的实现代码，最后的文件内容如下： #include #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”，口令也一样，则显示欢迎，否 则显示相应的出错信息。 好了，大功告成，可以运行测试一下了。 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 开始。列表视图 一般处理大量数据，经常需要使用滚动条来显示全部内容。滚动条机制的基类是 QAbstractScrollArea，是视图类和其他滚动控件的基类。 Qt 还提供只显示信息的控件，QLabel 是用的最多的，它可以用来显示文本，显示带有 html 格式的文本，还可以显示图片。 QTextBrowser 显示图片， 表格 关于规范使用各类表格的通知入职表格免费下载关于主播时间做一个表格详细英语字母大小写表格下载简历表格模板下载 ，多文本连接等。Qt Assistant 就是使用 QTextBrowser 显示用 户文档。 Qt 提供这样一些数据输入的控件。QLineEdit 只可输入许可器允许的字符。QTextEdit 是 QAbstractScrollArea 的子类，可以输入多行文本。 Qt 还提供了多种普通的对话框，可以方便的选择颜色，字体，文件，打印文档等。Windows ， Mac OS X 等不同平台上的普通对话框尽可能和平台控件风格一致。 Qt 提供了很多信息显示对话框和错误提示对话框。程序的进行状态可以用 QProgressDialog 和 QProgressBar 显示。QInputDialog 可以方便的让用户输入一行文本或者数字。 这些控件和对话框提供了很多方便的函数，大部分特殊的要求可以通过设置控件属性或者通 过信号和槽连接完成。 有时候有些用户需要从零开始新建一个新自定义控件。在 Qt 中可以使用所有平台无关的绘 制函数。自定义控件还可以集成到 Qt Desinger 中，象 Qt 原有提供的控件一样使用。