QT Designer 入門學(xué)習(xí)

作者：佚名 2011-07-04 11:29:40

如果您對(duì)C++能有一些的了解,那么您將會(huì)很輕松的看完這篇文章.如果您什么程式語(yǔ)言也沒(méi)有學(xué)過(guò).但也想一窺QT的容貌.那么也沒(méi)有關(guān)系.這里都是些非常間單的東西.也需會(huì)成為您學(xué)習(xí)寫程式的一個(gè)起點(diǎn).

QT Designer 入門學(xué)習(xí)是本篇文章要介紹的內(nèi)容，這篇文章只是對(duì)QT的一個(gè)入門介紹.如果您有興趣認(rèn)識(shí)一下QT這種語(yǔ)言,那么這篇文章就很適合您了.。

這里只是告訴大家一種如何快速學(xué)習(xí)QT的方法.這里也只對(duì)QT Designer 和QT作一個(gè)簡(jiǎn)單的介紹.讓沒(méi)有寫過(guò)QT的人能對(duì)QT有一個(gè)初步的認(rèn)識(shí).如果您真的對(duì)QT Programming很有興趣.這里我建議您去看看O'REILY出版的Programming with QT和Bible出版的KDE 2 /QT Programming.這兩本書將會(huì)給您帶來(lái)一個(gè)好的開(kāi)始.

如果您本身已經(jīng)在開(kāi)發(fā)、學(xué)習(xí)QT/KDE或者Xwindow有關(guān)的程式設(shè)計(jì).那就只能當(dāng)是打發(fā)時(shí)間看看玩了.這篇短短的文章沒(méi)有寫到很多的東西.對(duì)于這些高手們,我唯一能提共的一個(gè)經(jīng)驗(yàn)就是多多去看 $QTDIR/include 下面的東西.

1.什么是QT.

用Linux的人,一定都知道QT是什么.而利用QT編譯出來(lái)的KDE桌面系統(tǒng), 更是讓Linux有了一次能和Windows的GUI相媲美的機(jī)會(huì).甚至有人說(shuō), KDE 的桌面在圖形上,還勝過(guò)了Windows95了.那么QT到底是什么呢？其實(shí)QT 就是基于C++語(yǔ)言上的一種專門用來(lái)開(kāi)發(fā)GUI介面的程式.這里面包括了： button; label; frame ...等等很多的可以直接調(diào)用的東西.

2.為什么選擇QT

2.1 QT是基于C++的一種語(yǔ)言

相信C/C++目前還是一種很多人都在學(xué)習(xí)的語(yǔ)言. QT的好處就在于QT本身可以被稱作是一種C++的延伸. QT中有數(shù)百個(gè)class都是用C++寫出來(lái)的. 這也就是說(shuō), QT本身就具備了C++的快速、簡(jiǎn)易、Object-Oriented Programming （OOP）等等無(wú)數(shù)的優(yōu)點(diǎn).

2.2 QT具有非常好的可移植性（Portable）

QT不只是可以在Linux中運(yùn)作.也同樣可以運(yùn)行在Microsoft Windows中.這也就意味者,利用QT編寫出來(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)加快寫QT程式的速度.利用QT Designer可以用一種所見(jiàn)既所得的方式,來(lái)產(chǎn)生QT程式的GUI介面的程式碼.通過(guò)增加一些功能,就可以完成一個(gè)程式了.利用QT Designer 可以非常快速的學(xué)會(huì)QT,而我們這里說(shuō)利用QT Designer來(lái)學(xué)習(xí)QT而不是利用QT Designer來(lái)寫QT,這里的區(qū)別就在于, QT Designer所產(chǎn)生的程式碼有些繁瑣.跑起來(lái)也比較的慢些.我們這里只是利用QT Designer來(lái)幫助我們學(xué)習(xí).而不是直接去跑QT Designer生成的程式碼.

3.基本要求

因?yàn)檫@篇文章主要是告訴大家如何利用QT Design來(lái)達(dá)到快速學(xué)習(xí)QT的. 所以您最也要做到：

您需要有一臺(tái)可以跑Linux的電腦或者M(jìn)icrosoft Windows的電腦足夠的RAM和HardDisk用以安裝、編譯QT您的Linux中需要安裝有KDE、QT、QT Designer、g++等等程式. 您如果適用Microsoft Windows,則您需要VC++和QT For Windows Linux的使用者最好還能安裝一個(gè)Kdevelop（一個(gè)非常好的用來(lái)開(kāi)發(fā)QT的Develop Enverment）

4. QT Designer

簡(jiǎn)單的介紹--從PushButton開(kāi)始

假設(shè)您一切都安裝好了.現(xiàn)在我們打開(kāi)QT Designer吧.打開(kāi)后,選擇New -> 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或者用mouse選擇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í)侯選擇OK.我們就算是完成了.如果想看看這個(gè)小程式長(zhǎng)什么樣子. 可以用CTRL+T來(lái)看PreView. (see figure 1)

figure 1

首先在您的$HOME中建立一個(gè)qt_program的Directory出來(lái).這個(gè)Directory將會(huì)作為我們存放文件的地方.現(xiàn)在我們用File -> Save把這個(gè)文件存為form1.ui放在$HOME/qt_program的目錄下.現(xiàn)在如果大家打開(kāi)form1.ui來(lái)看一看.會(huì)發(fā)現(xiàn)那是一堆有很多<tag&g;的不知道是什么的東西.所以我們需要用一個(gè)叫做uic的程式來(lái)把.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文件

#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這個(gè)文件
3-4:這里是我們需要用到的兩個(gè).h文件
5-7:我們根本用不到, qt designer自己產(chǎn)生的
8: QPushButton需要用到這個(gè)class
9-11:我們的form1是based在QDialog上面的
12:公開(kāi)的（可以在以后的程式中使用.用過(guò)C++的人一定明白）
13: Form1的架構(gòu)
14:清除Form1
15:產(chǎn)生一個(gè)pushbutton （就是那個(gè)標(biāo)有exit的按鈕
17:結(jié)束對(duì)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自己產(chǎn)生的

7-13: QT Designer產(chǎn)生的注解

14-15: Form1的結(jié)構(gòu)

17-18:如果Form1:Form1中沒(méi)有pass一個(gè)名子過(guò)來(lái).那么就命名為Form1

19: resize

20:把顯示出來(lái)的那個(gè)Dialog的名子定為Form1,也就是window中左上角的字

21:做出一個(gè)新的button,名子為PushButton1

22:這里設(shè)定了pushbutton在這個(gè)dialog中的位置. Qrect(130, 160, 161, 71)這里是說(shuō)在一個(gè)Dialog中,以左邊最上面來(lái)算,位置是(0,0),所以說(shuō),這里的130（橫向）和160 （縱向）就是說(shuō)我們從(0,0)開(kāi)始,往左邊跑130,往下跑160.這樣我們就算出了pushbutton這個(gè)按鈕畫在那里了.后面的161, 71則是定義這個(gè)pushbutton到底要畫多大,設(shè)定了長(zhǎng)和高

23:通過(guò)呼叫setText指令,我們可以在這個(gè)button上面給入我們需要的文字.這里是Exit

24: QT Designer產(chǎn)生的注解

25:上面就是處理當(dāng)接收到clicked的信號(hào)（singal）以后,我們所作的事情（setFocus on PushButton1)

connect這里是告訴程式連接一個(gè)信號(hào),PushButton1, SIGNAL(clicked()),是說(shuō)信號(hào)是由PushButton1發(fā)出, 發(fā)出的信號(hào)為mouse clicked,PushButton1, SLOT(setFocus())表示信號(hào)發(fā)出以后,目標(biāo)（Object）為PushButton, event是setFocus()動(dòng)作

#p#

26:主程式結(jié)束

27-29: QT Designer的注解  
30-33:清除Form1

由于我們要常常用到QT Designer,也就是說(shuō),需要常常用到uic這只程式.為了省去每次都要打一堆東西的麻煩.我們來(lái)寫一各小script來(lái)處理.ui檔案. 不難看出, uic在處理/生成.h .cpp檔案的時(shí)侯,用到了兩個(gè)指令：

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=$@   
#這里讀取外面?zhèn)骰貋?lái)的文件名  
 
# if [ ! -f "$INPUT_UI" ]   
then   
echo "UIC File $INPUT_UI Not Found"   
echo   
echo "Userage myuic input_file.ui"   
echo   
exit 1   
fi

上面的語(yǔ)句檢查我們所輸入的.ui文件是否存在

如果找不到指定的.ui文件,則顯示一個(gè)簡(jiǎn)短的#

使用說(shuō)明

# INPUT_H=`echo $@ | cut -d '.' -f1`.h #

這里我們利用cut來(lái)處理輸入的.ui文件.

得到一個(gè).h的文件名

# INPUT_CPP=`echo $@ | 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文件.

# 我門把這個(gè)文件存為myuic.并切chmod +x變成可執(zhí)行檔案. 然后cp到/usr/bin上面.如果您在電腦中沒(méi)有root的權(quán)限. 可以在自己的$HOME目錄中做一個(gè)bin的Directory出來(lái).

然后去編輯您的.bash_profile （這里假設(shè)您用的是bash）如果您的.bash_profile中本身已經(jīng)有了PATH這段文字,那么您只要在原本的PATH后面加上:$HOME/bin就可以了.如果沒(méi)有那么就在您的.bash_profile中寫入：

PATH=$PATH:$HOME/bin   
export PATH

這樣您以后就可以直接執(zhí)行myuic這個(gè)文件了.現(xiàn)在試試看用myuic來(lái)處理剛剛的那個(gè)form1.ui這個(gè)文件吧.先把舊的.h .cpp都刪除掉：

rm -f *.cpp *.h

然后用myuic來(lái)生成新的.cpp .h文件：

myuic form1.ui

這時(shí)候用ls就會(huì)看到form1.cpp form1.h form1.ui這三個(gè)文件了

這時(shí)侯我們只需要寫一個(gè)小的main.cpp就可以編譯form1.cpp了.

main.cpp非常的簡(jiǎn)單

#include "form1.h"   
#include <kapp.h> 
int main(int argc, char **argv)   
{   
KApplication app(argc, argv, "Form1"); //KDE是建立在QT的基礎(chǔ)上得所以KApplication   
       //所以kapp.h實(shí)際上包含了qapplication.h   
Form1 *form1=new Form1();   
form1->show();   
app.setMainWidget(form1);   
return(app.exec());   
}

基本上來(lái)說(shuō),很簡(jiǎn)單.然后當(dāng)然就是編譯啦.我建議寫出來(lái)的東西都用Kdevelop來(lái)解決.首先Kdevelop介面非常的友善.又能省下寫Makefile的麻煩.打開(kāi)Kdevelop以后,選擇項(xiàng)目->新建, KDE2-Normal, 然后選擇Next,在這一頁(yè)中.注意不要在任何選項(xiàng)中打"x",因?yàn)槲覀冇貌坏?反而會(huì)增加麻煩.最后一直next,然后create , exit.這時(shí)侯我們就已經(jīng)有一個(gè)新的項(xiàng)目可以用了.在menu中選擇:

項(xiàng)目->添加現(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.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保持不變.經(jīng)過(guò)一番簡(jiǎn)化.程式碼馬上簡(jiǎn)單很多了. 這里我們除了把一些由QT Design做出的不必要的code挑除以外.對(duì)form1.cpp 做了兩個(gè)小改動(dòng).

1.增加了#include <kapp.h>這個(gè)head file.

2.我們把：

connect(PushButton1, SIGNAL(clicked()), PushButton1, SLOT(setFocus()));   
改變?yōu)? 
connect(PushButton1, SIGNAL(clicked()), kapp, SLOT(quit()));

同樣的信號(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中的ToolTip 功能.如果您的QT Designer中Property Edit并沒(méi)有自動(dòng)出現(xiàn).那么請(qǐng)?jiān)?strong>QT Designer 中選擇Menu中的Windows然后選擇Property Edit.只要在PushButton1那個(gè)Button 上面用mouse click一下.就可以對(duì)Pushbutton1的Property進(jìn)行編輯.在Pro。

小結(jié)：QT Designer 入門學(xué)習(xí)的內(nèi)容介紹完了希望本文對(duì)你有所幫助。

責(zé)任編輯：zhaolei 來(lái)源：互聯(lián)網(wǎng)