QT Designer 入門學習
QT Designer 入門學習是本篇文章要介紹的內容，這篇文章只是對QT的一個入門介紹.如果您有興趣認識一下QT這種語言,那么這篇文章就很適合您了.。
這里只是告訴大家一種如何快速學習QT的方法.這里也只對QT Designer 和QT作一個簡單的介紹.讓沒有寫過QT的人能對QT有一個初步的認識.如果您真的對QT Programming很有興趣.這里我建議您去看看O'REILY出版的Programming with QT和Bible出版的KDE 2 /QT Programming.這兩本書將會給您帶來一個好的開始.
如果您對C++能有一些的了解,那么您將會很輕松的看完這篇文章.如果您什么程式語言也沒有學過.但也想一窺QT的容貌.那么也沒有關系.這里都是些非常間單的東西.也需會成為您學習寫程式的一個起點.
如果您本身已經在開發、學習QT/KDE或者Xwindow有關的程式設計.那就只能當是打發時間看看玩了.這篇短短的文章沒有寫到很多的東西.對于這些高手們,我唯一能提共的一個經驗就是多多去看 $QTDIR/include 下面的東西.
1.什么是QT.
用Linux的人,一定都知道QT是什么.而利用QT編譯出來的KDE桌面系統, 更是讓Linux有了一次能和Windows的GUI相媲美的機會.甚至有人說, KDE 的桌面在圖形上,還勝過了Windows95了.那么QT到底是什么呢？其實QT 就是基于C++語言上的一種專門用來開發GUI介面的程式.這里面包括了： button; label; frame ...等等很多的可以直接調用的東西.
2.為什么選擇QT
2.1 QT是基于C++的一種語言
相信C/C++目前還是一種很多人都在學習的語言. QT的好處就在于QT本身可以被稱作是一種C++的延伸. QT中有數百個class都是用C++寫出來的. 這也就是說, QT本身就具備了C++的快速、簡易、Object-Oriented Programming （OOP）等等無數的優點.
2.2 QT具有非常好的可移植性（Portable）
QT不只是可以在Linux中運作.也同樣可以運行在Microsoft Windows中.這也就意味者,利用QT編寫出來的程式,在幾乎不用修改的情況下,就可以同時在Linux 中和Microsoft Windows中運行. QT的應用非常之廣泛,從Linux到Windows從x86到Embedded都有QT的影子.
3.什么是QT Designer
簡單的來說QT Designer是一個GUI的工具.這個工具可以幫助我們來加快寫QT程式的速度.利用QT Designer可以用一種所見既所得的方式,來產生QT程式的GUI介面的程式碼.通過增加一些功能,就可以完成一個程式了.利用QT Designer 可以非常快速的學會QT,而我們這里說利用QT Designer來學習QT而不是利用QT Designer來寫QT,這里的區別就在于, QT Designer所產生的程式碼有些繁瑣.跑起來也比較的慢些.我們這里只是利用QT Designer來幫助我們學習.而不是直接去跑QT Designer生成的程式碼.
3.基本要求
因為這篇文章主要是告訴大家如何利用QT Design來達到快速學習QT的. 所以您最也要做到：
您需要有一臺可以跑Linux的電腦或者Microsoft Windows的電腦足夠的RAM和HardDisk用以安裝、編譯QT您的Linux中需要安裝有KDE、QT、QT Designer、g++等等程式. 您如果適用Microsoft Windows,則您需要VC++和QT For Windows Linux的使用者最好還能安裝一個Kdevelop（一個非常好的用來開發QT的Develop Enverment）
4. QT Designer
簡單的介紹--從PushButton開始
假設您一切都安裝好了.現在我們打開QT Designer吧.打開后,選擇New -> Dialog這時侯,您的QT Designer中就會出現一個From1來.現在我們click一下上面的tools中的那個pushbutton, (標有OK的圖標）并且用mouse選擇到一定的大小.在這個pushbutton 上面用您的mouse double click一下.我們就可以改變pushbutton的label了.這里我們把pushbutton1這幾個字,換成Exit,然后直接按Enter或者用mouse選擇OK也可以.
現在我們看到,那個button中的標簽已將變成Exit了.我們這時侯還需要給這個Exit Button一個signal（信號）,這樣當您在Exit這個Button上click的時侯. QT才知道如何去處理這個信號.我們按一下F3（connect singnal slot）然后在那個Exit Button上面Click一下.這時侯我們就看到了Edit Connection的Dialog了.在Signal中選擇clicked,在slot中,先選擇setFocus()就好了.這時侯選擇OK.我們就算是完成了.如果想看看這個小程式長什么樣子. 可以用CTRL+T來看PreView. (see figure 1)
- figure 1
首先在您的$HOME中建立一個qt_program的Directory出來.這個Directory將會作為我們存放文件的地方.現在我們用File -> Save把這個文件存為form1.ui放在$HOME/qt_program的目錄下.現在如果大家打開form1.ui來看一看.會發現那是一堆有很多<tag&g;的不知道是什么的東西.所以我們需要用一個叫做uic的程式來把.ui文件轉換成QT可以使用的.cpp和.h文件. 用下面的指令就可以生成我們需要的.h文件了
- uic -o form1.h form1.ui 而生成.cpp文件則需要用以下的指令：
- uic -i form1.h -o form1.cpp form1.ui
這時侯,form1.h中就會看到一個標準的QT需要的.h文件
- #ifndef FORM1_H
- #define FORM1_H
- #include <qvariant.h>
- #include <qdialog.h>
- class QVBoxLayout;
- class QHBoxLayout;
- class QGridLayout;
- class QPushButton;
- class Form1 : public QDialog
- {
- Q_OBJECT
- public:
- Form1( QWidget* parent = 0, const char* name = 0, bool modal = FALSE, WFlags fl = 0 );
- ~Form1();
- QPushButton* PushButton1;
- };
- #endif // FORM1_H
注釋：
1-2:定義FORM1.H這個文件
3-4:這里是我們需要用到的兩個.h文件
5-7:我們根本用不到, qt designer自己產生的
8: QPushButton需要用到這個class
9-11:我們的form1是based在QDialog上面的
12:公開的（可以在以后的程式中使用.用過C++的人一定明白）
13: Form1的架構
14:清除Form1
15:產生一個pushbutton （就是那個標有exit的按鈕
17:結束對FORM1.H的定義
而form1.cpp文件如下:
- #include "form1.h"
- #include <qpushbutton.h>
- #include <qlayout.h>
- #include <qvariant.h>
- #include <qtooltip.h>
- #include <qwhatsthis.h>
- /*
- * Constructs a Form1 which is a child of 'parent', with the
- * name 'name' and widget flags set to 'f'
- *
- * The dialog will by default be modeless, unless you set 'modal' to
- * TRUE to construct a modal dialog.
- */
- Form1::Form1( QWidget* parent, const char* name, bool modal, WFlags fl )
- : QDialog( parent, name, modal, fl )
- {
- if ( !name )
- setName( "Form1" );
- resize( 596, 480 );
- setCaption( tr( "Form1" ) );
- PushButton1 = new QPushButton( this, "PushButton1" );
- PushButton1->setGeometry( QRect( 130, 160, 161, 71 ) );
- PushButton1->setText( tr( "Exit" ) );
- // signals and slots connections
- connect( PushButton1, SIGNAL( clicked() ), PushButton1, SLOT( setFocus() ) );
- }
- /*
- Destroys the object and frees any allocated resources
- */
- Form1::~Form1()
- {
- // no need to delete child widgets, Qt does it all for us
- }
注釋：
1:我們上面的定義文件
2: pushbutton所需要的.h文件
3-6:我們根本用不到, qt designer自己產生的
7-13: QT Designer產生的注解
14-15: Form1的結構
17-18:如果Form1:Form1中沒有pass一個名子過來.那么就命名為Form1
19: resize
20:把顯示出來的那個Dialog的名子定為Form1,也就是window中左上角的字
21:做出一個新的button,名子為PushButton1
22:這里設定了pushbutton在這個dialog中的位置. Qrect(130, 160, 161, 71)這里是說在一個Dialog中,以左邊最上面來算,位置是(0,0),所以說,這里的130（橫向）和160 （縱向）就是說我們從(0,0)開始,往左邊跑130,往下跑160.這樣我們就算出了pushbutton這個按鈕畫在那里了.后面的161, 71則是定義這個pushbutton到底要畫多大,設定了長和高
23:通過呼叫setText指令,我們可以在這個button上面給入我們需要的文字.這里是Exit
24: QT Designer產生的注解
25:上面就是處理當接收到clicked的信號（singal）以后,我們所作的事情（setFocus on PushButton1)
connect這里是告訴程式連接一個信號,PushButton1, SIGNAL(clicked()),是說信號是由PushButton1發出, 發出的信號為mouse clicked,PushButton1, SLOT(setFocus())表示信號發出以后,目標（Object）為PushButton, event是setFocus()動作
#p#
26:主程式結束
- 27-29: QT Designer的注解
- 30-33:清除Form1
由于我們要常常用到QT Designer,也就是說,需要常常用到uic這只程式.為了省去每次都要打一堆東西的麻煩.我們來寫一各小script來處理.ui檔案. 不難看出, uic在處理/生成.h .cpp檔案的時侯,用到了兩個指令：
- uic -o form1.h form1.ui
- uic -i form1.h -o form1.cpp form1.ui
所以我們的script就寫成：
- #!/bin/sh
- # myuic program convert .ui to .cpp .h by calling uic
- # INPUT_UI=$@
- #這里讀取外面傳回來的文件名
- # if [ ! -f "$INPUT_UI" ]
- then
- echo "UIC File $INPUT_UI Not Found"
- echo
- echo "Userage myuic input_file.ui"
- echo
- exit 1
- fi
上面的語句檢查我們所輸入的.ui文件是否存在
如果找不到指定的.ui文件,則顯示一個簡短的#
使用說明
- # INPUT_H=`echo $@ | cut -d '.' -f1`.h #
這里我們利用cut來處理輸入的.ui文件.
得到一個.h的文件名
- # INPUT_CPP=`echo $@ | cut -d '.' -f1`.cpp #
同樣的道理,利用cut產生一個.cpp的文件名
- # uic -o $INPUT_H $INPUT_UI #
這里就是利用.ui產生.h的文件
- # uic -i $INPUT_H -o $INPUT_CPP $INPUT_UI #
利用.h和.ui產生.cpp文件.
# 我門把這個文件存為myuic.并切chmod +x變成可執行檔案. 然后cp到/usr/bin上面.如果您在電腦中沒有root的權限. 可以在自己的$HOME目錄中做一個bin的Directory出來.
然后去編輯您的.bash_profile （這里假設您用的是bash） 如果您的.bash_profile中本身已經有了PATH這段文字,那么您只要在原本的PATH后面加上:$HOME/bin就可以了.如果沒有那么就在您的.bash_profile中寫入：
- PATH=$PATH:$HOME/bin
- export PATH
這樣您以后就可以直接執行myuic這個文件了.現在試試看用myuic來處理剛剛的那個form1.ui這個文件吧.先把舊的.h .cpp都刪除掉：
- rm -f *.cpp *.h
然后用myuic來生成新的.cpp .h文件：
- myuic form1.ui
這時候用ls就會看到form1.cpp form1.h form1.ui這三個文件了
這時侯我們只需要寫一個小的main.cpp就可以編譯form1.cpp了.
main.cpp非常的簡單
- #include "form1.h"
- #include <kapp.h>
- int main(int argc, char **argv)
- {
- KApplication app(argc, argv, "Form1"); //KDE是建立在QT的基礎上得所以KApplication
- //所以kapp.h實際上包含了qapplication.h
- Form1 *form1=new Form1();
- form1->show();
- app.setMainWidget(form1);
- return(app.exec());
- }
基本上來說,很簡單.然后當然就是編譯啦.我建議寫出來的東西都用Kdevelop來解決.首先Kdevelop介面非常的友善.又能省下寫Makefile的麻煩.打開Kdevelop以后,選擇項目->新建, KDE2-Normal, 然后選擇Next,在這一頁中.注意不要在任何選項中打"x",因為我們用不到.反而會增加麻煩.最后一直next,然后create , exit.這時侯我們就已經有一個新的項目可以用了.在menu中選擇:
項目->添加現存文件.然后把qt_program中的form1.cpp form1.h和main.cpp加入.這時候只要按一下F9 , Kdevelop就會自動幫您把程式compile出來.并且執行.程式執行后,我們不能用click那個
Exit Button退出程式.因為我們并沒有給他退出的信號.現在讓我們來把程式碼作些改動：
- #form1.h
- #ifndef FORM1_H
- #define FORM1_H
- #include <qdialog.h>
- class QPushButton;
- class Form1 : public QDialog
- {
- Q_OBJECT
- public:
- Form1(QWidget *parent=0, const char *name=0);
- QPushButton* PushButton1;
- };
- #endif // FORM1_H
- #form1.cpp
- #include "form1.h"
- #include <qpushbutton.h>
- #include <kapp.h>
- Form1::Form1(QWidget* parent, const char* name): QDialog(parent, name)
- {
- setCaption(tr("Form21"));
- PushButton1=new QPushButton(this,"PushButton1");
- PushButton1->setGeometry(QRect(130160161,71));
- PushButton1-vsetText(tr("Exit"));
- connect(PushButton1, SIGNAL(clicked()), kapp, SLOT(quit()));
- }
- Form1::~Form1(){}
main.cpp保持不變.經過一番簡化.程式碼馬上簡單很多了. 這里我們除了把一些由QT Design做出的不必要的code挑除以外.對form1.cpp 做了兩個小改動.
1.增加了#include <kapp.h>這個head file.
2.我們把：
- connect(PushButton1, SIGNAL(clicked()), PushButton1, SLOT(setFocus()));
- 改變為
- connect(PushButton1, SIGNAL(clicked()), kapp, SLOT(quit()));
同樣的信號傳送,但是目標對象有所改變.現在目標將作用在kapp上面也就是我們的主程式（main application）,而SLOT則是呼叫quit(),現在Kdevelop中更改程式碼.然后按下F9 .等待程式運行.這時侯我們的程式,只要在那個Exit的Button 上面用mouse click一下.這個程式就完全關閉了.
現在我們在這個PushButton中再增加一些功能.我們來看看QT Designer中的ToolTip 功能.如果您的QT Designer中Property Edit并沒有自動出現.那么請在QT Designer 中選擇Menu中的Windows然后選擇Property Edit.只要在PushButton1那個Button 上面用mouse click一下.就可以對Pushbutton1的Property進行編輯.在Pro。
小結：QT Designer 入門學習的內容介紹完了希望本文對你有所幫助。
