QT開發(fā)與實踐Qt概述

1、第1章 QtQt概述1.1 1.1 什么是什么是QtQt1.2 Qt 51.2 Qt 5的安裝的安裝1.3 Qt 51.3 Qt 5開發(fā)步驟及實例開發(fā)步驟及實例1.1 1.1 什么是QtQtQt是一個跨平臺的C+圖形用戶界面應用程序框架。它為應用程序開發(fā)者提供建立藝術級圖形用戶界面所需的所有功能。Qt是諾基亞公司的一個產品。1996年，Qt進入商業(yè)領域，已成為全世界范圍內數(shù)千種成功的應用程序的基礎。它也是目前流行的Linux桌面環(huán)境KDE 的基礎，KDE是Linux發(fā)行版的主要一個標準組件。1.1 1.1 什么是QtQtQtQt支持的平臺有：支持的平臺有：MS/Windows95、98、NT

2、4.0、ME、2000、XP和Vista；UNIX/X11Linux、Sun Solaris、HP-UX、Compaq Tru64 UNIX、IBM AIX、SGI IRIX和其他很多X11平臺；MacintoshMac OS X；Embedded有幀緩沖（framebuffer）支持的Linux平臺、Windows CE；Symbian/S60目前已經(jīng)可以提供技術預覽版本。1.2 Qt 51.2 Qt 5的安裝的安裝1.2.1 1.2.1 下載下載Qt 5 CreatorQt 5 Creator下載地址：/downloads，下載頁面如圖1.1所示。1

3、.2.2 1.2.2 運行運行Qt 5 CreatorQt 5 Creator點擊運行Qt Creator，出現(xiàn)歡迎界面，如圖1.2所示。1.2.3 Qt 51.2.3 Qt 5開發(fā)環(huán)境開發(fā)環(huán)境GUI用戶界面設計（Qt Designer）界面如圖1.3所示。1.2.3 Qt 51.2.3 Qt 5開發(fā)環(huán)境開發(fā)環(huán)境進入Qt設計器主界面后，看到的中間部分（如圖1.4所示）就是將要設計的頂層窗口部件（頂層窗口部件是其他子窗口部件的載體）。1.3 Qt 51.3 Qt 5開發(fā)步驟及實例開發(fā)步驟及實例本實例要實現(xiàn)的功能是，當用戶輸入一個圓的半徑后，可以顯示計算后的圓的面積值。運行效果如圖1.5所示。1.

4、3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)1 1界面設計界面設計步驟如下。（1）單擊運行Qt Creator，進入歡迎界面如圖1.2所示。單擊“文件”“新建文件或項目.”命令，創(chuàng)建一個新的工程，如圖1.6所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（2）單擊選擇“Qt Gui 應用”，單擊“選擇”按鈕，進入下一步。這里因為需要建立一個Gui項目，所以選擇“Qt Gui 應用”，如圖1.7所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)

5、（3）選擇保存項目的路徑并定義自己項目的名字。項目命名沒有大小寫要求，依據(jù)個人習慣命名即可。這里將項目命名為Dialog，保存路徑為D:QtCH1CH101，如圖1.8所示。單擊“下一步”按鈕進入下一步驟。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（4）彈出“選擇構建套件”界面，系統(tǒng)默認已指定C+的編譯器和調試器，如圖1.9所示，直接單擊“下一步”按鈕進入下一步驟即可。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（5）根據(jù)實際需要，選擇一個“基類”。這里選擇QDialog對話框類作為基類，

6、這時“類名”、“頭文件”、“源文件”及“界面文件”都出現(xiàn)默認的文件名。默認選中“創(chuàng)建界面”復選框，表示需要采用自帶的界面設計器來設計界面，否則需要利用代碼完成界面的設計，如圖1.10所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（6）單擊“完成”按鈕完成創(chuàng)建，相應的文件自動加載到文件列表中，如圖1.11所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)單擊中間灰色一列工具欄中的過濾符號（ ）后，彈出一個下拉列表，使兩個項目都是被勾選后處于選中狀態(tài)（默認選項“簡化樹形視圖”沒選中，“隱藏生

7、成的文件”處于選中狀態(tài)），如圖1.12（a）所示。若單擊其中“簡化樹形視圖”項取消選中狀態(tài)，此時文件列表中的文件自動分類顯示，如圖1.12（b）所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（7）雙擊dialog.ui，進入界面設計器Qt Designer編輯狀態(tài)，開始進行設計器（Qt Designer）編程。拖曳控件容器欄的滑動條，在最后的Display Widgets容器欄（如圖1.13所示）中找到Label標簽控件，拖曳三個此控件到中間的編輯框中。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designe

8、r實現(xiàn)實現(xiàn)在Input Widgets容器欄（如圖1.14所示）中找到LineEdit文本控件，拖曳此控件到中間的編輯框中，用于輸入半徑值；1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)在Buttons容器欄（如圖1.15所示）中找到PushButton按鈕控件，拖曳此控件到中間的編輯框中，用于提交響應單擊事件。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)調整各控件的位置，單擊編輯框的空白處使編輯框處于被選中狀態(tài)，拖曳右下角的小方框，調整整個框架的大小，直至調整到適當大小為止，調整后的布局如圖

9、1.16所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)下面將修改拖曳到編輯框中的各控件的屬性，如圖1.17所示，各控件屬性見表1.1。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)修改控件修改控件TextText值的方法有如下兩種。值的方法有如下兩種。 直接雙擊控件本身即可修改。 在Qt Designer設計器的屬性欄中修改，如修改表示半徑的Label標簽，如圖1.18所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)最后，修改areaL

10、abel_2的“frameShape”為Panel；“frameShadow”為Sunken，如圖1.19所示。最終效果如圖1.20所示。 1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)下面單擊左下角的運行按鈕（ ）或者使用組合鍵【Ctrl+R】運行程序，這時系統(tǒng)提示是否保存，單擊“保存所有”按鈕，如圖1.21所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)2 2編寫相應的計算圓面積代碼編寫相應的計算圓面積代碼首先簡單認識一下Qt編程環(huán)境。找到文件列表中自動添加的main.cpp文件，如圖1

11、.12所示。每個工程都有一個執(zhí)行的入口函數(shù)，此文件中的main()函數(shù)就是此工程的入口。下面詳細介紹一下main()函數(shù)的相關內容：#include dialog.h#include int main(int argc, char *argv) QApplication a(argc, argv); Dialog w; w.show(); return a.exec();1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)方式方式1 1：在LineEdit文本框內輸入半徑值，然后單擊“計算”按鈕，則在areaLabel_2中顯示對應的圓面積。編寫代碼

12、步驟如下。（1）在“計算”按鈕上單擊鼠標右鍵，在彈出的下拉菜單中選擇“轉到槽.”命令，如圖1.22所示。在彈出的對話框中選擇“clicked()”信號，如圖1.23所示。 1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（2）進入dialog.cpp文件中按鈕單擊事件的槽函數(shù)on_countBtn_clicked()。信號與槽連接的具體說明參照本書后面提供的知識點鏈接部分。在此函數(shù)中添加如下代碼：void Dialog: on_countBtn_clicked() bool ok; QString tempStr; QString valueSt

13、r=ui-radiusLineEdit-text(); int valueInt=valueStr.toInt(&ok); double area=valueInt*valueInt*PI;/計算圓面積 ui-areaLabel_2-setText(tempStr.setNum(area);（3）在此文件開始處添加以下語句：const static double PI=3.1416;1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)方式方式2 2：在LineEdit內輸入半徑值，不需要單擊按鈕觸發(fā)單擊事件，直接就在areaLabel_2中顯

14、示圓面積。編寫代碼步驟如下。（1）在“LineEdit”編輯框上單擊鼠標右鍵，在彈出的下拉菜單中選擇“轉到槽.”菜單項，在彈出的對話框中選擇“textChanged(QString)”信號，如圖1.24所示。1.3.1 1.3.1 設計器設計器Qt 5 DesignerQt 5 Designer實現(xiàn)實現(xiàn)（2）單擊“確定”按鈕，進入dialog.cpp文件中的文本編輯框，改變值內容事件的槽函數(shù)on_radiusLineEdit_textChanged(const QString &arg1)。在此函數(shù)中添加如下代碼：void Dialog:on_radiusLineEdit_textCh

15、anged(const QString &arg1) 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);1.3.2 代碼實現(xiàn)（1）首先創(chuàng)建一個新工程。創(chuàng)建過程和本書1.3.1節(jié)中的第（1）步驟第（6）步驟相同，只是在第（3）步驟中，項目命名為Dialog且保存

16、路徑為D:QtCH1CH102，在第（5）步驟中，取消“創(chuàng)建界面”復選框的選中狀態(tài)。1.3.2 代碼實現(xiàn)（2）在上述工程的dialog.h中添加如下加黑代碼：class Dialog : public QDialogQ_OBJECTpublic:Dialog(QWidget *parent = 0); Dialog();private:private:QLabel QLabel * *label1,label1,* *label2;label2;QLineEdit QLineEdit * *lineEdit;lineEdit;QPushButton QPushButton * *button;

17、button;此時要在文件最開始加入頭文件：#include #include #include 1.3.2 代碼實現(xiàn)（3）在dialog.cpp 中添加如下代碼：Dialog:Dialog(QWidget *parent) : QDialog(parent) label1=new QLabel(this); label1-setText(tr(請輸入圓的半徑：); lineEdit=new QLineEdit(this); label2=new QLabel(this); button=new QPushButton(this); button-setText(tr(顯示對應圓的面積); Q

18、GridLayout *mainLayout=new QGridLayout(this); mainLayout-addWidget(label1,0,0); mainLayout-addWidget(lineEdit,0,1); mainLayout-addWidget(label2,1,0); mainLayout-addWidget(button,1,1);1.3.2 代碼實現(xiàn)（4）在此文件一開始添加頭文件：#include 運行程序結果如圖1.25所示。1.3.2 代碼實現(xiàn)方式方式1: 1: 在LineEdit文本框內輸入所需圓的半徑值，單擊“顯示對應圓的面積”按鈕后，在label2中

19、顯示相對應的圓的面積值。（1）打開dialog.h文件，在類構造函數(shù)和控件成員聲明后，添加如下代碼：class Dialog : public QDialog . . QPushButton *button;private slots:private slots: void showArea(); void showArea(); ;1.3.2 代碼實現(xiàn)（2）打開dialog.cpp 文件，在構造函數(shù)中添加如下加黑代碼：Dialog:Dialog(QWidget *parent) : QDialog(parent) . . mainLayout-addWidget(button,1,1); connect(button,SIGNAL(clicked(),this,SLOT(showArea(); connect(button,SIGNAL(clicked(),this,SLOT(showArea();1.3.2 代碼實現(xiàn)（3）在showArea()中實現(xiàn)顯示圓面積功能，