一、基于Qt设计师
1.创建一个GUI项目，选择“Qt4 Gui Application”。其中还有Empty Qt4 Project(空的工程),Qt4 Console Applicaiton(基于控制台的工程),Qt4 Gui Application(基于GUI设计的工程）。
2.填写好项目名称和目录后，单击下一步可以自己添加一些功能模块。比如QtOpenGl,QtNetwork,Qtsql等等。
3.单击下一步，选择Base class（基类主要三种选择：QWidget为窗口部件，QMaindow为主窗口，QDialog为对话框）。其它如Class name,Header file,Source file,Form file均可根据自己需要自行修改。选中Generate form复选框，表示要用自带的界面设计器来设计界面，否则需要用代码完成界面设计。最后单击Finish按钮，完成创建，则相应的文件自动加载到文件列表中去。
4.双击Dialog.ui，则进入Qt Designer。
5.进入程序代码文件
先看Dialog.h头文件
#ifndef DIALOG_H
#define DIALOG_H
#include <QDialog>
//用namespace定义一个全局名称空间Ui（也可以称为域，类似于C语言中的全局变量），用于解决在程序中存在同名标识存在的潜在危机。在名称空间中可以封装一些函数、类以及数据成员，用于细化管理。
//当在源文件中使用这个全局空间内成员时，有两种方法：第一种为直接在成员名前面加上作用域如Ui::Dialog表示使用Ui域中的Dialog类；第二种则在程序开头加上using namespace Ui，声明使用作用域Ui，则可直接使用Dialog类。
namespace Ui {class Dialog;} //在ui_dialog.h文件中定义了命名空间Ui，其中还定义了一个继承自Ui_Dialog类的Dialog类。这里只是对Ui域中Dialog类的前置声明，以便加快编译速度，同时避免在一个头文件中随意包含其他头文件而产生错误，而这里只使用了该类对象的指针，不需要该类的完整定义，因此可以使用前置声明。
class Dialog : public QDialog //定义一个QDialog的派生类（公有继承）
{
Q_OBJECT //宏名，这个宏必须出现在类的私有声明区，以启动元对象QOject的特性（元对象编译器moc)
public:
explicit Dialog(QWidget *parent = 0);
//parent指定Dialog的父窗口部件，parent=0表示窗口部件为一个窗口，否则为parent的子窗口控件
//构造函数，explicit只对构造函数起作用，用来抑制隐式转换（默认为隐式转换，explicit可以有效得防止构造函数的隐式转换带来的错误或者误解）
//按照默认规定，只有一个参数的构造函数也定义了一个隐式转换（如QString s = "hello"经过隐式转换,等价于QString s=QString("hello")或者QString s("hello")），将该构造函数对应数据类型的数据转换为该类对象。而explicit则不允许QString s="hello"这种初始化方式，使得编译不能通过。
~Dialog(); //析构函数
private slots:
void on_countBtn_clicked();//单击按钮显示圆面积
//void on_radiuslineEdit_textChanged(const QString &arg1);//在lineEdit控件中输入圆的半径，在areaLabel_2中直接显示出圆的面积
private:
Ui::Dialog *ui; //定义一个私有成员的Ui::Dialog类指针成员，注意此时Ui:: Dialog与继承于QDialog类的子类Dialog是不同的类，因为它们属于不同的域（即不同的全局名称空间），在cpp文件中会用ui->setupUi函数将UI文件中的界面应用于Dialog类的对象。
};
#endif //DIALOG_H
再看Dialog.cpp源文件
#include "dialog.h"
#include "ui_dialog.h"
const static double PI=3.1416; //定义一个全局变量
Dialog::Dialog(QWidget *parent) : //构造函数（带有一个QWidget指针型参数）
QDialog(parent), //调用基类构造函数初始化基类QDialog，表示子类Dialog将父窗口参数传递给基类，说明也为QDialog的父窗口
ui(new Ui::Dialog) //在构造函数中用new为指针成员开辟独立的动态内存空间，这里是为Dialog类中Ui::Dialog类对象成员ui开辟内存空间
{
ui->setupUi(this); //在头文件中定义的Ui::Dialog类指针成员，在这里进行初使化ui，在产生界面后，setupUi()会根据naming convention对slot进行连接
}
Dialog::~Dialog() //析构函数
{
delete ui; //在析构函数中用delete释放构造函数中用new开辟的动态内存空间，因为ui没有父窗口，只有那些没有parent的物件才使用delete来消除
}
//单击按钮显示圆面积,这个是在界面设计时右键按钮控件，然后单击“go to slot(转到槽）”产生的槽函数
void Dialog::on_countBtn_clicked()
{
bool ok;
QString tempStr;
QString valueStr=ui->radiuslineEdit->text();
int valueInt=valueStr.toInt(&ok);
double area=valueInt*valueInt*PI;
ui->areaLablel_2->setText(tempStr.setNum(area));
}
/////////////////////////////////////////////////////////////////
//在lineEdit控件中输入圆的半径，在areaLabel_2中直接显示出圆的面积
void Dialog::on_radiuslineEdit_textChanged(const QString &arg1)
{
bool ok;
QString tempStr;
QString valueStr=ui->radiuslineEdit->text();
int valueInt=valueStr.toInt(&ok);
double area=valueInt*valueInt*PI;
ui->areaLablel_2->setText(tempStr.setNum(area));
}
////////////////////////////////////////////////////////////////
最后看main.cpp源文件
#include <QtGui/QApplication> //在每一个使用Qt图形化应用程序中必须使用一个QApplication对象，它管理了图形化应用程序的广泛资源，基本设置，控制流及事件处理
#include "dialog.h" //完成dialog类的定义，注意使用哪个类时就必须将包含该类的头文件引用过来
int main(int argc, char *argv[])
{
QApplication a(argc, argv); //a是QApplication类的实例对象，任何Qt的窗口系统部件被使用之前必须一 个创建QApplication对象
Dialog w; //创建一个对话框对象，即Dialog实例对象
w.show(); //在创建一个窗口部件的时候，默认是不可见的，必须用shou()函数使之变成可见
return a.exec(); //程序进入消息循环，等待可能输入进行响应。这里就是main()把控制权转交给Qt，Qt完成事件处理后，当应用程序退出时，exec()的值就会返回。
//在exec()中，Qt接受并处理用户和系统的事件并且把它们传递给适当的窗口部件
}
7.运行程序
二、完全用编写代码的方式
1.创建项目与用Designer设计大体相同，只是要取消选中Generate form复选框。
2.进入程序代码文件
先看Dialog.h头文件
#ifndef DIALOG_H
#define DIALOG_H
#include <QtGui/QDialog> //添加用到的头文件
#include <QLabel> //添加用到的头文件
#include <QLineEdit> //添加用到的头文件
#include <QPushButton> //添加用到的头文件
class Dialog : public QDialog //类Dialog为基类QDialog的派生类（公有继承）
{
Q_OBJECT //这个宏的作用是启动Qt元对象系统的一些特性，如支持信号和槽，必须放置到类定义的私有区
public:
Dialog(QWidget *parent = 0); //构造函数，这里没有用explicit来抑制构造函数的隐式转换。parent指定Dialog的父窗口部件，parent=0表示窗口部件为一个窗口，否则为parent的子窗口部件
~Dialog();
private: //添加私有窗口部件变量
QLabel *label1,*label2; //添加QLabel类的指针型控件
QLineEdit *lineEdit; //添加QLineEdit类的指针型控件
QPushButton *button; //添加QPushButton类的指针型控件
private slots: //添加私有槽函数
void showArea();
};
#endif // DIALOG_H
再看Dialog.cpp源文件
#include "dialog.h"
#include <QGridLayout>//添加使用到的头文件，也可以写成#include "QGridLayout.h"
const static double PI=3.1416; //添加全局变量
Dialog::Dialog(QWidget *parent) //构造函数
: QDialog(parent)
{
label1=new QLabel(this); //这里的this指定父窗口
label1->setText(tr("请输入圆的半径："));//QObject::tr()
lineEdit=new QLineEdit(this);
label2=new QLabel(this);
button=new QPushButton(this);
button->setText(tr("显示对应圆的面积"));
QGridLayout *mainLayout=new QGridLayout(this);//网格布局
mainLayout->addWidget(label1,0,0);
mainLayout->addWidget(lineEdit,0,1);
mainLayout->addWidget(label2,1,0);
mainLayout->addWidget(button,1,1);
setLayout(mainLayout);
connect(button,SIGNAL(clicked()),this,SLOT(showArea()));//单击按钮显示圆面积
//connect(lineEdit,SIGNAL(textChanged(QString)),this,SLOT(showArea()));//当行编辑控件中输入半径时，不必单击按钮，直接在label2中显示出面积
}
Dialog::~Dialog() //析构函数
{
}
void Dialog::showArea() //添加的槽函数
{
bool ok;
QString tempStr;
QString valueStr=lineEdit->text();
int valueInt=valueStr.toInt(&ok);
double area=valueInt*valueInt*PI;
label2->setText(tempStr.setNum(area));
}
最后看main.cpp源文件
#include <QtGui/QApplication>
#include "dialog.h"
#include <QTextCodec> //人为添加使用的头文件
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
QTextCodec::setCodecForTr(QTextCodec::codecForLocale());
//使用tr()函数将字符串翻译成本地字符编码类型，用于解决中文乱码问题，使用UI界面设计时则不需要,在ui_xxx.h中自动将汉字转化成utf8编码格式
//QTextCodec::setCodecForLocale (QTextCodec::codecForLocale());
//使用QString::fromLocal8Bit()将字符串翻译成本地字符编码类型
//QTextCodec::setCodecForCStrings (QTextCodec::codecForLocale());
//使用QString ()将字符串翻译成本地字符编码类型
Dialog w;
w.show();
return a.exec();
}