Qt用戶界面設計.ppt

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

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

3、完成自己的程序。 NO2: 閱讀書籍，隨書進行編程練習。如C+GUI Qt4編程，提供有完善的代碼,Qt程序開發(fā) QtCreator介紹 Hello Qt!程序開發(fā)流程 幾個Qt練習,Qt Creator的設計目標是使開發(fā)人員能夠利用Qt 這個應 用程序框架更加快速及輕易的完成開發(fā)任務。 Nokia 收購Qt之后在Qt的工具上做了很大的工作,推出的 一款新的輕量級集成開發(fā)環(huán)境(IDE), 即QtCreator。 QtCreator IDE 能夠跨平臺運行，支持的系統(tǒng)包括 Linux （32 位及 64 位）、Mac OS、Windows等。,功能介紹： 項目生成向導 高級 C+ 代碼編輯器 文

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

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

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

7、譯運行程序，觀察現(xiàn)象,練習：控制LCDNumber顯示 通過slider(滑塊)和dial(旋鈕)控制 LCDNumber上顯示的數(shù)字,Qt Creator編譯的程序，在其工程文件夾下會有一個debug文件夾，其中有程序的.exe可執(zhí)行文件。但Qt Creator默認是用動態(tài)鏈接的，就是可執(zhí)行程序在運行時需要相應的.dll文件。我們點擊生成的.exe文件，首先可能顯示“沒有找到mingwm10.dll，因此這個應用程序未能啟動。重新安裝應用程序可能會修復此問題?！北硎救鄙賛ingwm10.dll文件。,解決這個問題我們可以將相應的.dll文件放到系統(tǒng)中。在Qt Creator的安裝目錄的qt文

8、件下的bin文件夾下（比如安裝在了D盤，所以路徑是D:Qt2009.04qtbin），可以找到所有的相關.dll文件。 方法一：在這里找到mingwm10.dll文件，將其復制到C:WINDOWSsystem文件夾下即可。下面再提示缺少什么dll文件，都像這樣解決就可以了。 方法二：將這些dll文件都與.exe文件放到同一個文件夾下。不過這樣每個.exe文件都要放一次。 方法三：將D:Qt2009.04qtbin加入系統(tǒng)Path環(huán)境變量。右擊我的電腦-屬性-高級-環(huán)境變量-在系統(tǒng)變量列表中找到Path,將路徑加入其中即可。,用純源碼編寫: 1.新建空的Qt工程。,2.工程名為hello wor

9、ld，并選擇工程保存路徑,3.在新建好的工程中添加文件。右擊工程文件夾，彈出的菜單中選擇Add New。,4.選擇普通文件。點擊Ok,5.文件名為main.cpp，點擊Next進入下一步。,6.這里自動將這個文件添加到了新建的工程中。保持默認設置，點擊完成。,7.在main.cpp文件中添加代碼。,8.這時點擊運行，程序執(zhí)行了，但看不到效果，因為程序里什么也沒做。我們點擊信息框右上角的紅色方塊，停止程序運行。,9.我們再更改代碼。添加一個對話框對象。,10.運行效果如下。,11.我們更改代碼如下，在對話框上添加一個標簽對象，并顯示hello world。,12.運行效果如下。,二、Qt Cre

10、ator編寫多窗口程序 實現(xiàn)功能： 程序開始出現(xiàn)一個對話框，按下按鈕后便能進入主窗口，如果直接關閉這個對話框，便不能進入主窗口，整個程序也將退出。當進入主窗口后，我們按下按鈕，會彈出一個對話框，無論如何關閉這個對話框，都會回到主窗口。 實現(xiàn)原理： 程序里我們先建立一個主工程，作為主界面，然后再建立一個對話框類，將其加入工程中，然后在程序中調用自己新建的對話框類來實現(xiàn)多窗口。,實現(xiàn)過程： 1.首先新建Qt4 Gui Application工程，工程名為nGui，Base class選為QWidget。建立好后工程文件列表如下圖。,2.新建對話框類，如下圖，在新建中，選擇Qt Designer F

11、orm Class。,3.選擇Dialog without Buttons。,4.類名設為myDlg。,5.點擊Finish完成。注意這里已經默認將其加入到了我們剛建的工程中了。,6.如下圖，在mydlg.ui中拖入一個Push Button，將其上的文本改為“進入主窗口”，在其屬性窗口中將其objectName改為enterBtn(Push Button名字)，在下面的Signals and slots editor中進行信號和槽的關聯(lián)，其中，Sender設為enterBtn，Signal設為clicked()，Receive設為myDlg，Slot設為accept()。這樣就實現(xiàn)了單擊這個

12、按鈕使這個對話框關閉并發(fā)出Accepted信號的功能。下面我們將利用這個信號。,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; /建立自己新建的類的對象my1 if(my1.exec()=QDialog:Accepted) /利用Accepted信號判斷enterBtn是否被按下 w.show(); /如果被按下，顯示主窗口 return

13、a.exec(); /程序一直執(zhí)行，直到主窗口關閉 else return 0; /如果沒被按下，則不會進入主窗口，整個程序結束運行 主函數(shù)必須這么寫，才能完成所要的功能。,到這里，我們就實現(xiàn)了一個界面結束執(zhí)行，然后彈出另一個界面的程序。下面我們在主窗口上加一個按鈕，按下該按鈕，彈出一個對話框，但這個對話框關閉，不會使主窗口關閉。 8.如下圖，在主窗口加入按鈕，顯示文本為“彈出一個對話框”，在其上點擊鼠標右鍵，在彈出的菜單中選擇go to slot。,9.我們選擇單擊事件clicked()。,10.我們在彈出的槽函數(shù)中添加一句： my2.show(); my2為我們新建對話框類的另一個對象，但

14、是my2我們還沒有定義，所以在widget.h文件中添加相應代碼，如下，先加入頭文件，再加入my2的定義語句，這里我們將其放到private里，因為一般的函數(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; /對my2進行定義 private slots: void on_pushButton_clicked(); ; #endif / WIDGET_H,到這里，再運行程序，便能完成我們實驗要求的功能了。整個程序里，我們用兩種方法實現(xiàn)了信號和槽函數(shù)的關聯(lián)，第一個按鈕我們直接在設計器中實現(xiàn)其關聯(lián)；第二個按鈕我們自己寫了槽函數(shù)語句，其實圖形的設計與直接寫代碼效果是一樣的。,三、Qt Creator登錄對話框 實現(xiàn)功能： 在彈出對話框中填寫用戶名和密碼，按下登錄按鈕，如果用戶名和密碼均正確則進入主窗口，如果有錯則彈出警告對話框。 實現(xiàn)原理： 通過上節(jié)的多窗口

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

17、為pwdLineEdit，登錄按鈕為loginBtn，退出按鈕為exitBtn。,4.將exitBtn的單擊后效果設為退出程序，關聯(lián)如下：,5.右擊登錄按鈕選擇go to slot，再選擇clicked(),然后進入其單擊事件的槽函數(shù)，寫入一句 void loginDlg:on_loginBtn_clicked() accept();,6.改寫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.這時執(zhí)行程序，可實現(xiàn)按下登錄按鈕進入主窗口，按下退出按鈕退出程序。 8.添加用戶名密碼判斷功能。將登陸按鈕的槽函數(shù)改為： void loginDlg:on_loginBtn_clicked() if (ui-usrLineEdit-text()=tr(“qt”) /如果不正確，彈出警告對話框 并在logindlg.cpp中加入#include 的頭文件。如果不加這個頭文件，QMessageBox類不可用。,9.這時再執(zhí)行程序，輸入用戶名為qt，密碼為123456，按登錄按鈕便能進入主窗口了，如果輸入錯了，就會彈出警告對話框。,如果輸入錯誤，便會彈出警告提示框：,10.在logindlg.cpp的loginDlg類構造函數(shù)里，添上初始化語句，使密碼顯示為小黑點。 loginDlg:loginDlg(QWidget *parent) : QDialog(parent), ui(new Ui:loginDlg) ui-setupUi(this); ui- pwdLineEdit- setEchoMode(QLineEdit:Pas