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 入門學習的內容介紹完了希望本文對你有所幫助。