如何使用ui文件

这两天跟着班级辅导，总有学生感到很疑惑，用ui designer设计出来的ui文件是如何使用的，下面我从一个例子来说明下，希望能对有这样疑惑的同学有帮助。
事实上，现在有了继承设计工具qtcreator，作为开发者再也不用考虑这个问题，因为当你用qtcreator创建一个工程的时候，qtcreator提供的框架已经替我们完成了这个任务。
咱们先从这个程序开始看：
新建一个工程，

在这个工程中用ui designer来设计了这样的一个界面

这是我按ctrl+alt+r运行出来的，如何使这个利用ui designer设计出来的ui文件能运行起来就是我们这篇文章要议论的内容。
先来看看qtcreator提供的默认框架是如何实现的。要研究qtcreator怎么实现，就得先看dialog.h这个文件。
#ifndef DIALOG_H
#define DIALOG_H
#include
namespace Ui {
class Dialog;
}
class Dialog : public QDialog {
Q_OBJECT
public:
Dialog(QWidget *parent = 0);
~Dialog();
protected:
void changeEvent(QEvent *e);
private:
Ui::Dialog *ui;
private slots:
void on_pushButton_clicked();
};
#endif // DIALOG_H
观察不难得出，在上文中我用红色包含的就是实现这个程序的关键。它声明一个类，将设计出来的ui界面作为该类的一个子对象，在其构造函数中，先完成对子对象的构造，再使用子对象ui调用其setupUi(this)函数实现ui的现实。
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
ui(new Ui::Dialog)
{
ui->setupUi(this);
}
看完上面的代码，我们来分析下到底为什么要这样来使用ui文件。
在没有qtcreator之前，给了我们一个ui文件，该如何调用？
针对于ui文件，不知道大家知不知道uic这个工具，这是qt继承的一个工具，它可以利用ui生产.h文件。
uic dialog.ui –o tt.h
就生产了下面的文件：
/********************************************************************************
** Form generated from reading UI file 'dialog.ui'
**
** Created: Sun May 9 17:29:42 2010
** by: Qt User Interface Compiler version 4.6.2
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/
#ifndef TT_H
#define TT_H
#include
#include
#include
#include
#include
#include
#include
#include
QT_BEGIN_NAMESPACE
class Ui_Dialog
{
public:
QLabel *label;
QPushButton *pushButton;
void setupUi(QDialog *Dialog)
{
if (Dialog->objectName().isEmpty())
Dialog->setObjectName(QString::fromUtf8("Dialog"));
Dialog->resize(115, 148);
label = new QLabel(Dialog);
label->setObjectName(QString::fromUtf8("label"));
label->setGeometry(QRect(10, 30, 91, 21));
QFont font;
font.setPointSize(12);
font.setBold(true);
font.setWeight(75);
label->setFont(font);
pushButton = new QPushButton(Dialog);
pushButton->setObjectName(QString::fromUtf8("pushButton"));
pushButton->setGeometry(QRect(20, 80, 75, 23));
retranslateUi(Dialog);
QMetaObject::connectSlotsByName(Dialog);
} // setupUi
void retranslateUi(QDialog *Dialog)
{
Dialog->setWindowTitle(QApplication::translate("Dialog", "Dialog", 0, QApplication::UnicodeUTF8));
label->setText(QApplication::translate("Dialog", "hello,wang", 0, QApplication::UnicodeUTF8));
pushButton->setText(QApplication::translate("Dialog", "close", 0, QApplication::UnicodeUTF8));
} // retranslateUi
};
namespace Ui {
class Dialog: public Ui_Dialog {};
} // namespace Ui
QT_END_NAMESPACE
#endif // TT_H
通过观察我们会发现uic自动将我们设计的ui文件，生成了一个类，在此例中为class Ui_Dialog。事实上也是这样，uic会自动会利用设计好的ui生成一个包含类Ui_**的ui_**.h文件。那么在此例中，就会将我们设计好的dialog就会被uic文件解析，生成一个叫做ui_dialog.h的文件，此文件中包含Ui_Dialog的类。
那么总结出来，要让ui design设计出来的界面显示出来，只要能设法调用Ui_Dialog类的setupUi函数就行了。
一种简单的方法，直接使用，重新写一个这样的main函数。
#include
#include
#include "ui_dialog.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
Ui::Dialog ui;
QDialog *d=new QDialog;
ui. setupUi(d);
d->show();
return a.exec();
}
第二种方法相对比较简单一点，就是将Ui::Dialog ui或Ui::Dialog *ui写成一个新定义类的一个数据成员，也就是qtcreator提供的那种方法。
#include
#include "ui_dialog.h"
class Dialog : public QDialog {
Q_OBJECT
public:
Dialog(QWidget *parent = 0);
~Dialog();
protected:
void changeEvent(QEvent *e);
private:
Ui::Dialog *ui;
private slots:
void on_pushButton_clicked();
};
这样使用的时候需要注意的是在初始化的时候要先完成子对象的初始化，在其构造函数中重写构造函数。
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
ui(new Ui::Dialog)
{
ui->setupUi(this);
}
第三种方法是以Ui_Dialog类为基类，派生一个新类，在该类的初始化函数中调用setupUi。
#ifndef DIALOG_H
#define DIALOG_H
#include
#include "ui_dialog.h"
class Dialog : public QDialog ,public Ui::Dialog
{
Q_OBJECT
public:
Dialog(QWidget *parent = 0);
};
实现如下：
#endif // DIALOG_H
#include "dialog.h"
#include "ui_dialog.h"
Dialog::Dialog(QWidget *parent) :
QDialog(parent),
Ui::Dialog()
{
setupUi(this);
}
希望通过讲解，大家能总结出该如何使用ui文件。无非就是利用默认工具uic自动产生的类，去调用该类的setui函数。第一种是直接使用，第二种是定义一个新类，声明一个ui子对象，第三种是将ui作为基类派生新的类。

UI色彩体系：

高亮色，文字色，分割线色，背景色，辅助色，normal ,pressed,disabled的状态都是附加了比如10%的＃000，10％#ffff之类的。
文字体系：

文字大小，line-height，所以字体大小与line-height的比例关系建议保持一致，如果存在小数点，可以四舍五入。比如：28px字体大小的line-height是40px。那26px的字体，line-height可以取36px，比例是1.4。

UI设计不只是单纯的用户界面的美观设计，而是一个结合用户体验，产品思维，美观设计等多学科之间的综合设计。对于设计师的综合能力要求很高。
想要解决界面的交互合理性和易用性，首先需要设计师具有一定的产品逻辑思维和一定的优化使用便利性的能力，并且可以根据用户的不同反馈，在界面设计上做出相应的调整。

这两天跟着班级辅导，总有学生感到很疑惑，用ui designer设计出来的ui文件是如何使用的，下面我从一个例子来说明下，希望能对有这样疑惑的同学有帮助。