Qt用戶(hù)界面設(shè)計(jì).ppt

1、Qt簡(jiǎn)介 Qt的作用 Qt的特性及優(yōu)勢(shì) 包含Qt的系統(tǒng)的架構(gòu) 如何學(xué)習(xí)Qt,Qt簡(jiǎn)介 圖形用戶(hù)界面 （Graphical User Interface）是指采用圖形方式顯示的計(jì)算機(jī)操作用戶(hù)界面 對(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è)類(lèi)和9000多個(gè)函數(shù)，使用Qt可以迅速開(kāi)發(fā)出期望的應(yīng)用程序,Qt在整個(gè)產(chǎn)品開(kāi)發(fā)中的作用 構(gòu)建桌面環(huán)境； 為應(yīng)用程序提供可視化的、友好的界面； 利用Qt類(lèi)庫(kù)自帶的功能構(gòu)建復(fù)雜應(yīng)用程序；

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

3、完成自己的程序。 NO2: 閱讀書(shū)籍，隨書(shū)進(jìn)行編程練習(xí)。如C+GUI Qt4編程，提供有完善的代碼,Qt程序開(kāi)發(fā) QtCreator介紹 Hello Qt!程序開(kāi)發(fā)流程 幾個(gè)Qt練習(xí),Qt 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等。,功能介紹： 項(xiàng)目生成向?qū)?高級(jí) C+ 代碼編輯器 文

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

5、置該類(lèi)名稱(chēng)，選擇基類(lèi)名稱(chēng)，及設(shè)置該類(lèi)代碼的文件名稱(chēng) 另外，設(shè)置是否要生成UI文件，如果生成則，將來(lái)可以在UI文件 中來(lái)繪制界面。,最后一步“Finish”即可完成工程創(chuàng)建,在工程管理窗口中雙擊Forms下的mywidget.ui(UI文件)，即可打開(kāi)Qt Designer(Qt界面設(shè)計(jì)器) 在Designer中設(shè)計(jì)界面,編譯運(yùn)行程序：在工程名上右鍵，選擇Run,運(yùn)行效果：,練習(xí)1：隱藏“HelloQt!” 設(shè)計(jì)兩個(gè)按鈕和一個(gè)Label,當(dāng)點(diǎn)擊“show”按鈕時(shí)顯示“HelloQt!”,點(diǎn)擊“Hide”按鈕時(shí)隱藏“HelloQt!”。,按照Hellot方法創(chuàng)建工程，并繪制界面。,添加功能： t使

6、用信號(hào)和槽機(jī)制可以很容易的實(shí)現(xiàn)對(duì)象之間的通信，當(dāng)某些 事件發(fā)生時(shí)，對(duì)應(yīng)的信號(hào)會(huì)被發(fā)送。 可以將一個(gè)對(duì)象的信號(hào)和其他對(duì)象的槽相連，這樣，當(dāng)信號(hào)發(fā)送 是，和他相連的槽函數(shù)即可被調(diào)用。,編輯信號(hào)和槽： Edit-Edit signal/slots (F4) 編輯對(duì)象： Edit-Edit idgets (F3) F4之后，左鍵拖動(dòng)“Show”到“HelloQT”上，釋放鼠標(biāo)，會(huì)彈出信 號(hào)和槽對(duì)話框,選擇連接clicked()信號(hào)和show()槽,同樣的方法連接“Hide”的clicked()信號(hào)和“HelloQt”的show()槽 連接好后如下圖示 如果要編輯部件，按F3回到部件編輯狀態(tài)即可 最后編

7、譯運(yùn)行程序，觀察現(xiàn)象,練習(xí)：控制LCDNumber顯示 通過(guò)slider(滑塊)和dial(旋鈕)控制 LCDNumber上顯示的數(shù)字,Qt 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)題?！北硎救鄙賛ingwm10.dll文件。,解決這個(gè)問(wèn)題我們可以將相應(yīng)的.dll文件放到系統(tǒng)中。在Qt Creator的安裝目錄的qt文

8、件下的bin文件夾下（比如安裝在了D盤(pán)，所以路徑是D:Qt2009.04qtbin），可以找到所有的相關(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,將路徑加入其中即可。,用純?cè)创a編寫(xiě): 1.新建空的Qt工程。,2.工程名為hello wor

9、ld，并選擇工程保存路徑,3.在新建好的工程中添加文件。右擊工程文件夾，彈出的菜單中選擇Add New。,4.選擇普通文件。點(diǎn)擊Ok,5.文件名為main.cpp，點(diǎn)擊Next進(jìn)入下一步。,6.這里自動(dòng)將這個(gè)文件添加到了新建的工程中。保持默認(rèn)設(shè)置，點(diǎn)擊完成。,7.在main.cpp文件中添加代碼。,8.這時(shí)點(diǎn)擊運(yùn)行，程序執(zhí)行了，但看不到效果，因?yàn)槌绦蚶锸裁匆矝](méi)做。我們點(diǎn)擊信息框右上角的紅色方塊，停止程序運(yùn)行。,9.我們?cè)俑拇a。添加一個(gè)對(duì)話框?qū)ο蟆?10.運(yùn)行效果如下。,11.我們更改代碼如下，在對(duì)話框上添加一個(gè)標(biāo)簽對(duì)象，并顯示hello world。,12.運(yùn)行效果如下。,二、Qt Cre

10、ator編寫(xiě)多窗口程序 實(shí)現(xiàn)功能： 程序開(kāi)始出現(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ì)話框類(lèi)，將其加入工程中，然后在程序中調(diào)用自己新建的對(duì)話框類(lèi)來(lái)實(shí)現(xiàn)多窗口。,實(shí)現(xiàn)過(guò)程： 1.首先新建Qt4 Gui Application工程，工程名為nGui，Base class選為QWidget。建立好后工程文件列表如下圖。,2.新建對(duì)話框類(lèi)，如下圖，在新建中，選擇Qt Designer F

11、orm Class。,3.選擇Dialog without Buttons。,4.類(lèi)名設(shè)為myDlg。,5.點(diǎn)擊Finish完成。注意這里已經(jīng)默認(rèn)將其加入到了我們剛建的工程中了。,6.如下圖，在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è)

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

13、a.exec(); /程序一直執(zhí)行，直到主窗口關(guān)閉 else return 0; /如果沒(méi)被按下，則不會(huì)進(jìn)入主窗口，整個(gè)程序結(jié)束運(yùn)行 主函數(shù)必須這么寫(xiě)，才能完成所要的功能。,到這里，我們就實(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。,9.我們選擇單擊事件clicked()。,10.我們?cè)趶棾龅牟酆瘮?shù)中添加一句： my2.show(); my2為我們新建對(duì)話框類(lèi)的另一個(gè)對(duì)象，但

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

15、Widget *ui; myDlg my2; /對(duì)my2進(jìn)行定義 private slots: void on_pushButton_clicked(); ; #endif / WIDGET_H,到這里，再運(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è)按鈕我們自己寫(xiě)了槽函數(shù)語(yǔ)句，其實(shí)圖形的設(shè)計(jì)與直接寫(xiě)代碼效果是一樣的。,三、Qt Creator登錄對(duì)話框 實(shí)現(xiàn)功能： 在彈出對(duì)話框中填寫(xiě)用戶(hù)名和密碼，按下登錄按鈕，如果用戶(hù)名和密碼均正確則進(jìn)入主窗口，如果有錯(cuò)則彈出警告對(duì)話框。 實(shí)現(xiàn)原理： 通過(guò)上節(jié)的多窗口

16、原理實(shí)現(xiàn)由登錄對(duì)話框進(jìn)入主窗口，而用戶(hù)名和密碼可以用if語(yǔ)句進(jìn)行判斷。,實(shí)現(xiàn)過(guò)程： 1.先新建Qt4 Gui Application工程，工程名為mainWidget，選用QWidget作為Base class，這樣便建立了主窗口。文件列表如下：,2.然后新建一個(gè)Qt Designer Form Class類(lèi)，類(lèi)名為loginDlg，選用Dialog without Buttons，將其加入上面的工程中。文件列表如下：,3.在logindlg.ui中設(shè)計(jì)下面的界面：行輸入框?yàn)長(zhǎng)ine Edit。其中用戶(hù)名后面的輸入框在屬性中設(shè)置其object Name為usrLineEdit，密碼后面的輸入框

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

18、 loginDlg login; if(login.exec()=QDialog:Accepted) w.show(); return a.exec(); else return 0;,7.這時(shí)執(zhí)行程序，可實(shí)現(xiàn)按下登錄按鈕進(jìn)入主窗口，按下退出按鈕退出程序。 8.添加用戶(hù)名密碼判斷功能。將登陸按鈕的槽函數(shù)改為： void loginDlg:on_loginBtn_clicked() if (ui-usrLineEdit-text()=tr(“qt”) /如果不正確，彈出警告對(duì)話框 并在logindlg.cpp中加入#include 的頭文件。如果不加這個(gè)頭文件，QMessageBox類(lèi)不可用。,9.這時(shí)再執(zhí)行程序，輸入用戶(hù)名為qt，密碼為123456，按登錄按鈕便能進(jìn)入主窗口了，如果輸入錯(cuò)了，就會(huì)彈出警告對(duì)話框。,如果輸入錯(cuò)誤，便會(huì)彈出警告提示框：,10.在logindlg.cpp的loginDlg類(lèi)構(gòu)造函數(shù)里，添上初始化語(yǔ)句，使密碼顯示為小黑點(diǎn)。 loginDlg:loginDlg(QWidget *parent) : QDialog(parent), ui(new Ui:loginDlg) ui-setupUi(this); ui- pwdLineEdit- setEchoMode(QLineEdit:Pas