qt初学者往往会发现这样的一个问题——无论是我买的相关的书,还是网上博客的内容,基本全都是利用纯代码的形式来进行界面设计的。而初学者对各种控件的代码实现并不熟悉,往往在这里耗费大量时间。故本篇文章介绍了通过ui图形化界面进行设计的过程并简单梳理了一下工程的结构。
下面以ubuntu系统下的一个双窗口互相切换的简易计算器为例。效果图如下:
第一个界面的第一个标签
功能是在输入框中输入两个数,下面的显示框显示相加的结果。
第一个界面的第二个标签
功能是在输入框中输入两个数,下面的显示框显示相乘的结果。按切换按钮可切换到第二个界面。
第二个界面
功能是把第一个界面的两个运算结果的和显示在显示框中。按“返回”按钮可回到第一个界面。
下面说下具体实现步骤吧。
一.创建工程
由于我们要实现两个窗口之间的互相切换,故我们要创建两个类。首先建立工程以及第一个类:
打开Qt creater, File->New file or project,project选择applications,右边目录选择Qt GUI Application,下一步后为工程命名,这里我们就命名calculator,下一步选择编译及调试工具,再下一步选择窗口类型,这里就选择QMainWindow吧,类的命名为calculator,注意勾选Generate Form,这样工程中才会有ui界面,最后一步不管,直接finish。至此,我们已经完成了工程及第一个类的创建。
下面创建第二个类。之前说过,相关书籍和博客上普遍都是采用代码的形式来创建第二个类的,相当的麻烦。这里我们利用图形化界面直接创建第二个类:右键工程名calculator,选择Add New,在弹出的对话框中,Files and Classes选择Qt,右边选择Qt Designer Form Class,下一步的模板就选择MainWindow吧。下一步命名extendedwindow,最后一步finish。至此我们就创建了工程中的第二个类。接着,在main.cpp包含头文件“extendedwindow.h”并定义新的对象e——extendedwindow e;是不是比用代码创建方便很多啊。
完成以上步骤后,你的projects栏中应该有如下的树形图界面——
二.接下来我们利用ui界面完成界面的设计,具体功能的实现将放在步骤3中讲解。
先编辑第一个窗口即calculator这个窗口,双击calculator.ui进入图形化设计界面,从左边的控件栏中找到containers下的tab widget,把他拖出来放到界面中,再拖出两个Line Edit和一个Text Browser以及一个Lable到tab widget的第一个tab中,右上角有一个树形图栏记录着当前窗口中的对象和类,在这里修改创建的对象的名字,提高可读性(如图)。
接着利用界面上方的对齐工具进行对齐(如图)