QT Designer

（一）简单继承方式的实现
1、QT Designer 设计用户界面；
2、设计一个类继承设计的用户界面；
3、在程序中使用这个类。

以一个sample为例，ui文件为calculatorform.ui

/** @brief 自定义类的头文件calculatorform.h */

#ifndef CALCULATORFORM_H
#define CALCULATORFORM_H

#include "ui_calculatorform.h" //由ui文件生成的头文件

class CalculatorForm : public QWidget //自定义一个类CalculatorForm
    {
        Q_OBJECT

    public:
        CalculatorForm(QWidget *parent = 0);

    private slots: //      信号/槽的自动连接方式
        void on_inputSpinBox1_valueChanged(int value);
        void on_inputSpinBox2_valueChanged(int value);

    private:
        Ui::CalculatorForm ui; //Ui::CalculatorForm是ui设计时窗体的objectname。
                                        //这里与自定义类名相同，这不是必须的。 
                                        //Ui为ui文件生成头文件时使用的namespace
    };

#endif

/** @brief 自定义类的实现 calculatorform.cpp*/

#include <QtGui>

#include "calculatorform.h"

CalculatorForm::CalculatorForm(QWidget *parent)
        : QWidget(parent)
    {
        ui.setupUi(this); //重要的一步
    }

    void CalculatorForm::on_inputSpinBox1_valueChanged(int value)
    {
        ui.outputWidget->setText(QString::number(value + ui.inputSpinBox2->value()));
    }

    void CalculatorForm::on_inputSpinBox2_valueChanged(int value)
    {
        ui.outputWidget->setText(QString::number(value + ui.inputSpinBox1->value()));
    }

/** @brief 程序中的使用 main.cpp */

#include <QApplication>

#include "calculatorform.h" //包含自定义类的头文件

int main(int argc, char *argv[])
{
   QApplication app(argc, argv);
   CalculatorForm calculator; //构造一个自定义类
   calculator.show();
   return app.exec();
}

至此，简单继承这种方式就很清楚了。估计这种方式也是使用比较多的一种方式。

（二）QT Designer有多种编辑模式

1、QT Designer有多种编辑模式: (1)Widget Editing Mode,(2)Signals and Slots Editing Mode，(3)Buddy Editing Mode和(4)Tab order Editing Mode.
(1)用来设计用户界面；
(2)用拖曳的方式连接Signals和Slots；
(3)用拖曳的方式连接标签和其他对象；(用途是为标签指定热键，通过它来转到相连的对象上)
(4)编辑Tab顺序。双击一个对象为1，然后依次点击剩余对象来设置顺序。

2、Designer生成ui文件，在编译过程中make会调用uic来处理这个ui文件，并生成相应的.h文件（QT4中不再生成cpp文件）。如果原始文件为a.ui，则生成的.h文件为ui_a.h。
该.h文件定义一个类(我做了一个简单的窗体，其他的还没有试过)，类的名称是窗体设计时窗体的objectname。生成的namespace为Ui。

3、在程序中使用设计好的部件有多种方式：
(1)直接使用
a、在pro文件中包含FORMS = a.ui (qmake会完成这个工作)
b、在所写的程序中(测试中用了一个简单的程序main.cpp)加入相应的include语句，以避免不需要的ui文件混入其中。如#include "ui_a.h" (这里加入的是由ui文件生成的头文件，而不是ui文件)
c、程序中直接来使用。

#include "ui_firstform.h"
#include <QApplication>

int main(int argc ,char * argv[])
{
  QApplication app(argc,argv);
  QDialog *window = new QDialog;
  Ui::ImageDialog ui;
  ui.setupUi(window);

  window->show();
  return app.exec();
}

(2)简单继承：主要是定义一个子类

To ensure that we can use the user interface, we need to include the header file that uic generates before referring to Ui::ImageDialog:
#include "ui_imagedialog.h"
The subclass is defined in the following way:
class ImageDialog : public QDialog
{
Q_OBJECT

public:
ImageDialog(QWidget *parent = 0);

private:
Ui::ImageDialog ui;
};
The important features of the class are the private ui object which provides the code for setting up and managing the user interface.
The constructor for the subclass constructs and configures all the widgets and layouts for the dialog just by calling the ui object's setupUi() function. Once this has been done, it is possible to modify the user interface and create items for the combobox:
ImageDialog::ImageDialog(QWidget *parent)
: QDialog(parent)
{
ui.setupUi(this);

ui.colorDepthCombo->addItem(tr("2 colors (1 bit per pixel)"));
ui.colorDepthCombo->addItem(tr("4 colors (2 bits per pixel)"));
ui.colorDepthCombo->addItem(tr("16 colors (4 bits per pixel)"));
ui.colorDepthCombo->addItem(tr("256 colors (8 bits per pixel)"));
ui.colorDepthCombo->addItem(tr("65536 colors (16 bits per pixel)"));
ui.colorDepthCombo->addItem(tr("16 million colors (24 bits per pixel)"));

connect(ui.okButton, SIGNAL(clicked()), this, SLOT(accept()));
connect(ui.cancelButton, SIGNAL(clicked()), this, SLOT(reject()));
}
We can connect signals from the user interface widgets to slots in the dialog in the usual way, taking care to prefix the ui object to each widget used.

(3)多继承方式

As before, we need to include the header file that uic generates from the imagedialog.ui file:
#include "ui_imagedialog.h"
The class is defined in a similar way to the one used in the private interface approach, except that this time we inherit from both QDialog and Ui::ImageDialog:
class ImageDialog : public QDialog, private Ui::ImageDialog
{
Q_OBJECT

public:
ImageDialog(QWidget *parent = 0);
};
We inherit Ui::ImageDialog privately to ensure that the user interface objects are private in our subclass. We can also inherit it with the public or protected keywords in the same way that we could have made ui public or protected in the previous case.
The constructor for the subclass performs many of the same tasks as the constructor used in the private interface example:
ImageDialog::ImageDialog(QWidget *parent)
: QDialog(parent)
{
setupUi(this);

colorDepthCombo->addItem(tr("2 colors (1 bit per pixel)"));
colorDepthCombo->addItem(tr("4 colors (2 bits per pixel)"));
colorDepthCombo->addItem(tr("16 colors (4 bits per pixel)"));
colorDepthCombo->addItem(tr("256 colors (8 bits per pixel)"));
colorDepthCombo->addItem(tr("65536 colors (16 bits per pixel)"));
colorDepthCombo->addItem(tr("16 million colors (24 bits per pixel)"));

connect(okButton, SIGNAL(clicked()), this, SLOT(accept()));
connect(cancelButton, SIGNAL(clicked()), this, SLOT(reject()));
}
In this case, the interface can be set up using a member function, and the combobox is accessed in the same way as a widget created in code by hand. The push buttons are also referred to directly in the connect() function calls.

(4)自动连接

Although it is easy to implement a custom slot in the dialog and connect it in the constructor, we could instead use uic's auto-connection facilities to connect the OK button's clicked() signal to a slot in our subclass. To do this, we only need to declare and implement a slot with a name that follows a standard convention:
void on_<widget name>_<signal name>(<signal parameters>);
Using this convention, we can define and implement a slot that responds to mouse clicks on the OK button:
class ImageDialog : public QDialog, private Ui::ImageDialog
{
Q_OBJECT

public:
ImageDialog(QWidget *parent = 0);

private slots:
void on_okButton_clicked();
};
Automatic connection of signals and slots provides both a standard naming convention and an explicit interface for widget designers to work to. By providing source code that implements a given interface, user interface designers can check that their designs actually work without having to write code themselves.