QT Designer 使用入门例子

前面：
这里只是告诉大家一种如何快速学习QT的方法.这里也只对QT Designer 和QT作一个简单的介绍.让没有写过QT的人能对QT有一个初步的认识.如果您真的对QT Programming很有兴趣.这里我建议您去看看O'REILY出版的Programming with QT和Bible出版的KDE 2 /QT Programming.这两本书将会给您带来一个好的开始.

这篇文章适合您吗？

这篇文章只是对QT的一个入门介绍.如果您有兴趣认识一下QT这种语言,那么这篇文章就很适合您了.
如果您对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文件

1. #ifndef FORM1_H
2. #define FORM1_H

3. #include <qvariant.h>
4. #include <qdialog.h>

5. class QVBoxLayout;
6. class QHBoxLayout;
7. class QGridLayout;
8. class QPushButton;

9. class Form1 : public QDialog
10. {
11. Q_OBJECT
12. public:
13. Form1( QWidget* parent = 0, const char* name = 0, bool modal = FALSE, WFlags fl = 0 );
14. ~Form1();
15. QPushButton* PushButton1;
16. };
17. #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文件如下:

1. #include "form1.h"

2. #include <qpushbutton.h>
3. #include <qlayout.h>
4. #include <qvariant.h>
5. #include <qtooltip.h>
6. #include <qwhatsthis.h>

7. /*
8. * Constructs a Form1 which is a child of 'parent', with the
9. * name 'name' and widget flags set to 'f'
10. *
11. * The dialog will by default be modeless, unless you set 'modal' to
12. * 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( "Form1" );
19. resize( 596, 480 );
20. setCaption( tr( "Form1" ) );

21. PushButton1 = new QPushButton( this, "PushButton1" );
22. PushButton1->setGeometry( QRect( 130, 160, 161, 71 ) );
23. PushButton1->setText( tr( "Exit" ) );
24. // signals and slots connections
25. connect( PushButton1, SIGNAL( clicked() ), PushButton1, SLOT( setFocus() ) );
26. }

27. /*
28. * Destroys the object and frees any allocated resources
29. */
30. Form1::~Form1()
31. {
32. // no need to delete child widgets, Qt does it all for us
33. }

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()动作
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