QT Designer 入门学习

移动开发
如果您对C++能有一些的了解,那么您将会很轻松的看完这篇文章.如果您什么程式语言也没有学过.但也想一窥QT的容貌.那么也没有关系.这里都是些非常间单的东西.也需会成为您学习写程式的一个起点.

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)

  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文件了

  1. uic -o form1.h form1.ui 而生成.cpp文件则需要用以下的指令:   
  2. 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   

注释:

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:主程式结束

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

由于我们要常常用到QT Designer,也就是说,需要常常用到uic这只程式.为了省去每次都要打一堆东西的麻烦.我们来写一各小script来处理.ui档案. 不难看出, uic在处理/生成.h .cpp档案的时侯,用到了两个指令:

  1. uic -o form1.h form1.ui   
  2. uic -i form1.h -o form1.cpp form1.ui 

所以我们的script就写成:

  1. #!/bin/sh   
  2. # myuic program convert .ui to .cpp .h by calling uic   
  3. INPUT_UI=$@   
  4. #这里读取外面传回来的文件名  
  5.  
  6. # if [ ! -f "$INPUT_UI" ]   
  7. then   
  8. echo "UIC File $INPUT_UI Not Found"   
  9. echo   
  10. echo "Userage myuic input_file.ui"   
  11. echo   
  12. exit 1   
  13. fi  

上面的语句检查我们所输入的.ui文件是否存在

如果找不到指定的.ui文件,则显示一个简短的#

使用说明

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

这里我们利用cut来处理输入的.ui文件.

得到一个.h的文件名

  1. INPUT_CPP=`echo $@ | cut -d '.' -f1`.cpp #  

同样的道理,利用cut产生一个.cpp的文件名

  1. # uic -o $INPUT_H $INPUT_UI #  

这里就是利用.ui产生.h的文件

  1. # 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中写入:

  1. PATH=$PATH:$HOME/bin   
  2. export PATH 

这样您以后就可以直接执行myuic这个文件了.现在试试看用myuic来处理刚刚的那个form1.ui这个文件吧.先把旧的.h .cpp都删除掉:

  1. rm -f *.cpp *.h  

然后用myuic来生成新的.cpp .h文件:

  1. myuic form1.ui  

这时候用ls就会看到form1.cpp form1.h form1.ui这三个文件了

这时侯我们只需要写一个小的main.cpp就可以编译form1.cpp了.

main.cpp非常的简单

  1. #include "form1.h"   
  2. #include <kapp.h> 
  3. int main(int argc, char **argv)   
  4. {   
  5. KApplication app(argc, argv, "Form1"); //KDE是建立在QT的基础上得所以KApplication   
  6.        //所以kapp.h实际上包含了qapplication.h   
  7. Form1 *form1=new Form1();   
  8. form1->show();   
  9. app.setMainWidget(form1);   
  10. 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退出程式.因为我们并没有给他退出的信号.现在让我们来把程式码作些改动:

 

  1. #form1.h   
  2. #ifndef FORM1_H   
  3. #define FORM1_H   
  4. #include <qdialog.h>   
  5. class QPushButton;   
  6. class Form1 : public QDialog   
  7. {   
  8.      Q_OBJECT   
  9. public:   
  10.      Form1(QWidget *parent=0, const char *name=0);   
  11.      QPushButton* PushButton1;   
  12. };   
  13. #endif // FORM1_H 
  1. #form1.cpp   
  2. #include "form1.h"   
  3. #include <qpushbutton.h>   
  4. #include <kapp.h>   
  5. Form1::Form1(QWidget* parent, const char* name): QDialog(parent, name)   
  6. {   
  7.      setCaption(tr("Form21"));   
  8.      PushButton1=new QPushButton(this,"PushButton1");   
  9.      PushButton1->setGeometry(QRect(130160161,71));   
  10.      PushButton1-vsetText(tr("Exit"));   
  11.      connect(PushButton1, SIGNAL(clicked()), kapp, SLOT(quit()));   
  12. }   
  13. Form1::~Form1(){} 

main.cpp保持不变.经过一番简化.程式码马上简单很多了. 这里我们除了把一些由QT Design做出的不必要的code挑除以外.对form1.cpp 做了两个小改动.

1.增加了#include <kapp.h>这个head file.

2.我们把:

  1. connect(PushButton1, SIGNAL(clicked()), PushButton1, SLOT(setFocus()));   
  2. 改变为  
  3. 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 入门学习的内容介绍完了希望本文对你有所帮助。

责任编辑:zhaolei 来源: 互联网
相关推荐

2011-07-04 11:21:59

QT Designer

2011-07-04 13:17:18

Qt Designer 布局

2011-07-04 13:26:30

Qt Designer

2011-07-04 13:08:26

Qt Designer

2011-06-13 14:29:40

Qt Designer

2011-06-27 14:56:46

Qt Designer

2011-06-10 11:24:08

Qt Quick Designer

2011-06-27 16:07:49

Qt Designer

2009-06-22 13:15:00

NetBeans XS

2011-06-27 16:37:08

Qt Designer

2011-06-27 16:18:24

Qt Designer

2011-06-28 17:13:46

Qt Designer UI

2011-06-13 15:09:36

插件 Qt Designer

2011-06-28 14:02:34

QT ARM

2011-06-13 14:00:55

Qt Designer linux

2011-06-13 14:49:57

Qt Designer

2011-06-20 15:52:14

Qt Designer 控件

2011-07-04 14:29:25

Qt Designer 容器

2011-07-01 17:12:44

Qt OpenGL

2011-08-30 15:32:08

QtQuickQML
点赞
收藏

51CTO技术栈公众号