1、qt5开发及实例第开发及实例第1章章qt概述概述1.1 1.1 什么是什么是QtQtQt是一个跨平台的C+图形用户界面应用程序框架。它为应用程序开发者提供建立艺术级图形用户界面所需的所有功能。它是完全面向对象的，很容易扩展，并且允许真正的组件编程。Qt支持的平台有：lWindowsXP、Vista、Win7、Win8、Win2008；lUNIX/X11Linux、Sun Solaris、HP-UX、Compaq Tru64 UNIX、IBM AIX、SGI IRIX、FreeBSD、BSD/OS和其它很多X11平台；lMacintoshMac OS X；lEmbedded有帧缓冲（frameb
2、uffer）支持的嵌入式Linux平台、Windows CE；1.2 Qt 51.2 Qt 5的安装1.2.1 下载下载Qt 5下载地址：http:/www.qt.io/download-open-source/，下载页面如图1.1所示。1.2.2 1.2.2 运行运行Qt 5 CreatorQt 5 Creator点击运行Qt Creator，出现欢迎界面，如图1.2所示。1.2.3 Qt 51.2.3 Qt 5开发环境开发环境Qt Designer的界面如图1.3所示。1.2.3 Qt 51.2.3 Qt 5开发环境开发环境进入Qt设计器主界面后，看到的中间部分（如图1.4所示）就是将要设
3、计的顶层窗口部件（顶层窗口部件是其他子窗口部件的载体）。1.2.3 Qt 51.2.3 Qt 5开发环境开发环境选中或取消“控件”“视图”“锁定”，可以使编辑工具固定或悬浮于设计器中。l l 对象查看器（对象查看器（Object Inspector）：）：列出了界面中所有窗口部件，以及各窗口部件的父子关系和包容关系。l l 属性编辑器（属性编辑器（Property Editor）：）：列出了窗口部件可编辑的属性。l l Action编辑器（编辑器（Action Editor）：）：列出了为窗口部件设计的QAction动作，通过“添加”或“删除”按钮可以新建一个可命名的QAction动作或删除指
4、定的QAction动作。l l 信号和槽编辑器（信号和槽编辑器（Signal/Slot Editor）：）：列出了在Qt设计器中关联的信号和槽，通过双击列中的对象或信号/槽，可以进行对象的选择和信号/槽的选择。l l 控件编辑模式（控件编辑模式（Edit Widgets）：）：可以在Qt设计器中添加GUI窗口部件并修改它们的属性和外观。l l 信号信号/槽编辑模式（槽编辑模式（Edit Signal/Slots）：）：可以在Qt设计器中的窗口部件上关联Qt已经定义好的信号和槽。l l 伙伴编辑模式（伙伴编辑模式（Edit Buddy）：）：可以在Qt设计器中的窗口部件上建立QLabel标签和其
5、他窗口部件的伙伴关系。l l Tab编辑模式（编辑模式（Edit Tab Order）：）：可以在Qt设计器中的窗口部件上设置Tab键在窗口部件上的焦点顺序。1.3 Qt 51.3 Qt 5开发步骤及实例下面以完成计算圆面积功能这一简单例子来介绍一下Qt开发程序的流程，其中涉及Qt应用程序用户界面中的事件关联操作内容信号和槽机制信号和槽机制（Signal&Slot）。【例】【例】（简单）实现的功能：当用户输入一个圆的半径后，可以显示计算后的圆的面积值。运行效果如图1.5所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现1界面设计界面设计步骤如
6、下。（1）单击运行Qt Creator，进入欢迎界面（前图1.2）。单击“文件”“新建文件或项目.”命令，创建一个新的工程，如图1.6所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（2）单击选择项目“Application”“Qt Widgets Application”选项，单击“Choose.”按钮，进入下一步。编程者需要创建什么样的工程就选择相应的工程选项即可。例如，“Qt控制台应用”选项是创建一个基于控制台的工程。这里因为需要建立一个桌面应用程序，所以选择“Qt Widgets Application”，如图1.7所示。1.3.1
7、 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（3）选择保存项目的路径并定义自己项目的名字。注意，保存项目的路径中不能有中文字。项目命名没有大小写要求，依据个人习惯命名即可。这里将项目命名为Dialog，保存路径为D:QtCH1CH101，如图1.8所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（4）弹出“Kit Selection”（选择构建套件）界面，系统默认已指定C+的编译器和调试器，如图1.9所示，直接单击“下一步”按钮进入下一步骤即可。1.3.1 1.3.1 设计器设计器Qt 5 Desi
8、gnerQt 5 Designer实现实现（5）根据实际需要，选择一个“基类”。这里选择QDialog对话框类作为基类，这时“类名”、“头文件”、“源文件”及“界面文件”都出现默认的文件名。默认选中“创建界面”复选框，表示需要采用自带的界面设计器来设计界面，否则需要利用代码完成界面的设计，如图1.10所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（6）单击“完成”按钮完成创建，相应的文件自动加载到文件列表中，如图1.11所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现文件列表中的文件自
9、动分类显示，如图1.12（a）所示，各个文件包含在文件夹中，单击文件夹前面的“”图标可以显示该文件夹下的文件；而单击文件夹前面的“”图标则可隐藏该文件夹下的文件。单击中间灰色一列工具栏中的过滤符号（）后，弹出一个下拉列表，勾选“简化树形视图”则切换到简单的文件列表，如图1.12（b）所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（7）双击dialog.ui，进入界面设计器Qt Designer编辑状态，开始进行设计器（Qt Designer）编程。拖曳控件容器栏的滑动条，在最后的Display Widgets容器栏（图1.13）中找到La
10、bel标签控件，拖曳三个此控件到中间的编辑框中；1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现同样，在Input Widgets容器栏（图1.14）中找到LineEdit文本控件，拖曳此控件到中间的编辑框中，用于输入半径值；在Buttons容器栏（图1.15）中找到PushButton按钮控件，拖曳此控件到中间的编辑框中，用于提交响应单击事件。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现调整各控件的位置，单击编辑框的空白处使编辑框处于被选中状态，拖曳右下角的小方框，调整整个框架的大小，直至调整
11、到适当大小为止，调整后的布局如图1.16所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现下面将修改拖曳到编辑框中的各控件的属性，如图1.17所示，各控件属性见表1.1。ClasstextobjectNameQLabel半径：radiusLabelQLineEditradiusLineEditQLabel面积：areaLabel_1QLabelareaLabel_2QPushButton计算countBtn1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现其中，修改控件Text值的方法有如下两种。
12、l 直接双击控件本身即可修改。l 在Qt Designer设计器的属性栏中修改，如修改表示半径的Label标签，如图1.18所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现最后，修改areaLabel_2的“frameShape”为Panel；“frameShadow”为Sunken，如图1.19所示。最终效果如图1.20所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现下面单击左下角的运行按钮（）或者使用组合键【Ctrl+R】运行程序，这时系统提示是否保存，单击“保存所有”按钮，如图1.
13、21所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现2编写相应的计算圆面积代码编写相应的计算圆面积代码首先简单认识一下Qt编程环境。找到文件列表中自动添加的main.cpp文件，如图1.12所示。每个工程都有一个执行的入口函数，此文件中的main()函数就是此工程的入口。下面详细介绍一下main()函数的相关内容：#include dialog.h/(a)#include/(b)int main(int argc,char*argv)/(c)QApplication a(argc,argv);/(d)Dialog w;/创建一个对话框对象
14、w.show();/(e)return a.exec();/(f)1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现方式方式1：在LineEdit文本框内输入半径值，然后单击“计算”按钮，则在areaLabel_2中显示对应的圆面积。编写代码步骤如下。（1）在“计算”按钮上单击鼠标右键，在弹出的下拉菜单中选择“转到槽.”命令，如图1.22所示。在弹出的对话框中选择“clicked()”信号，如图1.23所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（2）进入dialog.cpp文件中按钮单击事
15、件的槽函数on_countBtn_clicked()。信号与槽连接的具体说明参照本书后面提供的知识点链接部分。在此函数中添加如下代码：void Dialog:on_countBtn_clicked()bool ok;QString tempStr;QString valueStr=ui-radiusLineEdit-text();int valueInt=valueStr.toInt(&ok);double area=valueInt*valueInt*PI;/计算圆面积 ui-areaLabel_2-setText(tempStr.setNum(area);（3）在此文件开始处添加以下语句：
16、const static double PI=3.1416;定义全局变量PI。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现方式方式2：在LineEdit内输入半径值，不需要单击按钮触发单击事件，直接就在areaLabel_2中显示圆面积。编写代码步骤如下。（1）在“LineEdit”编辑框上单击鼠标右键，在弹出的下拉菜单中选择“转到槽.”菜单项，在弹出的对话框中选择“textChanged(QString)”信号，如图1.24所示。1.3.1 1.3.1 设计器设计器Qt 5 DesignerQt 5 Designer实现实现（2）单击“确定
17、”按钮，进入dialog.cpp文件中的文本编辑框，改变值内容事件的槽函数on_radiusLineEdit_textChanged(const QString&arg1)。在此函数中添加如下代码：void Dialog:on_radiusLineEdit_textChanged(const QString&arg1)bool ok;QString tempStr;QString valueStr=ui-radiusLineEdit-text();int valueInt=valueStr.toInt(&ok);double area=valueInt*valueInt*PI;/计算圆面积 u
18、i-areaLabel_2-setText(tempStr.setNum(area);1.3.2 1.3.2 代码实现简单实例代码实现简单实例下面采用编写代码的方法来实现计算圆面积的功能，见代码CH102。具体步骤如下。（1）首先创建一个新工程。创建过程和本书1.3.1节中的第（1）（6）步相同，只是在第（3）步中，项目命名为Dialog且保存路径为D:QtCH1CH102，在第（5）步中，取消“创建界面”复选框的选中状态。1.3.2 1.3.2 代码实现简单实例代码实现简单实例（2）在上述工程的dialog.h中添加如下加黑代码：class Dialog:public QDialogQ_OB
19、JECTpublic:Dialog(QWidget*parent=0);Dialog();private:QLabel*label1,*label2;QLineEdit*lineEdit;QPushButton*button;此时要在文件最开始加入头文件：#include#include#include 1.3.2 1.3.2 代码实现简单实例代码实现简单实例（3）在dialog.cpp 中添加如下代码：Dialog:Dialog(QWidget*parent):QDialog(parent)label1=new QLabel(this);label1-setText(tr(请输入圆的半径：)
20、;lineEdit=new QLineEdit(this);label2=new QLabel(this);button=new QPushButton(this);button-setText(tr(显示对应圆的面积);QGridLayout*mainLayout=new QGridLayout(this);mainLayout-addWidget(label1,0,0);mainLayout-addWidget(lineEdit,0,1);mainLayout-addWidget(label2,1,0);mainLayout-addWidget(button,1,1);其中，其中，QGri
21、dLayout*mainLayout=new QGridLayout(this)用于布局管理器布局管理器，将所有控件的位置固定。1.3.2 1.3.2 代码实现简单实例代码实现简单实例（4）在此文件一开始添加头文件：#include 运行结果如图1.25所示。1.3.2 1.3.2 代码实现简单实例代码实现简单实例方式方式1:在LineEdit文本框内输入所需圆的半径值，单击“显示对应圆的面积”按钮后，在label2中显示相对应的圆的面积值。（1）打开dialog.h文件，在类构造函数和控件成员声明后，添加如下加黑代码：class Dialog:public QDialog .QPushBut
22、ton*button;private slots:void showArea();1.3.2 1.3.2 代码实现简单实例代码实现简单实例（2）打开dialog.cpp 文件，在构造函数中添加如下加黑代码：Dialog:Dialog(QWidget*parent):QDialog(parent).mainLayout-addWidget(button,1,1);connect(button,SIGNAL(clicked(),this,SLOT(showArea();（3）在showArea()中实现显示圆面积功能，代码如下：void Dialog:showArea()bool ok;QString tempStr;QString valueStr=lineEdit-text();int valueInt=valueStr.toInt(&ok);double area=valueInt*valueInt*PI;label2-setText(tempStr.setNum(area);1.3.2 1.3.2 代码实现简单实例代码实现简单实例（4）在此文件开始处添加全局变量：const static double PI=3.1416;（5）在LineEdit中输入圆半径值，单击“显示对应圆的面积”按钮后，在label2中显示圆面积值，如图1.26所示。
