Qt用戶界面設(shè)計(jì).pptx

1、QtQt的作用Qt的特性及優(yōu)勢(shì)Qt的系統(tǒng)的架構(gòu)如何學(xué)習(xí)Qt1Qt簡(jiǎn)介 圖形用戶界面（Graphical User Interface）是指采用圖形方式顯示的計(jì)算機(jī)操作用戶界面對(duì)比：早期的操作系統(tǒng)，如DOS，CUI(Command line User Interface)命令行模式的人機(jī)接口組成部分：桌面、視窗、菜單、按鈕、圖標(biāo)等Qt是跨平臺(tái)的C+應(yīng)用程序和UI開(kāi)發(fā)的框架Qt4有超過(guò)500個(gè)類和9000多個(gè)函數(shù)，使用Qt可以迅速開(kāi)發(fā)出期望的應(yīng)用程序2Qt在整個(gè)產(chǎn)品開(kāi)發(fā)中的作用構(gòu)建桌面環(huán)境；為應(yīng)用程序提供可視化的、友好的界面；利用Qt類庫(kù)自帶的功能構(gòu)建復(fù)雜應(yīng)用程序；使用Qt構(gòu)建的產(chǎn)品： /qt-i

2、n-use3Qt的特性及優(yōu)勢(shì) 易于獲取，個(gè)人應(yīng)用完全免費(fèi)全面的、藝術(shù)級(jí)的應(yīng)用程序框架良好的跨平臺(tái)性，一勞永逸多語(yǔ)言的支持4包含Qt的系統(tǒng)的架構(gòu)5包含Qt的系統(tǒng)的架構(gòu)6學(xué)習(xí)Qt可用的資源 NO1: Qt參考文檔，包括類的簡(jiǎn)介、類相關(guān)函數(shù)的介紹、自帶例程的源碼及講解、函數(shù)的查找和使用、核心特性、關(guān)鍵技術(shù)等NO2: Qt中文論壇 NO3： C+GUI Programming with Qt4,Second Edition -官方參考文檔，講解精到7Qt學(xué)習(xí)方法NO1：學(xué)習(xí)Qt自帶教程，Qt的example及其參考代碼。參考qtdemo程序，學(xué)習(xí)demo完成自己的程序。NO2: 閱讀書籍，隨書進(jìn)行編程

3、練習(xí)。如C+GUI Qt4編程，提供有完善的代碼8Qt程序開(kāi)發(fā)QtCreator介紹Hello Qt!程序開(kāi)發(fā)流程幾個(gè)Qt練習(xí)9Qt Creator的設(shè)計(jì)目標(biāo)是使開(kāi)發(fā)人員能夠利用Qt 這個(gè)應(yīng) 用程序框架更加快速及輕易的完成開(kāi)發(fā)任務(wù)。Nokia 收購(gòu)Qt之后在Qt的工具上做了很大的工作,推出的 一款新的輕量級(jí)集成開(kāi)發(fā)環(huán)境(IDE), 即QtCreator。QtCreator IDE 能夠跨平臺(tái)運(yùn)行，支持的系統(tǒng)包括 Linux （32 位及 64 位）、Mac OS、Windows等。10功能介紹：項(xiàng)目生成向?qū)Ц呒?jí) C+ 代碼編輯器文件及類管理工具集成了Qt Designer集成了qmake 構(gòu)建

4、工具集成了圖形化的 GDB 調(diào)試前端11利用QtCreator開(kāi)發(fā)Qt應(yīng)用程序的基本流程：創(chuàng)建工程項(xiàng)工程中添加文件設(shè)計(jì)界面編寫代碼實(shí)現(xiàn)功能調(diào)試運(yùn)行12創(chuàng)建工程打開(kāi)QtCreator，“File-New File or Project”，選擇 “Qt4 Gui Application”13輸入工程名稱：如ex01_helloQt選擇工程路徑：如D:project14根據(jù)應(yīng)用選擇功能模塊，此工程保持默認(rèn)即可。15創(chuàng)建Qt4 Gui Application時(shí),向?qū)?huì)自動(dòng)生成一個(gè)新類，將來(lái)可在 該類中完成應(yīng)用程序的功能。此步設(shè)置該類名稱，選擇基類名稱，及設(shè)置該類代碼的文件名稱另外，設(shè)置是否要生成UI文

5、件，如果生成則，將來(lái)可以在UI文件 中來(lái)繪制界面。16最后一步“Finish”即可完成工程創(chuàng)建17在工程管理窗口中雙擊Forms下的mywidget.ui(UI文件)，即可打開(kāi)Qt Designer(Qt界面設(shè)計(jì)器)在Designer中設(shè)計(jì)界面18編譯運(yùn)行程序：在工程名上右鍵，選擇Run19運(yùn)行效果：20練習(xí)1：隱藏“HelloQt!” 設(shè)計(jì)兩個(gè)按鈕和一個(gè)Label,當(dāng)點(diǎn)擊“show”按鈕時(shí)顯示“HelloQt!”,點(diǎn)擊“Hide”按鈕時(shí)隱藏“HelloQt!”。21按照Hellot方法創(chuàng)建工程，并繪制界面。22添加功能：t使用信號(hào)和槽機(jī)制可以很容易的實(shí)現(xiàn)對(duì)象之間的通信，當(dāng)某些 事件發(fā)生時(shí)，對(duì)

6、應(yīng)的信號(hào)會(huì)被發(fā)送?？梢詫⒁粋€(gè)對(duì)象的信號(hào)和其他對(duì)象的槽相連，這樣，當(dāng)信號(hào)發(fā)送 是，和他相連的槽函數(shù)即可被調(diào)用。23編輯信號(hào)和槽：Edit-Edit signal/slots (F4)編輯對(duì)象：Edit-Edit idgets (F3)F4之后，左鍵拖動(dòng)“Show”到“HelloQT”上，釋放鼠標(biāo)，會(huì)彈出信 號(hào)和槽對(duì)話框24選擇連接clicked()信號(hào)和show()槽25同樣的方法連接“Hide”的clicked()信號(hào)和“HelloQt”的show()槽 連接好后如下圖示如果要編輯部件，按F3回到部件編輯狀態(tài)即可最后編譯運(yùn)行程序，觀察現(xiàn)象26練習(xí)：控制LCDNumber顯示 通過(guò)slider(

7、滑塊)和dial(旋鈕)控制 LCDNumber上顯示的數(shù)字27Qt Creator編譯的程序，在其工程文件夾下會(huì)有一個(gè)debug文件夾，其中有程序的.exe可執(zhí)行文件。但Qt Creator默認(rèn)是用動(dòng)態(tài)鏈接的，就是可執(zhí)行程序在運(yùn)行時(shí)需要相應(yīng)的.dll文件。我們點(diǎn)擊生成的.exe文件，首先可能顯示“沒(méi)有找到mingwm10.dll，因此這個(gè)應(yīng)用程序未能啟動(dòng)。重新安裝應(yīng)用程序可能會(huì)修復(fù)此問(wèn)題。”表示缺少mingwm10.dll文件。28解決這個(gè)問(wèn)題我們可以將相應(yīng)的.dll文件放到系統(tǒng)中。在Qt Creator的安裝目錄的qt文件下的bin文件夾下（比如安裝在了D盤，所以路徑是D:Qt2009.0

8、4qtbin），可以找到所有的相關(guān).dll文件。方法一：在這里找到mingwm10.dll文件，將其復(fù)制到C:WINDOWSsystem文件夾下即可。下面再提示缺少什么dll文件，都像這樣解決就可以了。 方法二：將這些dll文件都與.exe文件放到同一個(gè)文件夾下。不過(guò)這樣每個(gè).exe文件都要放一次。方法三：將D:Qt2009.04qtbin加入系統(tǒng)Path環(huán)境變量。右擊我的電腦-屬性-高級(jí)-環(huán)境變量-在系統(tǒng)變量列表中找到Path,將路徑加入其中即可。 29用純?cè)创a編寫:1.新建空的Qt工程。 302.工程名為hello world，并選擇工程保存路徑 313.在新建好的工程中添加文件。右擊工程

9、文件夾，彈出的菜單中選擇Add New。324.選擇普通文件。點(diǎn)擊Ok335.文件名為main.cpp，點(diǎn)擊Next進(jìn)入下一步。346.這里自動(dòng)將這個(gè)文件添加到了新建的工程中。保持默認(rèn)設(shè)置，點(diǎn)擊完成。357.在main.cpp文件中添加代碼。368.這時(shí)點(diǎn)擊運(yùn)行，程序執(zhí)行了，但看不到效果，因?yàn)槌绦蚶锸裁匆矝](méi)做。我們點(diǎn)擊信息框右上角的紅色方塊，停止程序運(yùn)行。 379.我們?cè)俑拇a。添加一個(gè)對(duì)話框?qū)ο蟆?810.運(yùn)行效果如下。3911.我們更改代碼如下，在對(duì)話框上添加一個(gè)標(biāo)簽對(duì)象，并顯示hello world。4012.運(yùn)行效果如下。41二、Qt Creator編寫多窗口程序?qū)崿F(xiàn)功能： 程序開(kāi)始

10、出現(xiàn)一個(gè)對(duì)話框，按下按鈕后便能進(jìn)入主窗口，如果直接關(guān)閉這個(gè)對(duì)話框，便不能進(jìn)入主窗口，整個(gè)程序也將退出。當(dāng)進(jìn)入主窗口后，我們按下按鈕，會(huì)彈出一個(gè)對(duì)話框，無(wú)論如何關(guān)閉這個(gè)對(duì)話框，都會(huì)回到主窗口。實(shí)現(xiàn)原理： 程序里我們先建立一個(gè)主工程，作為主界面，然后再建立一個(gè)對(duì)話框類，將其加入工程中，然后在程序中調(diào)用自己新建的對(duì)話框類來(lái)實(shí)現(xiàn)多窗口。42實(shí)現(xiàn)過(guò)程：1.首先新建Qt4 Gui Application工程，工程名為nGui，Base class選為QWidget。建立好后工程文件列表如下圖。432.新建對(duì)話框類，如下圖，在新建中，選擇Qt Designer Form Class。 443.選擇Dialo

11、g without Buttons。 454.類名設(shè)為myDlg。465.點(diǎn)擊Finish完成。注意這里已經(jīng)默認(rèn)將其加入到了我們剛建的工程中了。 476.如下圖，在mydlg.ui中拖入一個(gè)Push Button，將其上的文本改為“進(jìn)入主窗口”，在其屬性窗口中將其objectName改為enterBtn(Push Button名字)，在下面的Signals and slots editor中進(jìn)行信號(hào)和槽的關(guān)聯(lián)，其中，Sender設(shè)為enterBtn，Signal設(shè)為clicked()，Receive設(shè)為myDlg，Slot設(shè)為accept()。這樣就實(shí)現(xiàn)了單擊這個(gè)按鈕使這個(gè)對(duì)話框關(guān)閉并發(fā)出Ac

12、cepted信號(hào)的功能。下面我們將利用這個(gè)信號(hào)。 487.修改主函數(shù)main.cpp，如下：#include #include “widget.h”#include “mydlg.h” /加入頭文件int main(int argc, char *argv) QApplication a(argc, argv); Widget w; myDlg my1; /建立自己新建的類的對(duì)象my1 if(my1.exec()=QDialog:Accepted) /利用Accepted信號(hào)判斷enterBtn是否被按下 w.show(); /如果被按下，顯示主窗口 return a.exec(); /程序一

13、直執(zhí)行，直到主窗口關(guān)閉 else return 0; /如果沒(méi)被按下，則不會(huì)進(jìn)入主窗口，整個(gè)程序結(jié)束運(yùn)行主函數(shù)必須這么寫，才能完成所要的功能。49到這里，我們就實(shí)現(xiàn)了一個(gè)界面結(jié)束執(zhí)行，然后彈出另一個(gè)界面的程序。下面我們?cè)谥鞔翱谏霞右粋€(gè)按鈕，按下該按鈕，彈出一個(gè)對(duì)話框，但這個(gè)對(duì)話框關(guān)閉，不會(huì)使主窗口關(guān)閉。8.如下圖，在主窗口加入按鈕，顯示文本為“彈出一個(gè)對(duì)話框”，在其上點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇go to slot。509.我們選擇單擊事件clicked()。5110.我們?cè)趶棾龅牟酆瘮?shù)中添加一句： my2.show(); my2為我們新建對(duì)話框類的另一個(gè)對(duì)象，但是my2我們還沒(méi)有定義，所

14、以在widget.h文件中添加相應(yīng)代碼，如下，先加入頭文件，再加入my2的定義語(yǔ)句，這里我們將其放到private里，因?yàn)橐话愕暮瘮?shù)都放在public里，而變量都放在private里。52#ifndef WIDGET_H#define WIDGET_H#include #include “mydlg.h” /包含頭文件namespace Uiclass Widget;class Widget : public QWidgetQ_OBJECTpublic:Widget(QWidget *parent = 0);Widget();private:Ui:Widget *ui;myDlg my2; /

15、對(duì)my2進(jìn)行定義private slots:void on_pushButton_clicked();#endif / WIDGET_H53到這里，再運(yùn)行程序，便能完成我們實(shí)驗(yàn)要求的功能了。整個(gè)程序里，我們用兩種方法實(shí)現(xiàn)了信號(hào)和槽函數(shù)的關(guān)聯(lián)，第一個(gè)按鈕我們直接在設(shè)計(jì)器中實(shí)現(xiàn)其關(guān)聯(lián)；第二個(gè)按鈕我們自己寫了槽函數(shù)語(yǔ)句，其實(shí)圖形的設(shè)計(jì)與直接寫代碼效果是一樣的。54三、Qt Creator登錄對(duì)話框?qū)崿F(xiàn)功能：在彈出對(duì)話框中填寫用戶名和密碼，按下登錄按鈕，如果用戶名和密碼均正確則進(jìn)入主窗口，如果有錯(cuò)則彈出警告對(duì)話框。實(shí)現(xiàn)原理：通過(guò)上節(jié)的多窗口原理實(shí)現(xiàn)由登錄對(duì)話框進(jìn)入主窗口，而用戶名和密碼可以用if語(yǔ)句進(jìn)

16、行判斷。55實(shí)現(xiàn)過(guò)程：1.先新建Qt4 Gui Application工程，工程名為mainWidget，選用QWidget作為Base class，這樣便建立了主窗口。文件列表如下：562.然后新建一個(gè)Qt Designer Form Class類，類名為loginDlg，選用Dialog without Buttons，將其加入上面的工程中。文件列表如下：573.在logindlg.ui中設(shè)計(jì)下面的界面：行輸入框?yàn)長(zhǎng)ine Edit。其中用戶名后面的輸入框在屬性中設(shè)置其object Name為usrLineEdit，密碼后面的輸入框?yàn)閜wdLineEdit，登錄按鈕為loginBtn，退出

17、按鈕為exitBtn。584.將exitBtn的單擊后效果設(shè)為退出程序，關(guān)聯(lián)如下：595.右擊登錄按鈕選擇go to slot，再選擇clicked(),然后進(jìn)入其單擊事件的槽函數(shù)，寫入一句 void loginDlg:on_loginBtn_clicked() accept();606.改寫main.cpp：#include #include “widget.h”#include “l(fā)ogindlg.h”int main(int argc, char *argv) QApplication a(argc, argv); Widget w; loginDlg login; if(login.e

18、xec()=QDialog:Accepted) w.show(); return a.exec(); else return 0;617.這時(shí)執(zhí)行程序，可實(shí)現(xiàn)按下登錄按鈕進(jìn)入主窗口，按下退出按鈕退出程序。8.添加用戶名密碼判斷功能。將登陸按鈕的槽函數(shù)改為：void loginDlg:on_loginBtn_clicked()if (ui-usrLineEdit-text()=tr(“qt”)&ui-pwdLineEdit-text()=tr(“123456)/判斷用戶名和密碼是否正確accept();elseQMessageBox:warning(this,tr(“Warning”),tr(“

19、user name or password error!”),QMessageBox:Yes);/如果不正確，彈出警告對(duì)話框并在logindlg.cpp中加入#include 的頭文件。如果不加這個(gè)頭文件，QMessageBox類不可用。629.這時(shí)再執(zhí)行程序，輸入用戶名為qt，密碼為123456，按登錄按鈕便能進(jìn)入主窗口了，如果輸入錯(cuò)了，就會(huì)彈出警告對(duì)話框。63如果輸入錯(cuò)誤，便會(huì)彈出警告提示框：6410.在logindlg.cpp的loginDlg類構(gòu)造函數(shù)里，添上初始化語(yǔ)句，使密碼顯示為小黑點(diǎn)。loginDlg:loginDlg(QWidget *parent) :QDialog(pare

20、nt),ui(new Ui:loginDlg)ui-setupUi(this);ui- pwdLineEdit- setEchoMode(QLineEdit:Password);65效果如下：6611.如果輸入如下圖中的用戶名，在用戶名前不小心加上了一些空格，結(jié)果程序按錯(cuò)誤的用戶名對(duì)待了。67我們可以更改if判斷語(yǔ)句，使這樣的輸入也算正確。void loginDlg:on_loginBtn_clicked()if(ui-usrLineEdit-text().trimmed()=tr(“qt”)&ui-pwdLineEdit-text()=tr(“123456)accept();elseQMes

21、sageBox:warning(this,tr(“Warning”),tr(“user name or password error!”),QMessageBox:Yes);加入的這個(gè)函數(shù)的作用就是移除字符串開(kāi)頭和結(jié)尾的空白字符。6812.最后，如果輸入錯(cuò)誤了，重新回到登錄對(duì)話框時(shí)，我們希望可以使用戶名和密碼框清空并且光標(biāo)自動(dòng)跳轉(zhuǎn)到用戶名輸入框，最終的登錄按鈕的單擊事件的槽函數(shù)如下：void loginDlg:on_loginBtn_clicked()if(ui-usrLineEdit-text().trimmed()=tr(“qt”)&ui-pwdLineEdit-text()=tr(“12

22、3456)/判斷用戶名和密碼是否正確accept();elseQMessageBox:warning(this,tr(“Warning”),tr(“user name or password error!”),QMessageBox:Yes);/如果不正確，彈出警告對(duì)話框ui-usrLineEdit-clear();/清空用戶名輸入框ui-pwdLineEdit-clear();/清空密碼輸入框ui-usrLineEdit-setFocus();/將光標(biāo)轉(zhuǎn)到用戶名輸入框69最終的loginDlg.cpp文件如下圖：70四、Qt Creator添加菜單圖標(biāo)1.新建Qt4 Gui Applicat

23、ion工程，將工程命名為MainWindow，其他選項(xiàng)默認(rèn)即可。生成的窗口界面如下圖。其中最上面的為菜單欄。712.我們?cè)赥ype Here那里雙擊，并輸入“文件(&F)”，這樣便可將其文件菜單的快捷鍵設(shè)為Alt+F。（注意括號(hào)最好用英文半角輸入，這樣看著美觀）723.輸入完按下Enter鍵確認(rèn)即可，然后在子菜單中加入“新建(&N)”，確定后，效果如下圖。 734.我們?cè)谙旅娴膭?dòng)作編輯窗口可以看到新加的“新建”菜單。745.雙擊這一條，可打開(kāi)它的編輯對(duì)話框。我們看到Icon項(xiàng)，這里可以更改“新建”菜單的圖標(biāo)。756.我們點(diǎn)擊后面的號(hào)，進(jìn)入資源選擇器，但現(xiàn)在這里面是空的。所以下面我們需要給該工程

24、添加外部資源。767.添加資源有兩種方法。一種是直接添加系統(tǒng)提供的資源文件，然后選擇所需圖標(biāo)。另一種是自己寫資源文件。我們主要介紹第一種。新建Qt Resources file，將它命名為menu。其他默認(rèn)。778.添加完后如下圖?？梢钥吹教砑拥奈募閙enu.qrc。 789.我們最好先在工程文件夾里新建一個(gè)文件夾，如images，然后將需要的圖標(biāo)文件放到其中。 7910.在Qt Creator的menu.qrc文件中，我們點(diǎn)擊Add下拉框，選擇Add Prefix。我們可以將生成的/new/prefix前綴改為其他名字，如/File。 8011.然后再選擇Add下拉框，選擇Add File

25、s。再?gòu)棾龅膶?duì)話框中，我們到新建的images文件夾下，將里面的圖標(biāo)文件全部添加過(guò)來(lái)。 8112.添加完成后，我們?cè)赒t Creator的File菜單里選擇Save All選項(xiàng)，保存所做的更改。（注意：一定要先保存剛才的qrc文件，不然在資源管理器中可能看不見(jiàn)自己添加的資源！）8213.這時(shí)再打開(kāi)資源選擇器，可以看到我們的圖標(biāo)都在這里了。(注意：如果不顯示，可以按一下上面的Reload按鈕)8314.我們將new.png作為“新建”菜單的圖標(biāo)，然后點(diǎn)擊Shortcut，并按下Crtl+N，便能將Crtl+N作為“新建”菜單的快捷鍵。 8415.這時(shí)打開(kāi)文件菜單，可以看到“新建”菜單已經(jīng)有圖標(biāo)了

26、。 85運(yùn)行程序后效果如下。 8616.我們?cè)诠こ涛募A下查看建立的menu.qrc文件，可以用寫字板將它打開(kāi)。 87其具體內(nèi)容如下。88第二種添加資源文件的方法。 1.首先右擊工程文件夾，在彈出的菜單中選擇Add New，添加新文件。也可以用File中的添加新文件。892.我們選擇文本文件。903.將文件名設(shè)置為menu.qrc。 914.添加好文件后將其內(nèi)容修改如下?？梢钥吹骄褪怯玫谝环N方法生成的menu.qrc文件的內(nèi)容。 5.保存文件后，在資源管理器中可以看到添加的圖標(biāo)文件。 92五、Qt Creator布局管理器的使用首先對(duì)菜單進(jìn)行完善。1.我們?cè)谏弦淮蔚幕A(chǔ)上再加入一些常用菜單。“

27、文件”的子菜單如下圖。中間的分割線可以點(diǎn)擊Add Separator添加。93“編輯”子菜單的內(nèi)容如下。94“幫助”子菜單的內(nèi)容如下。 952.我們?cè)趧?dòng)作編輯器中對(duì)各個(gè)菜單的屬性進(jìn)行設(shè)置。963.我們拖動(dòng)“新建”菜單的圖標(biāo)，將其放到工具欄里。拖動(dòng)“新建”菜單的圖標(biāo)。97將其放到菜單欄下面的工具欄里。984.我們?cè)偬砑悠渌麕讉€(gè)圖標(biāo)。使用Append Separator可以添加分割線。 5. 如果需要?jiǎng)h除圖標(biāo)，可以在圖標(biāo)上點(diǎn)擊右鍵選擇Remove action即可。 99布局管理器。（這里主要以垂直布局管理器進(jìn)行講解，其他類型管理器用法與之相同，其效果可自己驗(yàn)證。）1.在左邊的器件欄里拖入三個(gè)Pu

28、shButton和一個(gè)Vertical Layout（垂直布局管理器）到中心面板。如下圖。1002.將這三個(gè)按鈕放入垂直布局管理器，效果如下?？梢钥吹桨粹o垂直方向排列，并且寬度可以改變，但高度沒(méi)有改變。1013.我們將布局管理器整體選中，按下上面工具欄的Break Layout按鈕，便可取消布局管理器。（我們當(dāng)然也可以先將按鈕移出，再按下Delete鍵將布局管理器刪除。）1024.下面我們改用分裂器部件（QSplitter）。先將三個(gè)按鈕同時(shí)選中，再按下上面工具欄的Lay Out Vertically in Splitter（垂直分裂器）。103效果如下圖?？梢钥吹桨粹o的大小可以隨之改動(dòng)。這也

29、就是分裂器和布局管理器的分別。 1045.其實(shí)布局管理器不但能控制器件的布局，還有個(gè)很重要的用途是，它能使器件的大小隨著窗口大小的改變而改變。我們先在主窗口的中心拖入一個(gè)文本編輯器Text Edit。105這時(shí)直接運(yùn)行程序，效果如下?？梢钥吹剿拇笮『臀恢貌粫?huì)隨著窗口改變。 106下面我們選中主窗口部件，然后在空白處點(diǎn)擊鼠標(biāo)右鍵，選擇Layout-Lay Out in a Grid，使整個(gè)主窗口的中心區(qū)處于網(wǎng)格布局管理器中。 107可以看到，這時(shí)文本編輯器已經(jīng)占據(jù)了整個(gè)主窗口的中心區(qū)。 108運(yùn)行一下程序，可以看到無(wú)論怎樣拉伸窗口，文本編輯框的大小都會(huì)隨之改變。 109六、Qt Creator

30、實(shí)現(xiàn)文本編輯在開(kāi)始正式寫程序之前，我們先要考慮一下整個(gè)流程。因?yàn)槲覀円獙懹浭卤疽粯拥能浖宰詈孟却蜷_(kāi)windows中的記事本，進(jìn)行一些簡(jiǎn)單的操作，然后考慮怎樣去實(shí)現(xiàn)這些功能。再者，再?gòu)?qiáng)大的軟件，它的功能也是一個(gè)一個(gè)加上去的，不要設(shè)想一下子寫出所有的功能。我們這里先實(shí)現(xiàn)新建文件，保存文件，和文件另存為三個(gè)功能，是因?yàn)樗鼈兟?lián)系很緊，而且這三個(gè)功能總的代碼量也不是很大。因?yàn)槿齻€(gè)功能之間的關(guān)系并不復(fù)雜，所以我們這里便不再畫流程圖，而只是簡(jiǎn)單描述一下。新建文件，那么如果有正在編輯的文件，是否需要保存呢？如果需要進(jìn)行保存，那這個(gè)文件以前保存過(guò)嗎？如果沒(méi)有保存過(guò)，就應(yīng)該先將其另存為。110下面開(kāi)始按這些

31、關(guān)系寫程序。1.打開(kāi)Qt Creator，在File菜單中選擇Open，然后在工程文件夾中打開(kāi)MainW工程文件。先在main.cpp文件中加入以下語(yǔ)句，讓程序中可以使用中文。在其中加入#include 頭文件包含，再在主函數(shù)中加入下面一行：QTextCodec:setCodecForTr(QTextCodec:codecForLocale();這樣在程序中使用中文，便能在運(yùn)行時(shí)顯示出來(lái)了。更改后文件如下圖。 1112.在mainwindow.h文件中的private下加入以下語(yǔ)句。bool isSaved; /為true時(shí)標(biāo)志文件已經(jīng)保存，為false時(shí)標(biāo)志文件尚未保存QString cur

32、File; /保存當(dāng)前文件的文件名void do_file_New(); /新建文件void do_file_SaveOrNot(); /修改過(guò)的文件是否保存void do_file_Save(); /保存文件void do_file_SaveAs(); /文件另存為bool saveFile(const QString& fileName); /存儲(chǔ)文件 這些是變量和函數(shù)的聲明。其中isSaved變量起到標(biāo)志的作用，用它來(lái)標(biāo)志文件是否被保存過(guò)。然后我們?cè)僭谙鄳?yīng)的源文件里進(jìn)行這些函數(shù)的定義。1123.在mainwindow.cpp中先加入頭文件#include ，然后在構(gòu)造函數(shù)里添加以下幾行代

33、碼。isSaved = false; /初始化文件為未保存過(guò)狀態(tài)curFile = tr(“未命名.txt”); /初始化文件名為“未命名.txt”setWindowTitle(curFile); /初始化主窗口的標(biāo)題這是對(duì)主窗口進(jìn)行初始化。效果如下。1134.然后添加“新建”操作的函數(shù)定義。void MainWindow:do_file_New() /實(shí)現(xiàn)新建文件的功能do_file_SaveOrNot();isSaved = false;curFile = tr(“未命名.txt”);setWindowTitle(curFile);ui-textEdit-clear(); /清空文本編輯器

34、ui-textEdit-setVisible(true); /文本編輯器可見(jiàn)新建文件，先要判斷正在編輯的文件是否需要保存。然后將新建的文件標(biāo)志為未保存過(guò)狀態(tài)。1145.再添加do_file_SaveOrNot函數(shù)的定義。void MainWindow:do_file_SaveOrNot() /彈出是否保存文件對(duì) 話框if(ui-textEdit-document()-isModified() /如果文件被更 改過(guò)，彈出保存對(duì)話框QMessageBox box;box.setWindowTitle(tr(“警告”);box.setIcon(QMessageBox:Warning);box.set

35、Text(curFile + tr(”尚未保存，是否保存？”);box.setStandardButtons(QMessageBox:Yes | QMessageBox:No);if(box.exec() = QMessageBox:Yes) /如果選擇保存文件，則 執(zhí)行保存操作do_file_Save();115這個(gè)函數(shù)實(shí)現(xiàn)彈出一個(gè)對(duì)話框，詢問(wèn)是否保存正在編輯的文件。 1166.再添加“保存”操作的函數(shù)定義。void MainWindow:do_file_Save() /保存文件if(isSaved) /如果文件已經(jīng)被保存過(guò)，直接保存文件saveFile(curFile);else do_f

36、ile_SaveAs(); /如果文件是第一次保存，那么調(diào)用另存 為對(duì)文件進(jìn)行保存時(shí)，先判斷其是否已經(jīng)被保存過(guò)，如果沒(méi)有被保存過(guò)，就要先對(duì)其進(jìn)行另存為操作。1177.下面是“另存為”操作的函數(shù)定義。void MainWindow:do_file_SaveAs() /文件另存為QString fileName = QFileDialog:getSaveFileName(this,tr(“另存為”),curFile);/獲得文件名if(!fileName.isEmpty() /如果文件名不為空，則保存文件內(nèi)容 saveFile(fileName);118這里彈出一個(gè)文件對(duì)話框，顯示文件另存為的路徑

37、。1198.下面是實(shí)際文件存儲(chǔ)操作的函數(shù)定義。bool MainWindow:saveFile(const QString& fileName) /保存文件內(nèi)容，因?yàn)榭赡鼙４媸。跃哂蟹祷刂?，?lái)表明是否保存成功 QFile file(fileName); if(!file.open(QFile:WriteOnly | QFile:Text) /以只寫方式打開(kāi)文件，如果打開(kāi)失敗則彈出提示框并返回 QMessageBox:warning(this,tr(“保存文件”), tr(“無(wú)法保存文件 %1:n %2).arg(fileName).arg(file.errorString(); retu

38、rn false; /%1,%2表示后面的兩個(gè)arg參數(shù)的值 QTextStream out(&file); /新建流對(duì)象，指向選定的文件 out textEdit-toPlainText(); /將文本編輯器里的內(nèi)容以純文本的形 式輸出到流對(duì)象中 isSaved = true; curFile = QFileInfo(fileName).canonicalFilePath(); /獲得文件的標(biāo)準(zhǔn)路徑 setWindowTitle(curFile); /將窗口名稱改為現(xiàn)在窗口的路徑 return true;120這個(gè)函數(shù)實(shí)現(xiàn)將文本文件進(jìn)行存儲(chǔ)。下面我們對(duì)其中的一些代碼進(jìn)行講解。QFile fi

39、le(fileName);一句，定義了一個(gè)QFile類的對(duì)象file，其中filename表明這個(gè)文件就是我們保存的的文件。然后我們就可以用file代替這個(gè)文件，來(lái)進(jìn)行一些操作。Qt中文件的操作和C，C+很相似。對(duì)于QFile類對(duì)象怎么使用，我們可以查看幫助。點(diǎn)擊Qt Creator最左側(cè)的Help，在其中輸入QFile，在搜索到的列表中選擇QFile即可。這時(shí)在右側(cè)會(huì)顯示出QFile類中所有相關(guān)信息以及他們的用法和說(shuō)明。121122我們往下拉，會(huì)發(fā)現(xiàn)下面有關(guān)于怎么讀取文件的示例代碼。 123再往下便能看到用QTextStream類對(duì)象，進(jìn)行字符串輸入的例子。下面也提到了QFileInfo和Q

40、Dir等相關(guān)的類，我們可以點(diǎn)擊它們?nèi)タ匆幌戮唧w的使用說(shuō)明。124上面只是做了一個(gè)簡(jiǎn)單的說(shuō)明。以后我們對(duì)自己不明白的類都可以去幫助里進(jìn)行查找，這也許是我們以后要做的最多的一件事了。對(duì)于其中的英文解釋，我們最好想辦法弄明白它的大意，其實(shí)網(wǎng)上也有一些中文的翻譯，但最好還是從一開(kāi)始就嘗試著看英文原版的幫助，這樣以后才不會(huì)對(duì)中文翻譯產(chǎn)生依賴。1259.雙擊mainwindow.ui文件，在圖形界面窗口下面的Action Editor動(dòng)作編輯器里，我們右擊“新建”菜單一條，選擇Go to slot，然后選擇triggered（），進(jìn)入其觸發(fā)事件槽函數(shù)。 126同理，進(jìn)入其他兩個(gè)菜單的槽函數(shù)，將相應(yīng)的操作的

41、函數(shù)寫入槽函數(shù)中。如下。void MainWindow:on_action_New_triggered() /信號(hào)和槽的關(guān)聯(lián) do_file_New();void MainWindow:on_action_Save_triggered() do_file_Save();void MainWindow:on_action_SaveAs_triggered() do_file_SaveAs();127最終的mainwindow.cpp文件如下。128129130最終的mainwindow.h文件如下。這時(shí)點(diǎn)擊運(yùn)行，就能夠?qū)崿F(xiàn)新建文件，保存文件，文件另存為的功能了。 131實(shí)現(xiàn)打開(kāi)，關(guān)閉，退出，撤銷

42、，復(fù)制，剪切，粘貼的功能。先備份上次的工程文件，然后再將其打開(kāi)。1.先在mainwindow.h文件中加入函數(shù)的聲明。void do_file_Open(); /打開(kāi)文件bool do_file_Load(const QString& fileName); /讀取文件1322.再在mainwindow.cpp文件中寫函數(shù)的功能實(shí)現(xiàn)。void MainWindow:do_file_Open()/打開(kāi)文件 do_file_SaveOrNot();/是否需要保存現(xiàn)有文件 QString fileName = QFileDialog:getOpenFileName(this); /獲得要打開(kāi)的文件的名

43、字 if(!fileName.isEmpty()/如果文件名不為空 do_file_Load(fileName); ui-textEdit-setVisible(true);/文本編輯器可見(jiàn)133134bool MainWindow:do_file_Load(const QString& fileName) /讀取文件 QFile file(fileName); if(!file.open(QFile:ReadOnly | QFile:Text) QMessageBox:warning(this,tr(“讀取文件”),tr(“無(wú)法讀取 文件 %1:n%2.”).arg(fileName).ar

44、g(file.errorString(); return false;/如果打開(kāi)文件失敗，彈出對(duì)話框，并返回 QTextStream in(&file); ui-textEdit-setText(in.readAll();/將文件中的所有內(nèi)容都寫到 文本編輯器中 curFile = QFileInfo(fileName).canonicalFilePath(); setWindowTitle(curFile); return true;135上面的打開(kāi)文件函數(shù)與文件另存為函數(shù)相似，讀取文件的函數(shù)與文件存儲(chǔ)函數(shù)相似。1363.然后按順序加入更菜單的關(guān)聯(lián)函數(shù)，如下。void MainWindow:

45、on_action_Open_triggered() /打開(kāi)操作 do_file_Open(); /void MainWindow:on_action_Close_triggered() /關(guān)閉操作 do_file_SaveOrNot(); ui-textEdit-setVisible(false);/void MainWindow:on_action_Quit_triggered() /退出操作 on_action_Close_triggered(); /先執(zhí)行關(guān)閉操作 qApp-quit(); /再退出系統(tǒng)，qApp是指向應(yīng)用程序的全局指針/137void MainWindow:on_ac

46、tion_Undo_triggered() /撤銷操作 ui-textEdit-undo();/void MainWindow:on_action_Cut_triggered() /剪切操作 ui-textEdit-cut();/void MainWindow:on_action_Copy_triggered() /復(fù)制操作 ui-textEdit-copy();/void MainWindow:on_action_Past_triggered() /粘貼操作 ui-textEdit-paste();138139因?yàn)閺?fù)制，撤銷，全選，粘貼，剪切等功能，是TextEdit默認(rèn)就有的，所以我們只需

47、調(diào)用一下相應(yīng)函數(shù)就行。到這里，除了查找和幫助兩個(gè)菜單的功能沒(méi)有加上以外，其他功能都已經(jīng)實(shí)現(xiàn)了。140七、Qt Creator實(shí)現(xiàn)文本查找以前都用設(shè)計(jì)器設(shè)計(jì)界面，而這次我們用代碼實(shí)現(xiàn)一個(gè)簡(jiǎn)單的查找對(duì)話框。對(duì)于怎么實(shí)現(xiàn)查找功能的，我們?cè)敿?xì)地分步說(shuō)明了怎么進(jìn)行類中方法的查找和使用。其中也將Qt Creator智能化的代碼補(bǔ)全功能和程序中函數(shù)的聲明位置和定義位置間的快速切換進(jìn)行了介紹。1.首先還是保存以前的工程，然后再將其打開(kāi)。我們發(fā)現(xiàn)Qt Creator默認(rèn)的字體有點(diǎn)小，可以按下Ctrl鍵的同時(shí)按兩下+鍵，來(lái)放大字體。也可以選擇Edit-Advanced-Increase Font Size。141

48、2.在mainwindow.h中加入#include 的頭文件包含，在private中添加QLineEdit *find_textLineEdit; /聲明一個(gè)行編輯器，用于輸入要查找的內(nèi)容在private slots中添加void show_findText();在該函數(shù)中實(shí)現(xiàn)查找字符串的功能。1423.我們進(jìn)入查找菜單的觸發(fā)事件槽函數(shù)，更改如下。void MainWindow:on_action_Find_triggered()QDialog *findDlg = new QDialog(this);/新建一個(gè)對(duì)話框，用于查找操作，this表明它的父窗口是MainWindow。findDl

49、g-setWindowTitle(tr(“查找”);/設(shè)置對(duì)話框的標(biāo)題find_textLineEdit = new QLineEdit(findDlg);/將行編輯器加入到新建的查找對(duì)話框中QPushButton *find_Btn = new QPushButton(tr(“查找下一個(gè)”),findDlg);/加入一個(gè)“查找下一個(gè)”的按鈕QVBoxLayout* layout = new QVBoxLayout(findDlg);layout-addWidget(find_textLineEdit);layout-addWidget(find_Btn);/新建一個(gè)垂直布局管理器，并將行編輯

50、器和按鈕加入其中findDlg -show();/顯示對(duì)話框connect(find_Btn,SIGNAL(clicked(),this,SLOT(show_findText();/設(shè)置“查找下一個(gè)”按鈕的單擊事件和其槽函數(shù)的關(guān)聯(lián)1434.這里我們直接用代碼生成了一個(gè)對(duì)話框，其中一個(gè)行編輯器可以輸入要查找的字符，一個(gè)按鈕可以進(jìn)行查找操作。我們將這兩個(gè)部件放到了一個(gè)垂直布局管理器中。然后顯示這個(gè)對(duì)話框。并設(shè)置了那個(gè)按鈕單擊事件與show_findText()函數(shù)的關(guān)聯(lián)。1445.下面我們開(kāi)始寫實(shí)現(xiàn)查找功能的show_findText()函數(shù)。void MainWindow:show_findTe

51、xt()/“查找下一個(gè)”按鈕的槽函數(shù)QString findText = find_textLineEdit-text();/獲取行編輯器中的內(nèi)容先用一個(gè)QString類的對(duì)象獲得要查找的字符。然后我們一步一步寫查找操作的語(yǔ)句。1456.在下一行寫下ui，然后直接按下鍵盤上的“”或“.”，因?yàn)閡i是指針對(duì)象，所以自動(dòng)生成“-”號(hào)，而且彈出了ui中的所有部件名稱的列表。如下圖。1467.我們用向下的方向鍵選中列表中的textEdit?；蛘呶覀兛梢韵容斎雝ext，這時(shí)能縮減列表的內(nèi)容。1478.如上圖我們將鼠標(biāo)放到textEdit上，這時(shí)便出現(xiàn)了textEdit的類名信息，且后面出現(xiàn)一個(gè)F1按鍵。

52、我們按下鍵盤上的F1，便能出現(xiàn)textEdit的幫助。1489.我們?cè)趲椭邢蛳吕?，?huì)發(fā)現(xiàn)這里有一個(gè)find函數(shù)。14910.我們點(diǎn)擊find，查看其詳細(xì)說(shuō)明。15011.可以看到find函數(shù)可以實(shí)現(xiàn)文本編輯器中字符串的查找。其中有一個(gè)FindFlags的參數(shù)，我們點(diǎn)擊它查看其說(shuō)明。15112.可以看到它是一個(gè)枚舉變量（enum），有三個(gè)選項(xiàng)，第一項(xiàng)是向后查找（即查找光標(biāo)以前的內(nèi)容，這里的前后是相對(duì)的說(shuō)法，比如第一行已經(jīng)用完了，光標(biāo)在第二行時(shí)，把第一行叫做向后。），第二項(xiàng)是區(qū)分大小寫查找，第三項(xiàng)是查找全部。13.我們選用第一項(xiàng)，然后寫出下面的語(yǔ)句。ui-textEdit-find(findTe

53、xt,QTextDocument:FindBackward);152當(dāng)寫完函數(shù)名和第一個(gè)“（”后，系統(tǒng)會(huì)自動(dòng)顯示出該函數(shù)的函數(shù)原型，這樣可以使我們減少出錯(cuò)。15314.這時(shí)已經(jīng)能實(shí)現(xiàn)查找的功能了。但是我們剛才看到find的返回值類型是bool型，而且，我們也應(yīng)該為查找不到字符串作出提示。if(!ui-textEdit -find(findText,QTextDocument:FindBackward)QMessageBox:warning(this,tr(“查找”),tr(“找不到 %1).arg(findText);因?yàn)椴檎沂》祷刂凳莊alse，所以if條件加了“！”號(hào)。在找不到時(shí)彈出警告

54、對(duì)話框。15415515.到這里，查找功能就基本上寫完了。show_findText()函數(shù)的內(nèi)容如下。156我們會(huì)發(fā)現(xiàn)隨著程序功能的增強(qiáng)，其中的函數(shù)也會(huì)越來(lái)越多，我們都會(huì)為查找某個(gè)函數(shù)的定義位置感到頭疼。而在Qt Creator中有幾種快速定位函數(shù)的方法，我們這里講解三種。第一，在函數(shù)聲明的地方直接跳轉(zhuǎn)到函數(shù)定義的地方。如在do_file_Load上點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇Follow Symbol under Cursor或者下面的Switch between Method Declaration/Definition。157第二，快速查找一個(gè)文件里的所有函數(shù)。我們可以點(diǎn)擊窗口最上

55、面的下拉框，這里會(huì)顯示本文件中所有函數(shù)的列表。 158第三，利用查找功能。1.我們先將鼠標(biāo)定位到一個(gè)函數(shù)名上。2.然后選擇Edit-Find/Replace-Find Dialog。3.這時(shí)會(huì)出現(xiàn)一個(gè)查找對(duì)話框，可以看到要查找的函數(shù)名已經(jīng)寫在里面了。1594.當(dāng)我們按下Search按鈕后，會(huì)在查找結(jié)果窗口顯示查找到的結(jié)果。1605.我們點(diǎn)擊第二個(gè)文件。會(huì)發(fā)現(xiàn)在這個(gè)文件中有兩處關(guān)鍵字是高亮顯示。 1616.我們雙擊第二項(xiàng)，就會(huì)自動(dòng)跳轉(zhuǎn)到函數(shù)的定義處。162八、Qt Creator實(shí)現(xiàn)狀態(tài)欄顯示1.我們?cè)趍ainwindow.h中做一下更改。加入頭文件包含： #include 加入私有變量和函數(shù)：

56、QLabel* first_statusLabel; /聲明兩個(gè)標(biāo)簽對(duì)象，用于顯示狀態(tài)信息QLabel* second_statusLabel;void init_statusBar(); /初始化狀態(tài)欄加入一個(gè)槽函數(shù)聲明：void do_cursorChanged(); /獲取光標(biāo)位置信息1632.在mainwindow.cpp中加入狀態(tài)欄初始化函數(shù)的定義。void MainWindow:init_statusBar()QStatusBar* bar = ui-statusBar; /獲取狀態(tài)欄first_statusLabel = new QLabel; /新建標(biāo)簽first_status

57、Label-setMinimumSize(150,20); /設(shè)置標(biāo)簽最小尺寸first_statusLabel-setFrameShape(QFrame:WinPanel); /設(shè)置標(biāo)簽形狀first_statusLabel-setFrameShadow(QFrame:Sunken); /設(shè)置標(biāo)簽陰影second_statusLabel = new QLabel;second_statusLabel-setMinimumSize(150,20);second_statusLabel-setFrameShape(QFrame:WinPanel);second_statusLabel-setFr

58、ameShadow(QFrame:Sunken);bar-addWidget(first_statusLabel);bar-addWidget(second_statusLabel);first_statusLabel-setText(tr(“歡迎使用文本編輯器”); /初始化內(nèi)容second_statusLabel-setText(tr(“yafeilinux制作!”);這里將兩個(gè)標(biāo)簽對(duì)象加入到了主窗口的狀態(tài)欄里，并設(shè)置了他們的外觀和初值。1643.在構(gòu)造函數(shù)里調(diào)用狀態(tài)欄初始化函數(shù)。init_statusBar();這時(shí)運(yùn)行程序，效果如下。1654.在mainwindow.cpp中加入獲取光

59、標(biāo)位置的函數(shù)的定義。void MainWindow:do_cursorChanged()int rowNum = ui-textEdit-document()-blockCount();const QTextCursor cursor = ui-textEdit-textCursor();int colNum = cursor.columnNumber();/獲取光標(biāo)所在列的列號(hào)rowNum = cursor.blockNumber();/獲取光標(biāo)所在行的行號(hào)first_statusLabel-setText(tr(“%1行 %2列”).arg(rowNum).arg(colNum);/在狀態(tài)

60、欄顯示光標(biāo)位置這個(gè)函數(shù)可獲取文本編輯框中光標(biāo)的位置，并顯示在狀態(tài)欄中。1665.在構(gòu)造函數(shù)添加光標(biāo)位置改變信號(hào)的關(guān)聯(lián)。connect(ui-textEdit,SIGNAL(cursorPositionChanged(),this,SLOT(do_cursorChanged();這時(shí)運(yùn)行程序。效果如下。1676.在do_file_Load函數(shù)的最后添加下面語(yǔ)句。second_statusLabel-setText(tr(“打開(kāi)文件成功”);1687.在saveFile函數(shù)的最后添加以下語(yǔ)句。second_statusLabel-setText(tr(“保存文件成功”);1698.在on_acti