基于Qt的ui图形化界面进行的界面设计

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中，右上角有一个树形图栏记录着当前窗口中的对象和类，在这里修改创建的对象的名字，提高可读性（如图）。
接着利用界面上方的对齐工具进行对齐（如图）