QT關(guān)于控件的教程

1、QT 關(guān)于控件的教程使用 Linux 純屬為了想了解 UNIX 下 DB2 運(yùn)行和使用情況,而 一直喜歡用的 FreeBSD 上好像不支持 DB2 數(shù)據(jù)庫(kù),反正我沒(méi)有 看到這方面資料。如果有誰(shuí)知道的話請(qǐng)你告訴我。 我的 在愛(ài)機(jī) 配置較低, Freebsd 上使用 GNOME 作為 X-Windws 有點(diǎn)鈍, KDE 也就一直都沒(méi)有嘗試過(guò)。 在安裝 Linux 時(shí), 忽然有想看看 KDE 的 念頭,于是一古腦全裝上了,第一次用時(shí)覺(jué)得用 KDE 感覺(jué)也不滿 意, 于是將 KDE 改為 UNIX 風(fēng)格, 沒(méi)想到重新啟動(dòng) X- Windws 后, 速度一下快了起來(lái),終于讓我覺(jué)得可以順利的工作了。最近在

2、學(xué) 習(xí) Python 編程, 想看看在 Linux 工作下怎樣, 而無(wú)意發(fā)現(xiàn)了 QT Designer 再仔細(xì)一看竟然使用的是 C。讓我大為興奮, C +再 熟悉不過(guò)了,于是照著英文說(shuō)明操練了一會(huì),挺順手的的,于是 試著寫(xiě)了一代碼,最后就是不會(huì)編譯。我的英語(yǔ)水平也有限,忙 了半天了也有點(diǎn)累了。今天在網(wǎng)上查了一些資料,終于對(duì) QT Designer 有些了解。下面是我在網(wǎng)上看到的一篇文章,先收集以 后再說(shuō)吧。 1. 什麼是 QT.用 Linux 的人一定都知道 QT 是什麼 . 而利用 QT 編譯出來(lái)的 KDE 桌面系統(tǒng)更是讓 Linux 有了一次能 和 Windows 的 GUI 相媲美的機(jī)會(huì)

3、 . 甚至有人說(shuō) KDE的桌面在圖 形上還勝過(guò)了 Windows95 了 . 那麼 QT 到底是什麼呢?其實(shí) QT就是基於 C 語(yǔ)言上的一種專門(mén)用來(lái)開(kāi)發(fā) GUI 介面的程式 . 這里 面包括了 button label frame . 等等很多的可以直接調(diào)用的 東西 .2. 為什麼選擇 QT2.1 QT 是基於 C 的一種語(yǔ)言相信 C/C 目前還是一種很多人都在學(xué)習(xí)的語(yǔ)言 . QT 的好處就在於 QT 本身可以被稱作是一種 C 的延伸 . QT 中有數(shù)百個(gè) class 都是用 C 寫(xiě)出來(lái)的 . 這也就是說(shuō) QT 本身就具備了 C 的快速、簡(jiǎn)易、 Object-Oriented Programm

4、ing (OOP 等等無(wú)數(shù)的優(yōu)點(diǎn) .2.2 QT 具 有非常好的可移植性(Portable QT 不只是可以在 Linux 中運(yùn) 作 . 也同樣可以運(yùn)行在 Microsoft Windows 中 . 這也就意味者利用 QT 編寫(xiě)出來(lái)的程式在幾乎不用修改的情況下就可以同時(shí)在Linux 中和 Microsoft Windows 中運(yùn)行 . QT 的應(yīng)用非常之廣泛從 Linux 到 Windows 從 x86 到 Embedded 都有 QT 的影子 .3. 什 麼是 QT Designer 簡(jiǎn)單的來(lái)說(shuō) QT Designer 是一個(gè) GUI 的工具 . 這個(gè)工具可以幫助我們來(lái)加快寫(xiě) QT程式的速度

5、 . 利用 QT Designer 可以用一種所見(jiàn)既所得的方式來(lái)產(chǎn)生 QT 程式的 GUI 介面的程式碼 . 通過(guò)增加一些功能就可以完成一個(gè)程式了 . 利用 QT Designer可以非?？焖俚膶W(xué)會(huì) QT 而我們這里說(shuō)利用 QT Designer 來(lái)學(xué)習(xí) QT 而不是利用 QT Designer 來(lái)寫(xiě) QT 這里的 區(qū)別就在於 QT Designer 所產(chǎn)生的程式碼有些繁瑣 . 跑起來(lái)也比 較的慢些 . 我們這里只是利用 QT Designer 來(lái)幫助我們學(xué)習(xí) . 而不 是直接去跑 QT Designer 生成的程式碼 .3. 基本要求因?yàn)檫@篇文 章主要是告訴大家如何利用 QT Design

6、來(lái)達(dá)到快速學(xué)習(xí) QT 的 . 所以您最也要做到您需要有一臺(tái)可以跑 Linux 的電腦或者 Microsoft Windows 的電腦足夠的 RAM 和 HardDisk 用以安裝、 編譯 QT您的 Linux 中需要安裝有 KDE、 QT 、 QT Designer 、 g 等 等程式 . 您如果適用 Microsoft Windows 則您需要 VC 和 QT For WindowsLinux 的 使用者最好 還能安裝一個(gè) Kdevelop(一個(gè)非常好 的用來(lái)開(kāi)發(fā) QT 的 DevelopEnverment 4. QT Designer簡(jiǎn) 單的介紹 -從 PushButton 開(kāi)始假設(shè)您一切

7、都安裝好了 . 現(xiàn)在我 們打開(kāi) QT Designer 吧 . 打開(kāi)后選擇 New -gt Dialog這時(shí)侯您 的 QT Designer 中就會(huì)出現(xiàn)一個(gè) From1 來(lái) . 現(xiàn)在我們 click 一 下上面的 tools中的 那 個(gè) pushbutton 標(biāo) 有 OK 的 圖 標(biāo) 并 且 用 mouse 選 擇 到 一 定 的 大 小 . 在 這 個(gè) pushbutton 上面用您的 mouse double click 一下 . 我們就可以 改變 pushbutton 的 label 了 . 這里我們把 pushbutton1 這幾 個(gè)字換成 Exit 然后直接按 Enter 或者用 m

8、ouse 選擇 OK 也可 以 . 現(xiàn)在我們看到 那個(gè) button 中的標(biāo)簽已將變成 Exit 了 . 我們這時(shí)侯還需要給這個(gè) Exit Button 一個(gè) signal (信號(hào) 這 樣當(dāng)您在 Exit 這個(gè) Button 上 click 的時(shí)侯 . QT 才知道如何 去處理這個(gè)信號(hào) . 我們按一下 F3(connect singnal slot然后 在那個(gè) Exit Button 上面 Click 一下 . 這時(shí)侯我們就看到了 Edit Connection 的 Dialog 了 . 在 Signal 中選擇 clicked 在 slot 中先選擇 setFocus 就好了 . 這時(shí)侯選擇

9、 OK. 我們就算是 完成了 . 如果想看看這個(gè)小程式長(zhǎng)什麼樣子 . 可以用 CTRLT 來(lái)看 PreView. see figure 1figure 1首先在您的 HOME 中建立一個(gè) qt_program 的 Directory 出來(lái) . 這個(gè) Directory 將會(huì)作 為 我 們 存 放 文 件 的 地 方 . 現(xiàn) 在 我 們 用 File -gt Save 把 這 個(gè) 文 件 存 為 form1.ui 放 在 HOME/qt_program的目錄 下 . 現(xiàn)在如果大家打開(kāi) form1.ui 來(lái)看一看 . 會(huì)發(fā)現(xiàn)那是一堆有 很多 的東西 . 所以我們需要用一個(gè)叫做 uic 的程式來(lái)把

10、.ui 文件轉(zhuǎn)換成 QT 可以使用的 .cpp 和 .h 文件 . 用下面的指令就可 以生成我們需要的 .h 文件了 uic -o form1.h form1.ui而生 成 .cpp 文件則需要用以下的指令 uic -i form1.h -o form1.cpp form1.ui這時(shí)侯 form1.h 中就會(huì)看到一個(gè)標(biāo)準(zhǔn)的 QT 需要的 .h 文件 1. ifndef FORM1_H2. define FORM1_H3. include4. include5. class QVBoxLayout6. class QHBoxLayout7. class QGridLayout8. class Q

11、PushButton9. class Form1 : public QDialog10. 11. Q_OBJECT12. public:13. Form1 QWidget parent 0 const char name 0 bool modal FALSE WFlags fl 0 14. Form115. QPushButton PushButton116. 17. endif / FORM1_H1-2: 定義 FORM1.H 這個(gè)文件 3-4: 這里是我們需要用到的兩個(gè) .h 文件 5-7: 我們根本用不到 qt designer 自己產(chǎn)生的 8: QPushButton 需要 用到這個(gè)

12、class9-11: 我們的 form1 是 based 在 QDialog 上 面的 12: 公開(kāi)的 (可以在以后的程式中使用 . 用過(guò) C 的人一定明 白 13: Form1 的架構(gòu) 14: 清除 Form115: 產(chǎn)生一個(gè) pushbutton (就是那個(gè)標(biāo)有 exit 的 按鈕 17: 結(jié)束對(duì) FORM1.H 的定義而 form1.cpp 文件如下 :1. include quotform1.hquot2. include3. include4. include5. include6. include7. /8. Constructs a Form1 which is a child

13、of parent with the9. name name and widget flags set to f10. 11. The dialog will by default be modeless unless you set modal to12. TRUE to construct a modal dialog.13. /14. Form1:Form1 QWidget parent const char name bool modal WFlags fl 15. : QDialog parent name modal fl 16.17. if name 18. setName qu

14、otForm1quot 19. resize 596 480 20. setCaption tr quotForm1quot 21. PushButton1 new QPushButton this quotPushButton1quot 22. PushButton1-gtsetGeometry QRect 130 160 161 71 23. PushButton1-gtsetText tr quotExitquot 24. / signals and slots connections25. connect PushButton1 SIGNAL clicked PushButton1 S

15、LOT setFocus 26. 27. /28. Destroys the object and frees any allocated resources29. /30. Form1:Form131. 32. / no need to delete child widgets Qt does it all for us33. 1: 我們上面的定義文件 2: pushbutton 所需要的 .h 文件 3-6: 我們根本用不到 qt designer 自己產(chǎn)生 的 7-13: QT Designer 產(chǎn)生的注解 14-15: Form1 的結(jié)構(gòu) 17-18: 如果 Form1:Form1 中

16、沒(méi)有 pass 一個(gè)名子過(guò)來(lái) . 那麼就命名為 Form119: resize20: 把顯示出來(lái)的那個(gè) Dialog 的名子定為 Form1 也就是 window 中左上角的字 21: 做出一個(gè)新的 button名子為 PushButton122: 這里設(shè)定了 pushbutton 在這個(gè)dialog 中的位置 . Qrect130 160 161 71 這里是說(shuō)在一個(gè) Dialog 中以左邊最上面來(lái)算位置是 00 所以說(shuō)這里的 130(橫向 和 160 (縱向 就是說(shuō)我們從 00開(kāi)始往左邊跑 130往下跑 160.這樣我 們就算出了 pushbutton 這個(gè)按鈕畫(huà)在那里了 . 后面的 16

17、171 則 是定義這個(gè) pushbutton 到底要畫(huà)多大設(shè)定了長(zhǎng)和高 23: 通過(guò)呼 叫 setText 指令我們可以在這個(gè) button 上面給入我們需要的 文字 . 這里是 Exit24: QT Designer 產(chǎn)生的注解 25: 上面就是處 理當(dāng)接收到 clicked 的信號(hào)(singal 以后我們所作的事情(setFocus onPushButton1connect 這 里 是 告 訴 程 式 連 接 一 個(gè) 信 號(hào) PushButton1 SIGNALclicked 是 說(shuō) 信 號(hào) 是 由 PushButton1 發(fā)出發(fā)出的信號(hào)為 mouse clickedPushButton1

18、 SLOTsetFocus 表示信號(hào)發(fā)出以后目標(biāo)(Object 為 PushButtonevent 是 setFocus 動(dòng)作 26: 主程式結(jié)束 27-29: QT Designer 的注解 30-33: 清除 Form1由於我們要常常用到 QT Designer 也就是說(shuō)需要常常用到 uic 這蘋(píng)程式 . 為了省去每次 都要打一堆東西的麻煩 . 我們來(lái)寫(xiě)一各小 script 來(lái)處理 .ui 檔 案 . 不難看出 uic 在處理 /生成 .h .cpp 檔案的時(shí)侯用到了兩個(gè) 指令 uic -o form1.h form1.uiuic -i form1.h -o form1.cpp form1

19、.ui 所以我們的 script 就寫(xiě)成 /bin/sh myuic program convert .ui to .cpp .h by calling uic INPUT_UI 這里讀取外 面?zhèn)骰貋?lái)的文件名 if -f quotINPUT_UIquot then echo quotUIC File INPUT_UI Not Foundquot echo echo quotUserage myuic input_file.uiquot echo exit 1 fi 上面的語(yǔ)句檢查我們所輸入 的 .ui 文件是否存在 如果找不到指定的 .ui 文件則顯示一個(gè)簡(jiǎn) 短的 使用說(shuō)明 INPUT_Hec

20、ho cut -d . -f1.h 這里我們利用 cut 來(lái)處理輸入的 .ui 文件 . 得到一個(gè) .h 的文件名INPUT_CPPecho cut -d . -f1.cpp 同樣的道理利用 cut 產(chǎn)生一 個(gè) .cpp 的文件名 uic -o INPUT_H INPUT_UI 這里就是利用 .ui 產(chǎn)生 .h 的文件 uic -i INPUT_H -o INPUT_CPP INPUT_UI 利用 .h 和 .ui 產(chǎn)生 .cpp 文件 . 我門(mén)把這個(gè)文件存為 myuic. 并切 chmod x 變成可執(zhí)行檔案 . 然后 cp 到 /usr/bin 上面 . 如果您在電腦中沒(méi)有 root 的權(quán)

21、限 . 可以在自己的 HOME 目錄中做一個(gè) bin 的 Directory 出來(lái) . 然后去編輯您的 .bash_profile (這里 假設(shè)您用的是 bash如果您的 .bash_profile 中本身已經(jīng)有了 PATH 這段文字那麼您只要在原本的 PATH 后面加上 :HOME/bin 就可以了 . 如果沒(méi)有那麼就在您的 .bash_profile 中寫(xiě)入 PATHPATH:HOME/binexport PATH這樣您以后就可以直接執(zhí)行 myuic 這個(gè)文件了 . 現(xiàn)在試試看用 myuic 來(lái)處理剛剛的那個(gè) form1.ui 這個(gè)文件吧 . 先把舊的 .h .cpp 都刪除掉 rm -f

22、 .cpp .h然后用 myuic 來(lái)生成新的 .cpp .h 文件 myuic form1.ui 這時(shí)候用 ls 就會(huì)看到 form1.cpp form1.h form1.ui 這三個(gè)文件了這時(shí)侯我們只需要寫(xiě)一個(gè)小的 main.cpp 就可以編 譯 form1.cpp 了 .main.cpp 非常的簡(jiǎn)單 include quotform1.hquotincludeint mainint argc char argvKApplication appargc argv quotForm1quot /KDE 是建立 在 QT 的基礎(chǔ)上得所以 KApplication/所以 kapp.h 實(shí)際上包

23、含了 qapplication.hForm1 form1newForm1form1-gtshowapp.setMainWidgetform1returnapp.exec 基 本上來(lái)說(shuō)很簡(jiǎn)單 . 然后當(dāng)然就是編譯啦 . 我建議寫(xiě)出來(lái)的東西都用 Kdevelop 來(lái)解決 . 首先 Kdevelop 介面非 常的 友善 .又 能省下 寫(xiě) Makefile 的 麻煩 .打 開(kāi) Kdevelop 以 后選擇 項(xiàng) 目 -gt 新 建 KDE2-Normal然后 選擇 Next在這一頁(yè)中 . 注意不要在任何選 項(xiàng)中打 quotxquot 因?yàn)槲覀冇貌坏?. 反而會(huì)增加麻煩 . 最后一直 next 然后 cr

24、eate exit. 這時(shí)侯我們就已經(jīng)有一個(gè)新的項(xiàng)目可以用了 . 在 menu 中選擇 :項(xiàng)目 -gt 添加現(xiàn)存文件 . 然后把qt_program 中的 form1.cpp form1.h 和 main.cpp 加入 . 這時(shí) 候只要按一下 F9 Kdevelop 就會(huì)自動(dòng)幫您把程式 compile 出來(lái) . 并且執(zhí)行 . 程式執(zhí)行后我們不能用 click 那個(gè) Exit Button 退出 程式 . 因?yàn)槲覀儾](méi)有給他退出的信號(hào) . 現(xiàn)在讓我們來(lái)把程式碼作 些改動(dòng) form1.hifndef FORM1_Hdefine FORM1_Hincludeclass QPushButtonclas

25、s Form1 : publicQDialogQ_OBJECTpublic:Form1QWidget parent0 const char name0QPushButton PushButton1endif /FORM1_Hform1.cppinclude quotform1.hquotincludeincludeForm1:Form1QWidget parent const char name: QDialogparent namesetCaptiontrquotForm21quotPushButton1new QPushButtonthisquotPushButton1quotPushBu

26、tton1-gtsetGeome tryQRecushButton1-vsetTexttrquotExitquotcon nectPushButton1 SIGNALclicked kapp SLOTquitForm1:Form1main.cpp 保持不變 . 經(jīng)過(guò)一番簡(jiǎn)化 . 程式 碼馬上簡(jiǎn)單很多了 . 這里我們除了把一些由 QT Design 做出的不 必要的 code 挑除以外 . 對(duì) form1.cpp做了兩個(gè)小改動(dòng) .1. 增加了 include 這個(gè) head file.2.我們把 connectPushButton1 SIGNALclicked Push

27、Button1 SLOTsetFocus改變?yōu)?connectPushButton1 SIGNALclicked kapp SLOTquit同樣的信號(hào) 傳送但是目標(biāo)對(duì)象有所改變 . 現(xiàn)在目標(biāo)將作用在 kapp 上面也就是我們的主程式(main application而 SLOT 則是呼叫 quit現(xiàn)在 Kdevelop 中更改程式碼 . 然后按下 F9 . 等待程式運(yùn)行 . 這時(shí) 侯我們的程式只要在那個(gè) Exit 的 Button上面用 mouse click 一下 . 這個(gè)程式就完全關(guān)閉了 . 現(xiàn)在我們?cè)谶@個(gè) PushButton 中 再增加一些功能 . 我們來(lái)看看 QT Designer

28、中的 ToolTip功能 . 如果您的 QT Designer 中 Property Edit 并沒(méi)有自動(dòng)出現(xiàn) . 那麼 請(qǐng)?jiān)?QT Designer中選擇 Menu 中的 Windows 然后選擇Property Edit. 只要在 PushButton1 那個(gè) Button上面用mouse click 一下 . 就可以對(duì) Pushbutton1 的 Property 進(jìn)行編 輯 . 在 PropertyEdit 中的 ToolTip 后面可以進(jìn)行文字輸入的 地方打入下面的文字 Click On this Button Will Exit Main Window. 然后 sava 文件 .

29、(Form1.ui 在用我們的小 script 呼 叫 uic 程式把 Form1.ui 轉(zhuǎn)成 Form1.h 和 Form1.cppmyuic form1.ui 這時(shí)侯我們來(lái)觀察生成的 form1.cpp 文件我們會(huì)發(fā)現(xiàn) 現(xiàn)在這里面比一前多了些東西 . 現(xiàn)在這里多了一行 :QToolTip:add PushButton1 tr quotClicke On this Button Will Exit Main Window.quot 這里我們用 QToolTip 中的 add在 Object PushButton1 上面加入 quotClicke On this ButtonWill Exit

30、 Main window.quot 這個(gè)字幕 . 現(xiàn)在我們?cè)谇懊婺?個(gè)被我們簡(jiǎn)化的 form1.cpp 中加入上面那行程式碼因?yàn)槲覀冃?要調(diào)用到 QToolTip 所以我們也要把 qtooltip.h 給 include 進(jìn)去 .form1.cppincludequotform1.hquotincludeincludeinclude /因?yàn)槲覀冃枰玫絈ToolTip 所以這里要加入 qtooltip.hForm1:Form1QWidget parent const char name: QDialogparent namesetCaptiontrquotForm21quotPushButto

31、n1new QPushButtonthisquotPushButton1quotPushButton1-gtsetGeome tryQRecushButton1-gtsetTexttrquotExitquotQT oolTip:addPushButton1 trquotClick On this Button Will Exit Main Window.quotconnectPushButton1 SIGNALclicked kapp SLOTquitForm1:Form1這時(shí)侯重新編譯這個(gè) form1 的程式 . 您就 會(huì)看到當(dāng)您把 mouse 移動(dòng)到 Exit 那

32、個(gè)按鈕的時(shí)侯 . 停留差不多 一兩秒鐘 . quotClick On this Button Will Exit Main Windowquot 的字樣就會(huì)出現(xiàn) .QPushButton 中還有一個(gè)常用的功能就是 setEnabled 了 .setEnabled 通過(guò) TRUE 和 FALSE這兩個(gè)值 . 可以 決定這個(gè)扭是否可以被使用者按下 . 我們現(xiàn)在在 QT Designer 中 的 Property Edit 中把 Enable 選擇成 FALSE 然后用 myuic生 成新的程式碼 .myuic form1.ui這時(shí)候再去觀察 form1.cpp 會(huì)發(fā) 現(xiàn)里面多了一行 PushBut

33、ton1-gtsetEnabled FALSE 這一行就把 PushButton1 設(shè)置為不可使用了 . 如果需要 PushButton1 可以 正常的被 Click 那麼只要用 PushButton1-gtsetEnabledTRUE 就 可以了 . 提示 最常用的作法通常是做出一個(gè) SLOT 或者一個(gè)判 斷語(yǔ)句來(lái)設(shè)定 PushButton 的狀態(tài) .QPushButton 還有一各場(chǎng)常 被用到的功能就是 Font (字體的設(shè)定 在 QT 中我們通過(guò) QFont 可以設(shè)定字體的大小種類 . 在 QT Designer 中的 Property Edit 中 . 有一個(gè) Font 的選項(xiàng) . 我

34、們?cè)?Font 后面的那個(gè) . 上面按一下就會(huì)出現(xiàn)一個(gè)可以選擇 font 的 window. 這里我們以 Courieradobe 24 號(hào)字為例子.選擇后 Save 然后觀察重新用 uic 生成的 .cpp 程序碼. 我們會(huì)發(fā)現(xiàn)主程式中多出了下面這些程式 碼QFont PushButton1_font PushButton1-gtfont PushButton1_font.setFamily quotadobe-courierquot PushButton1_font.setPointSize 24 PushButton1-gtsetFont PushButton1_font 后 面 還 多

35、 出 一 個(gè) bool Form1:event QEvent ev . 這 里 我 們 先 不 要 去 理 會(huì) boolForm1:event QEvent ev 只看下面這四行就好了1. QFont PushButton1_font PushButton1-gtfont 2. PushButton1_font.setFamily quotadobe-courierquot 3. PushButton1_font.setPointSize 24 4. PushButton1-gtsetFont PushButton1_font 第一行是用 QFont 生成 PushButton1_font. PushButton1_font 是為了給 PushButton1 做字體設(shè)定第二行是 告訴 PushButton1_font 使用那種字型. 我們這里使用的是 adobe-courier 第三行用了 setPointSize 設(shè)定了我們需要用到 多大的字這里我們用的是 24 號(hào)字.第四行就真正的把這