QT Designer 入门学习-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 入门学习的内容介绍完了希望本文对你有所帮助。