Qt Designer介绍
Qt提供有非常强大的GUI编辑工具Qt Designer，它的操作界面类似于Windows下的Visual Studio，而且它还提供了相当多的部件资源。
1．Qt设计器
Qt允许程序员可以不通过任何设计工具，以纯粹C++代码来设计一个程序。但是更多程序员习惯于在一个可视化环境中来设计程序，尤其是在界面设计时候。因为这种设计方式更加符合人类思考的习惯，也比书写代码要快速的多。Qt Designer的集成开发环境界面如图7.2所示。
图7.2
Qt Designer
图7.2所显示的是Qt设计器（Qt Designer）的工作界面。Qt 设计器可以用来开发一个应用程序全部或者部分的界面组件。以Qt 设计器生成的界面组件最终被变成C++代码，因此Qt设计器可以被用在一个传统的工具链中，并且它是编译器无关的。
默认情况下，Qt Designer的用户界面由几个顶级窗口共同组成。如果程序员习惯于有一个MDI-style的编程操作界面（由一个顶级窗口和几个子窗口组成的界面），可以在菜单Edit->User
Interface Mode中选择Docked Window来切换界面。图7.2显示的就是MDI-style 的界面风格。
2．Qt
Designer 设计QT应用程序的一般步骤
（1）使用designer完成以下设计工作：
设计界面，添加窗口组件。
建立信号槽连接。
编写事件处理函数。
保存工程为.ui 文件,得到一个主窗口类。
（2）编写main.cpp 文件进行主窗口类的实例化及显示。
（3）使用qmake 生成.pro 工程文件。
（4）通过qmake 自动生成Makefile 文件。
（5）make 生成可执行文件。
（6）运行应用程序。
设计示例
1/3创建ui 文件
1．建立本机Qt工程环境目录
进入宿主机中系统中，建立QtDemo工程文件目录，书中建立的QtDemo工程文件目录绝对路径为/home/cbt/QtDemo，在Linux环境中建立工程文件目录过程如下：
[root@localhost ~]# cd /home/
[root@localhost home]#
mkdir
cbt
[root@localhost home]# cd cbt/
[root@localhost cbt]# mkdir QtDemo
[root@localhost cbt]# cd QtDemo
[root@localhost QtDemo]# ls
[root@localhost QtDemo]#
后续QT工程源文件都建在此目录(/home/cbt/QtDemo)下进行编辑和编译。
2．启动Qt
Designer
注意这里使用本章案例1中编译生成环境中的Qt Designer
工具。
[root@localhost QtDemo]# /usr/local/Trolltech/Qt-4.7.0/bin/designer
该命令使用的是绝对路径，以确保使用的是实验环境配套的工具。
3．编辑源文件
（1）创建工程文件。启动designer界面后，选择一个窗口布局Widget
点击“创建”按钮创建工程，如图7.3所示。
图7.3
创建工程文件
（2）设计界面。拖拽几个简单控件(label显示标签、horizontalSlider水平滑动器、progressBar进度条)进行界面设计。完成设计后的界面布局如图7.4所示。
图7.4
设计界面
在图7.4中右侧的属性编辑器中，修改label显示标签显示内容为“QtDemo”, progressBar进度条初始值value 为“0”，horizontalSlider水平滑动器初始值value
为“0”，这样做可以保证水平滑动器滑动时候与滚动条同步。progressBar进度条初始值在属性编辑器中位置如图7.5所示。
图7.4
设置progressBar进度条初始值
（3）建立信号与槽连接。在designer 窗口中点击“Edit”菜单，在弹出窗口中选择“Edit Signals/Slots”项，进入信号和槽编辑模式。点击“Edit”菜单后在弹出窗口如图7.5所示。
图7.5
选择信号和槽编辑模式
当设置好信号和槽的编辑模式后，在图7.4所示的设计界面中将鼠标光标放置在水平滑动器上，按住鼠标左键拖拽出红色箭头，指向滚动条，即可建立起两个控件的信号与槽连接，如图7.6所示。
图7.6
两个控件的信号与槽连接
在建立信号与槽连接中会弹出编辑对话框，如图7.7所示。在图7.7中选择信号为“valueChanged(int)”，插槽为“setValue(int)”。
注意信号与插槽都是带有相同类型参数。
图7.7
信号与槽连接编辑对话框
（4）保存UI界面工程。在图7.4 所示的设计界面中可以通过Qt Designer工具栏内的快捷方式
，实现在不同设计模式间切换。
退出信号与槽编辑模式，进入编辑窗口部件模式，保存当前UI 工程，名称为“QtDemo.ui”，如图7.8所示。
图7.8
保存UI界面工程
2/3 编写main.cpp C++主函数
在QtDemo工程文件目录下使用文本编辑软件，完成main.cpp主函数的编写。
[root@localhost QtDemo]# vi main.cpp
main.cpp主函数内容如下：
#include
"ui_QtDemo.h"
int
main(int argc, char *argv[])
{
QApplication app(argc, argv);
QWidget *widget = new
QWidget;
Ui::Form ui;
ui.setupUi(widget);
widget->show();
return app.exec();
}
其中，包含的头文件为提前包含的，命名方式为ui_xxx.h，xxx
代表UI 保存的工程名字，例如本例中的ui_QtDemo.h，后续编译过程中会生成ui_QtDemo.h文件。此方法为Qt的编译技巧，限于基于Designer的设计方式使用。
[root@localhost QtDemo]# ls
main.cpp QtDemo.ui
[root@localhost QtDemo]#
3/3 编辑工程文件
1．使用qmake –project
命令编译程序生成工程文件.pro
[root@localhost QtDemo]# /usr/local/Trolltech/Qt-4.7.0/bin/qmake –project
[root@localhost QtDemo]# ls
main.cpp QtDemo.pro QtDemo.ui
[root@localhost QtDemo]#
2．使用qmake 命令生成Makefile
文件
[root@localhost QtDemo]# /usr/local/Trolltech/Qt-4.7.0/bin/qmake
[root@localhost QtDemo]# ls
main.cpp Makefile QtDemo.pro QtDemo.ui
[root@localhost QtDemo]#
3．编译工程
[root@localhost QtDemo]# make
/usr/local/Trolltech/Qt-4.7.0/bin/uic QtDemo.ui -o ui_QtDemo.h
g++ -c -pipe -O2 -Wall -W -D_REENTRANT -DQT_NO_DEBUG
-DQT_GUI_LIB
-DQT_CORE_LIB -DQT_SHARED
-I/usr/local/Trolltech/Qt-4.7.0/mkspecs/linux-g++ -I.
-I/usr/local/Trolltech/Qt-4.7.0/include/QtCore
-I/usr/local/Trolltech/Qt-4.7.0/include/QtGui
-I/usr/local/Trolltech/Qt-4.7.0/include
-I. -I. -I. -o main.o main.cpp
g++ -Wl,-O1 -Wl,-rpath,/usr/local/Trolltech/Qt-4.7.0/lib -o QtDemo main.o
-L/usr/local/Trolltech/Qt-4.7.0/lib –lQtGui
-L/usr/local/Trolltech/Qt-4.7.0/lib -L/usr/X11R6/lib
–lQtCore –lpthread
[root@localhost QtDemo]# ls
main.cpp main.o Makefile QtDemo QtDemo.pro QtDemo.ui ui_QtDemo.h
[root@localhost QtDemo]#
编译成功后即可在当前目录下生成Qt 本机的可执行程序QtDemo。
4．运行Qt
程序
执行以下命令后，可以运行QtDemo程序，弹出运行界面如图7.8所示。
[root@localhost QtDemo]# ./QtDemo
图7.8
QtDemo程序运行界面
在图7.8所示的QtDemo程序运行界面中，可以使用鼠标拖拽水平滑动条，观察滚动条的滚动效果。
本例只是基于QtDesigner的控件及信号与槽来完成界面设计工作，如果用户设计的界面需要自定义控件及信号与槽，可以在Qt源码中通过C++继承与派生方法来实现新类，添加自己的成员即可实现。该范畴属于C++语言内容，此处不再赘述。有兴趣的读者可以参考相关书籍或网络资源独立完成。