Qt Designer入门教程 初学者必看

移动开发
在Linux下,一个非常流行的RAD工具就是Qt Designer。它是嵌入式公司 Trolltech的Qt软件包的一个组成部分。

Qt Designer入门教程 初学者必看是本文要介绍的内容,不说这么多,。直接进入正题。RAD (快速应用程序开发)是一种高效的软件开发形式,可以让用户在极短的时间里创建一个图形化的用户界面。通常情况下,在一张空白的表单上,开发人员可以通过 拖拉或点击的方式,在窗口的适当位置上添加一些输入框和按钮等窗口组件。这时,RAD工具会自动编写和维护代码。而用户所要做的只是确定当点击按钮或选择 选单选项时将要发生什么事件。

Linux下,一个非常流行的RAD工具就是Qt Designer。它是嵌入式公司 Trolltech的Qt软件包的一个组成部分。如果用户使用的是KDE桌面,那么Qt已经自动安装上了,Qt Designer也很有可能已经被安装 好。如果用户的系统没有安装,那么针对不同的版本,可以很方便地找到KDE Development Tools,并安装之。以Red Hat 9.0为 例,用户可以从主选单→系统设置→添加/删除应用程序中选择KDE软件开发,即可完成Qt Designer的安装(如图1所示)。

Qt Designer入门教程 初学者必看

图1 安装Qt Designer

创建

为了快速地向大家展示一下Qt Designer功能,先创建一个简单的摄氏温度和华氏温度的转换程序。本文里将设计一个简单的GUI,并且添加一些简单的代码来实现温度的转换。因为是 为了展示一下快速的开发过程,而不是一个严谨的软件项目的开发,所以这里不会进行任何的错误检查,也不进行输入检验(也就是检查用户的输入是否为合法的温 度形式)、缓冲溢出检查等在日常软件开发中一定要做的步骤。

如果用户使用的是KDE,那么选单上应该已经有Qt Designer的图标。不同的发行版,图标的位置会有所不同。如果用户的发行版没有Qt Designer图标,那么可以在命令行模式下输入“designer”命令来启动该开发工具。在Red Hat 9.0中,可以通过点击主选单→编程→更多编程工具→Qt Designer来启动(如图2)。

Qt Designer入门教程 初学者必看

图2 启动Qt Designer

Qt Designer首先呈现给用户的是一个New/Open对话框(如图3所示)。因为这里要创建一个C++程序,所以在此选择C++ Project,点击“OK”继续。

Qt Designer入门教程 初学者必看

图3 New/Open对话框

选择一个想要保存文件的位置,并且给出一个文件名,在此使用的文件名是cfconv。注意这里文件名的扩展名一定要是.pro。点击“Save”后,返回到了Project Settings对话框(见图4)。

Qt Designer入门教程 初学者必看

图4 保存文件

#p#

Qt Designer入门教程 初学者必看

图5 Qt Designer主窗口

现在就已经在Qt Designer主窗口上了(见图5),确保Property Editor可见。如果它是不可见的,用户可以通过Windows→Views→Property Editor/Signal Handlers选单选项来使其可见(缺省情况下是可见的)。

Qt Designer入门教程 初学者必看

图6 创建一个新的表单

Qt Designer入门教程 初学者必看

图7 更改表单的属性

通过选择File→New选单,然后选择Dialog来创建一个新的对话框。这时Qt Designer会创建一个新的空白表单(见图6),用户可以在其上放置输入框和按钮。

打开Property Editor(见图7),把name的值改为“cfconvMainForm”,把caption的值改为“Celsius to Fahrenheit Converter”。

这里表单的name是被应用程序使用的内部名字,在用户编写代码时,有时需要使用的就是这个名字。Caption指的是要在标题栏上显示的名字。

从 左边的工具箱中选择Common Widgets,并且双击“TextLabel”。在表单的左上角放置一个标签,在这个标签位置下方再放置一个同样的标签。选中上面的标签,并且将其 text值改为“Celsius”,相应地把第二个标签的text值也改为“Fahrenheit”。在这两个标签的后面加上两个对应的输入框,用于输入 需要转换的温度和输出转换后的温度。从Common Widgets中双击选择LineEdit,然后在两个标签后创建两个LineEdit。

把两个LineEdit框的name值分别改为“celsiusLineEdit”和“fahrenheitLineEdit”,再把fahrenheitLineEdit文本框的readOnly属性改为True。

从Common Widgets上选择PushButton,并且创建两个按钮,分别将其name和text属性改为quitPushButton和Quit、convertPushButton和Convert。这时表单看起来就如图8所示。

Qt Designer入门教程 初学者必看 

#p#

图8 基本完成的GUI

现在按“Ctrl+S”或从选单中选择File→Save,接下来要求输入文件名。缺省情况下,使用的是表单的name值,扩展名使用的是.ui。用户可以接受这个名字,然后点击“Save”。

如 果想看一看效果,用户可以按“Ctrl+T”或从选单中选择Preview→Preview Form来预览应用程序。但是现在按钮还不能做任何事情,所以下一步要做的事情就是让按钮和某一特定的动作相关联。当点击“Quit”按钮时,要求应用程 序会被关闭;而当点击“Convert”按钮时,要求输入的温度由摄氏温度转换为华氏温度。

在“Quit”按钮上点击右键,选择 Connections,然后点击“New”。从Sender列表中选择quitPushButton,从Signal列表中选择clicked(),从 Receiver列表中选择cfconvMainFrom,从Slot列表中选择close()。用户可以参见图9所示。

Qt Designer入门教程 初学者必看

图9 为Quit按钮创建关联

现在,当用户点击“Quit”按钮时,会向表单发送一个鼠标点击的信 号,这将使这个表单关闭(因为这个表单是主表单,所以它关闭时应用程序也就同时关闭了)。要进行测试,可以选择Preview→Preview Form。这时点击“Quit”按钮,预览窗口就会被关闭。

下面为“Convert”按钮创建连接。在“Convert”按钮上点击 右键,然后选择Connections。这时用户会发现这是一个全局连接窗口,而不是某一窗口部件的连接。点击“New”来创建一个新的连接。从 Sender列表中选择convertPushbButton,从Signal列表中选择clicked(),从Receiver列表中选择 cfconvMainFrom。本想将该按钮与fahrenheitLineEdit窗口部件相关联,但列表中却没有一个可以满足这项要求的栏目。因此需 要创建一个新的栏目来完成这个连接。

Qt Designer入门教程 初学者必看

图10 创建新的栏

Qt Designer入门教程 初学者必看

图11 完成连接创建

点击“Edit Slots”和“New Function”(见图10),把函数名改为convert(),其它的值可以保持不变,点击“OK”来关闭窗口。要完成这个连接,从Slot列表中选择convert()(见图11)。

现 在来完成应用程序的代码部分:创建convert()函数。在Project Overview窗口点击“cfconvmainform.ui.h”来启动Code Editor。此时convert()函数实际上已经存在了,只不过是空的罢了。输入下面的C++代码来完成函数:

  1. void cfconvMainForm::convert() {  
  2.  /*   
  3.  Declare some variables   
  4.  */   
  5.  double celsius_input, result = 0;  
  6.       /*  
  7.        Retrieve Celsius input  
  8.         */   
  9.         celsius_input = celsiusLineEdit->text().toDouble();   
  10.        /*   
  11.        Convert to Fahrenheit  
  12.         */ result = (celsius_input *  (9.0/5.0)) + 32.0;  
  13.     /*  
  14.      Enter result and clear Celsius input box  
  15.       */  
  16.        fahrenheitLineEdit->setText(QString::number 
  17. (result, ''f'', 1));
            celsiusLineEdit->clear();}

现 在就已经基本完成这个应用程序了。不过在编译和运行此应用程序之前,还要创建一个main.cpp文件。方法是选择File→New→C++Main- File(main.cpp),只需接受缺省的配置即可。main.cpp会自动在Code Editor中打开。因为这里无需改变main.cpp中的任何东西,所以直接将Code Editor窗口关闭,并且保存main.cpp。这时也同时关闭cfconfMainForm.ui.h Code Editor窗口。

编译

到此为止,在Qt Designer中的工作已经完成了。保存整个项目,下面来编译和运行这个程序。在编译程序之前,要首先生成它的Makefile文件。打开一个终端,然后切换至保存有项目的位置,使用以下命令来生成Makefile文件:

  1. #qmake -o Makefile cfconv.pro  

现在,就可以运行make来编译程序了,根据系统的性能,这个步骤需要花费一点时间。当编译工作完成后,输入./cfconv来运行程序。如果一切正常,用户应该已经看到程序了。

小结:Qt Designer入门教程 初学者必看的内容介绍完了,希望本篇文章对你有所帮助!更多内容请参与编辑推荐!

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

2011-08-24 17:05:01

Lua

2009-06-05 11:01:07

淘宝Open API入门教程

2011-06-17 14:12:32

Qt

2011-06-17 14:29:55

Qt

2011-06-17 15:06:14

Qt

2011-06-17 15:32:28

Qt

2011-06-17 15:25:18

Qt

2011-06-17 15:37:42

Qt

2011-06-17 14:54:31

Qt

2011-06-17 15:19:28

Qt

2011-06-17 15:44:25

Qt

2011-06-17 14:41:56

Qt

2011-08-11 10:50:08

xcode调试文件

2011-09-16 09:38:19

Emacs

2009-12-02 10:01:54

2009-11-23 10:29:43

CISCO路由器教程

2011-04-07 14:09:45

2011-09-08 10:38:37

Widget

2013-04-23 10:51:15

Linux压缩

2010-06-13 11:13:38

UML初学者指南
点赞
收藏

51CTO技术栈公众号