qt5開(kāi)發(fā)及實(shí)例(第2版)-第1章 qt概述

1、第1章 Qt概述,什么是Qt,Qt 5的安裝,Qt 5開(kāi)發(fā)步驟及實(shí)例,1.1 什么是Qt,Qt是一個(gè)跨平臺(tái)的C++圖形用戶界面應(yīng)用程序框架。它為應(yīng)用程序開(kāi)發(fā)者提供建立藝術(shù)級(jí)圖形用戶界面所需的所有功能。它是完全面向?qū)ο蟮?，很容易擴(kuò)展，并且允許真正的組件編程。Qt支持的平臺(tái)有：Windows—XP、Vista、Win7、Win8、Win2008；UNIX/X11—Linux、Sun Solaris、HP-UX、Compaq Tru

2、64 UNIX、IBM AIX、SGI IRIX、FreeBSD、BSD/OS和其它很多X11平臺(tái)；Macintosh—Mac OS X；Embedded—有幀緩沖（framebuffer）支持的嵌入式Linux平臺(tái)、Windows CE；,1.2 Qt 5的安裝,1.2.1 下載Qt 5下載地址：http://www.qt.io/download-open-source/，下載頁(yè)面如圖1.1所示。,,1.2.2 運(yùn)行Qt

3、5 Creator,點(diǎn)擊運(yùn)行Qt Creator，出現(xiàn)歡迎界面，如圖1.2所示。,1.2.3 Qt 5開(kāi)發(fā)環(huán)境,Qt Designer的界面如圖1.3所示。,1.2.3 Qt 5開(kāi)發(fā)環(huán)境,進(jìn)入Qt設(shè)計(jì)器主界面后，看到的中間部分（如圖1.4所示）就是將要設(shè)計(jì)的頂層窗口部件（頂層窗口部件是其他子窗口部件的載體）。,1.2.3 Qt 5開(kāi)發(fā)環(huán)境,選中或取消“控件”→“視圖”→“鎖定”，可以使編輯工具固定或懸浮于設(shè)計(jì)器中。? 對(duì)象查看器

4、（Object Inspector）：列出了界面中所有窗口部件，以及各窗口部件的父子關(guān)系和包容關(guān)系。? 屬性編輯器（Property Editor）：列出了窗口部件可編輯的屬性。? Action編輯器（Action Editor）：列出了為窗口部件設(shè)計(jì)的QAction動(dòng)作，通過(guò)“添加”或“刪除”按鈕可以新建一個(gè)可命名的QAction動(dòng)作或刪除指定的QAction動(dòng)作。? 信號(hào)和槽編輯器（Signal/Slot Editor）：列出

5、了在Qt設(shè)計(jì)器中關(guān)聯(lián)的信號(hào)和槽，通過(guò)雙擊列中的對(duì)象或信號(hào)/槽，可以進(jìn)行對(duì)象的選擇和信號(hào)/槽的選擇。? 控件編輯模式（Edit Widgets）：可以在Qt設(shè)計(jì)器中添加GUI窗口部件并修改它們的屬性和外觀。? 信號(hào)/槽編輯模式（Edit Signal/Slots）：可以在Qt設(shè)計(jì)器中的窗口部件上關(guān)聯(lián)Qt已經(jīng)定義好的信號(hào)和槽。? 伙伴編輯模式（Edit Buddy）：可以在Qt設(shè)計(jì)器中的窗口部件上建立QLabel標(biāo)簽和其他窗口部件的伙

6、伴關(guān)系。? Tab編輯模式（Edit Tab Order）：可以在Qt設(shè)計(jì)器中的窗口部件上設(shè)置Tab鍵在窗口部件上的焦點(diǎn)順序。,1.3 Qt 5開(kāi)發(fā)步驟及實(shí)例,下面以完成計(jì)算圓面積功能這一簡(jiǎn)單例子來(lái)介紹一下Qt開(kāi)發(fā)程序的流程，其中涉及Qt應(yīng)用程序用戶界面中的事件關(guān)聯(lián)操作內(nèi)容——信號(hào)和槽機(jī)制（Signal&Slot）。【例】（簡(jiǎn)單） 實(shí)現(xiàn)的功能：當(dāng)用戶輸入一個(gè)圓的半徑后，可以顯示計(jì)算后的圓的面積值。運(yùn)行效果如圖1.5所示。,

7、1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),1．界面設(shè)計(jì)步驟如下。（1）單擊運(yùn)行Qt Creator，進(jìn)入歡迎界面（前圖1.2）。單擊“文件”→“新建文件或項(xiàng)目...”命令，創(chuàng)建一個(gè)新的工程，如圖1.6所示。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（2）單擊選擇項(xiàng)目“Application”→“Qt Widgets Application”選項(xiàng)，單擊“Choose...”按鈕，進(jìn)入下一步。編程者需要?jiǎng)?chuàng)建什么樣

8、的工程就選擇相應(yīng)的工程選項(xiàng)即可。例如，“Qt控制臺(tái)應(yīng)用”選項(xiàng)是創(chuàng)建一個(gè)基于控制臺(tái)的工程。這里因?yàn)樾枰⒁粋€(gè)桌面應(yīng)用程序，所以選擇“Qt Widgets Application”，如圖1.7所示。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（3）選擇保存項(xiàng)目的路徑并定義自己項(xiàng)目的名字。注意，保存項(xiàng)目的路徑中不能有中文字。項(xiàng)目命名沒(méi)有大小寫(xiě)要求，依據(jù)個(gè)人習(xí)慣命名即可。這里將項(xiàng)目命名為Dialog，保存路徑為D:\Qt\CH1\C

9、H101，如圖1.8所示。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（4）彈出“Kit Selection”（選擇構(gòu)建套件）界面，系統(tǒng)默認(rèn)已指定C++的編譯器和調(diào)試器，如圖1.9所示，直接單擊“下一步”按鈕進(jìn)入下一步驟即可。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（5）根據(jù)實(shí)際需要，選擇一個(gè)“基類”。這里選擇QDialog對(duì)話框類作為基類，這時(shí)“類名”、“頭文件”、“源文件”及“界面文件”都出現(xiàn)默認(rèn)的文件名。默

10、認(rèn)選中“創(chuàng)建界面”復(fù)選框，表示需要采用自帶的界面設(shè)計(jì)器來(lái)設(shè)計(jì)界面，否則需要利用代碼完成界面的設(shè)計(jì)，如圖1.10所示。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（6）單擊“完成”按鈕完成創(chuàng)建，相應(yīng)的文件自動(dòng)加載到文件列表中，如圖1.11所示。,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),文件列表中的文件自動(dòng)分類顯示，如圖1.12（a）所示，各個(gè)文件包含在文件夾中，單擊文件夾前面的“ ”圖標(biāo)可以顯示該文件夾下的文件；而

11、單擊文件夾前面的“ ”圖標(biāo)則可隱藏該文件夾下的文件。單擊中間灰色一列工具欄中的過(guò)濾符號(hào)（ ）后，彈出一個(gè)下拉列表，勾選“簡(jiǎn)化樹(shù)形視圖”則切換到簡(jiǎn)單的文件列表，如圖1.12（b）所示。,,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（7）雙擊dialog.ui，進(jìn)入界面設(shè)計(jì)器Qt Designer編輯狀態(tài)，開(kāi)始進(jìn)行設(shè)計(jì)器（Qt Designer）編程。拖曳控件容器欄的滑動(dòng)條，在最后的Display Widgets容器欄（圖1.

12、13）中找到Label標(biāo)簽控件，拖曳三個(gè)此控件到中間的編輯框中；,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),同樣，在Input Widgets容器欄（圖1.14）中找到LineEdit文本控件，拖曳此控件到中間的編輯框中，用于輸入半徑值；在Buttons容器欄（圖1.15）中找到PushButton按鈕控件，拖曳此控件到中間的編輯框中，用于提交響應(yīng)單擊事件。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),調(diào)整各控件的位置

13、，單擊編輯框的空白處使編輯框處于被選中狀態(tài)，拖曳右下角的小方框，調(diào)整整個(gè)框架的大小，直至調(diào)整到適當(dāng)大小為止，調(diào)整后的布局如圖1.16所示。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),下面將修改拖曳到編輯框中的各控件的屬性，如圖1.17所示，各控件屬性見(jiàn)表1.1。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),其中，修改控件Text值的方法有如下兩種。? 直接雙擊控件本身即可修改。? 在Qt Designer設(shè)計(jì)器的屬

14、性欄中修改，如修改表示半徑的Label標(biāo)簽，如圖1.18所示。,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),最后，修改areaLabel_2的“frameShape”為Panel；“frameShadow”為Sunken，如圖1.19所示。最終效果如圖1.20所示。,,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),下面單擊左下角的運(yùn)行按鈕（ ）或者使用組合鍵【Ctrl+R】運(yùn)行程序，這時(shí)系統(tǒng)提示是否保存，單

15、擊“保存所有”按鈕，如圖1.21所示。,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),2．編寫(xiě)相應(yīng)的計(jì)算圓面積代碼首先簡(jiǎn)單認(rèn)識(shí)一下Qt編程環(huán)境。找到文件列表中自動(dòng)添加的main.cpp文件，如圖1.12所示。每個(gè)工程都有一個(gè)執(zhí)行的入口函數(shù)，此文件中的main()函數(shù)就是此工程的入口。下面詳細(xì)介紹一下main()函數(shù)的相關(guān)內(nèi)容：#include "dialog.h"//(a)#includ

16、e //(b)int main(int argc, char *argv[])//(c){ QApplication a(argc, argv);//(d) Dialog w;//創(chuàng)建一個(gè)對(duì)話框?qū)ο?w.show();//(e) return a.exec();//(f)},1.3.1 設(shè)計(jì)器Q

17、t 5 Designer實(shí)現(xiàn),方式1：在LineEdit文本框內(nèi)輸入半徑值，然后單擊“計(jì)算”按鈕，則在areaLabel_2中顯示對(duì)應(yīng)的圓面積。編寫(xiě)代碼步驟如下。（1）在“計(jì)算”按鈕上單擊鼠標(biāo)右鍵，在彈出的下拉菜單中選擇“轉(zhuǎn)到槽...”命令，如圖1.22所示。在彈出的對(duì)話框中選擇“clicked()”信號(hào)，如圖1.23所示。,,,,,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（2）進(jìn)入dialog.cpp文件中按鈕單擊事件

18、的槽函數(shù)on_countBtn_clicked()。信號(hào)與槽連接的具體說(shuō)明參照本書(shū)后面提供的知識(shí)點(diǎn)鏈接部分。在此函數(shù)中添加如下代碼：void Dialog:: on_countBtn_clicked(){ bool ok; QString tempStr; QString valueStr=ui->radiusLineEdit->text(); int valueInt=valueStr.

19、toInt(&ok); double area=valueInt*valueInt*PI;//計(jì)算圓面積 ui->areaLabel_2->setText(tempStr.setNum(area));}（3）在此文件開(kāi)始處添加以下語(yǔ)句：const static double PI=3.1416;定義全局變量PI。,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),方式2：在LineEd

20、it內(nèi)輸入半徑值，不需要單擊按鈕觸發(fā)單擊事件，直接就在areaLabel_2中顯示圓面積。編寫(xiě)代碼步驟如下。（1）在“LineEdit”編輯框上單擊鼠標(biāo)右鍵，在彈出的下拉菜單中選擇“轉(zhuǎn)到槽...”菜單項(xiàng)，在彈出的對(duì)話框中選擇“textChanged(QString)”信號(hào)，如圖1.24所示。,,1.3.1 設(shè)計(jì)器Qt 5 Designer實(shí)現(xiàn),（2）單擊“確定”按鈕，進(jìn)入dialog.cpp文件中的文本編輯框，改變值內(nèi)容事件的槽函數(shù)

21、on_radiusLineEdit_textChanged(const QString &arg1)。在此函數(shù)中添加如下代碼：void Dialog::on_radiusLineEdit_textChanged(const QString &arg1){ bool ok; QString tempStr; QString valueStr=ui->radiusLineEdit->t

22、ext(); int valueInt=valueStr.toInt(&ok); double area=valueInt*valueInt*PI;//計(jì)算圓面積 ui->areaLabel_2->setText(tempStr.setNum(area));},1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,下面采用編寫(xiě)代碼的方法來(lái)實(shí)現(xiàn)計(jì)算圓面積的功能，見(jiàn)代碼CH102。具體步驟如下。（1）首先創(chuàng)建

23、一個(gè)新工程。創(chuàng)建過(guò)程和本書(shū)1.3.1節(jié)中的第（1）～（6）步相同，只是在第（3）步中，項(xiàng)目命名為Dialog且保存路徑為D:\Qt\CH1\CH102，在第（5）步中，取消“創(chuàng)建界面”復(fù)選框的選中狀態(tài)。,,,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,（2）在上述工程的dialog.h中添加如下加黑代碼：class Dialog : public QDialog{Q_OBJECTpublic:Dialog(QWidget *paren

24、t = 0); ~Dialog();private:QLabel *label1,*label2;QLineEdit *lineEdit;QPushButton *button;};此時(shí)要在文件最開(kāi)始加入頭文件：#include #include #include ,,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,（3）在dialog.cpp 中添加如下代碼：Dialog::Dialog(QWidget *parent)

25、 : QDialog(parent){ label1=new QLabel(this); label1->setText(tr("請(qǐng)輸入圓的半徑：")); lineEdit=new QLineEdit(this); label2=new QLabel(this); button=new QPushButton(this); button->setT

26、ext(tr("顯示對(duì)應(yīng)圓的面積")); QGridLayout *mainLayout=new QGridLayout(this); mainLayout->addWidget(label1,0,0); mainLayout->addWidget(lineEdit,0,1); mainLayout->addWidget(label2,1,0); mainLa

27、yout->addWidget(button,1,1);}其中，QGridLayout *mainLayout=new QGridLayout(this)用于布局管理器，將所有控件的位置固定。,,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,（4）在此文件一開(kāi)始添加頭文件：#include 運(yùn)行結(jié)果如圖1.25所示。,,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,方式1: 在LineEdit文本框內(nèi)輸入所需圓的半徑值，單擊“顯示對(duì)應(yīng)圓的面積”按鈕后

28、，在label2中顯示相對(duì)應(yīng)的圓的面積值。（1）打開(kāi)dialog.h文件，在類構(gòu)造函數(shù)和控件成員聲明后，添加如下加黑代碼：class Dialog : public QDialog{ ... ... QPushButton *button;private slots: void showArea(); };,,,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,（2）打開(kāi)dialog.cpp 文件，在構(gòu)造函數(shù)中添加如下

29、加黑代碼：Dialog::Dialog(QWidget *parent) : QDialog(parent){ ... ... mainLayout->addWidget(button,1,1); connect(button,SIGNAL(clicked()),this,SLOT(showArea()));}（3）在showArea()中實(shí)現(xiàn)顯示圓面積功能，代碼如下：void Dialo

30、g::showArea(){ bool ok; QString tempStr; QString valueStr=lineEdit->text(); int valueInt=valueStr.toInt(&ok); double area=valueInt*valueInt*PI; label2->setText(tempStr.setNum(area));},

31、,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,（4）在此文件開(kāi)始處添加全局變量：const static double PI=3.1416;（5）在LineEdit中輸入圓半徑值，單擊“顯示對(duì)應(yīng)圓的面積”按鈕后，在label2中顯示圓面積值，如圖1.26所示。,,1.3.2 代碼實(shí)現(xiàn)簡(jiǎn)單實(shí)例,方式2：在LineEdit文本框中輸入所需圓的半徑值后，不必單擊“顯示對(duì)應(yīng)圓的面積”按鈕，直接在label2中顯示圓的面積值。操作步驟和方式1相同，只是