Qt基础——UI文件.h文件说明

首先，需要使用Qt Designer设计你的UI界面。

Qt号称是跨平台应用程序和UI开发框架，所以其自带的UI设计器（即Qt Designer）功能也非常强大。

除了通常用的如Button，List等组件外面，使用Qt Designer做UI设计的过程中，用的最多的应该是它的Layouts了。

Qt Layout用于对窗口控件的排版，不需增加任何代码实现控件自动对齐，以及随窗口大小自动缩放等效果。对于Layout，这里就不多说了，有时间单独开一篇写吧。

此外，Qt Designer的属性框里，可以对组件的属性进行编辑（但貌似可供设置的属性有限，很多特殊属性还是要在代码里指定，如输入验证等。。），还可以编辑简单的信号和槽。

如图，是一个用来测试的UI界面：

 

UI界面设计好以后，需要生成对应的.h文件，才可以在VS2008引用。怎么生成.h文件呢？很简单，打开命令行，转到ui文件目录下，输入uic -o ui_***.h ***.ui，执行即可在当前目录下生成名为ui_***的.h文件，看图：

需要说明的是，如果是新建工程时程序自动创建的ui文件，则不需要手动生成.h文件，因为程序创建时对ui文件属性做了一些设置，看图：

即，在ui文件属性自定义生成步骤里，为文件指定命令行参数，这样如果ui文件有修改，则程序在每次编译之前都会生执行命令行内容，生成ui文件对应的.h文件。

好吧，开始今天的正题。

先看一下程序自动生成的几个文件。

//main.cpp

#include "myqttest.h"
#include <QtGui/QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    myQtTest w;    
    w.show();
    return a.exec();
}

 

只是实例化一个myQtTest对象，然后show。再看下myQtTest里有什么。。

//myQtTest.h

#ifndef MYQTTEST_H
#define MYQTTEST_H

#include <QtGui/QDialog>
#include "ui_myqttest.h"

class myQtTest : public QDialog
{
    Q_OBJECT

public:
    myQtTest(QWidget *parent = 0, Qt::WFlags flags = 0);
    ~myQtTest();

private:
    Ui::myQtTestForm ui;

};

#endif // MYQTTEST_H

//myQtTest.cpp

#include "myqttest.h"
myQtTest::myQtTest(QWidget *parent, Qt::WFlags flags)
    : QDialog(parent, flags)
{
    ui.setupUi(this);
}

  myQtTest::~myQtTest()
  {

  }

 

我们注意到myQtTest.h文件里包含一个文件“ui_myqttest.h”，是我们刚才生成的头文件，也是我们今天要分析的猪脚。。myQtTest定义了一个私有变量Ui::myQtTestForm ui，然后在构造函数中通过 ui.setupUi(this)方法，为ui对象指定宿主。

然后，去ui_myqttest.h里看看吧。。相关说明，看注释吧。

/********************************************************************************
** Form generated from reading UI file 'myqttest.ui'
**
** Created: Sat Jun 23 00:28:50 2012
**      by: Qt User Interface Compiler version 4.7.3
**
** WARNING! All changes made in this file will be lost when recompiling UI file!
********************************************************************************/

#ifndef UI_MYQTTEST_H
#define UI_MYQTTEST_H

#include <QtCore/QVariant>
#include <QtGui/QAction>
#include <QtGui/QApplication>
#include <QtGui/QButtonGroup>
#include <QtGui/QDialog>
#include <QtGui/QDialogButtonBox>
#include <QtGui/QHBoxLayout>
#include <QtGui/QHeaderView>
#include <QtGui/QLabel>
#include <QtGui/QLineEdit>
#include <QtGui/QTextEdit>
#include <QtGui/QVBoxLayout>
#include <QtGui/QWidget>

QT_BEGIN_NAMESPACE

class Ui_myQtTestForm
{
public:
    /** 这个Widget在UI设计时是没有的，是Qt为了方便组合其他的组件而且自动创建的。
    Widget的名字是根据最外层的组件来的，这里最外层是一个QVBoxLayout组件，故Widget
    以VerticalLayoutWidget命名*/
    QWidget *verticalLayoutWidget;
    /** 垂直布局，布局内的所有组件都将垂直对齐 */
    QVBoxLayout *verticalLayout;
    /** 水平布局，布局内的所有组件都将水平对齐 */
    QHBoxLayout *horizontalLayout_2;
    /** 文本显示控件 */
    QLabel *label;
    /** 单选文本输入控件 */
    QLineEdit *lineEdit;
    /** 垂直布局 */
    QVBoxLayout *verticalLayout_2;
    /** 单选文本输入控件 */
    QLabel *label_2;
    /** 文件编辑框 */
    QTextEdit *textEdit;
    /** 按钮框 */
    QDialogButtonBox *buttonBox;

    void setupUi(QDialog *myQtTestForm)
    {
        //设置对象名称
        if (myQtTestForm->objectName().isEmpty())
            myQtTestForm->setObjectName(QString::fromUtf8("myQtTestForm"));
        //根据UI设计重置对话框的大小
        myQtTestForm->resize(535, 354);
        //创建myQtTestForm的Child Widget，
        verticalLayoutWidget = new QWidget(myQtTestForm);
        verticalLayoutWidget->setObjectName(QString::fromUtf8("verticalLayoutWidget"));
        verticalLayoutWidget->setGeometry(QRect(20, 20, 491, 311));

        //以下内容为UI设计的简单的代码实现
        verticalLayout = new QVBoxLayout(verticalLayoutWidget);
        verticalLayout->setObjectName(QString::fromUtf8("verticalLayout"));
        verticalLayout->setContentsMargins(0, 0, 0, 0);
        horizontalLayout_2 = new QHBoxLayout();
        horizontalLayout_2->setObjectName(QString::fromUtf8("horizontalLayout_2"));
        label = new QLabel(verticalLayoutWidget);
        label->setObjectName(QString::fromUtf8("label"));

        horizontalLayout_2->addWidget(label);

        lineEdit = new QLineEdit(verticalLayoutWidget);
        lineEdit->setObjectName(QString::fromUtf8("lineEdit"));

        horizontalLayout_2->addWidget(lineEdit);


        verticalLayout->addLayout(horizontalLayout_2);

        verticalLayout_2 = new QVBoxLayout();
        verticalLayout_2->setObjectName(QString::fromUtf8("verticalLayout_2"));
        label_2 = new QLabel(verticalLayoutWidget);
        label_2->setObjectName(QString::fromUtf8("label_2"));

        verticalLayout_2->addWidget(label_2);

        textEdit = new QTextEdit(verticalLayoutWidget);
        textEdit->setObjectName(QString::fromUtf8("textEdit"));

        verticalLayout_2->addWidget(textEdit);


        verticalLayout->addLayout(verticalLayout_2);

        buttonBox = new QDialogButtonBox(verticalLayoutWidget);
        buttonBox->setObjectName(QString::fromUtf8("buttonBox"));
        buttonBox->setOrientation(Qt::Horizontal);
        buttonBox->setStandardButtons(QDialogButtonBox::Cancel|QDialogButtonBox::Ok);

        verticalLayout->addWidget(buttonBox);

        //显示控件文本，动态语言切换
        retranslateUi(myQtTestForm);
        QObject::connect(buttonBox, SIGNAL(accepted()), myQtTestForm, SLOT(accept()));
        QObject::connect(buttonBox, SIGNAL(rejected()), myQtTestForm, SLOT(reject()));

        QMetaObject::connectSlotsByName(myQtTestForm);
    } // setupUi

    void retranslateUi(QDialog *myQtTestForm)
    {
        myQtTestForm->setWindowTitle(QApplication::translate("myQtTestForm", "Dialog", 0, QApplication::UnicodeUTF8));
        label->setText(QApplication::translate("myQtTestForm", "LineEidt", 0, QApplication::UnicodeUTF8));
        lineEdit->setText(QApplication::translate("myQtTestForm", "\346\265\213\350\257\225lineEidt", 0, QApplication::UnicodeUTF8));
        label_2->setText(QApplication::translate("myQtTestForm", "TextEidt", 0, QApplication::UnicodeUTF8));
        textEdit->setHtml(QApplication::translate("myQtTestForm", "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0//EN\" \"http://www.w3.org/TR/REC-html40/strict.dtd\">\n"
"<html><head><meta name=\"qrichtext\" content=\"1\" /><style type=\"text/css\">\n"
"p, li { white-space: pre-wrap; }\n"
"</style></head><body style=\" font-family:'SimSun'; font-size:9pt; font-weight:400; font-style:normal;\">\n"
"<p style=\" margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; -qt-block-indent:0; text-indent:0px;\">Qt ui\345\244\264\346\226\207\344\273\266\350\247\243\346\236\220</p></body></html>", 0, QApplication::UnicodeUTF8));
    } // retranslateUi

};

//在命名空间UI下定义myQtTestForm，且全部从Ui_myQtTestForm继承。只是为了使用时更加友好
namespace Ui {
    class myQtTestForm: public Ui_myQtTestForm {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_MYQTTEST_H

 

相对比较简单，这里需要注意一点就是，ui头文件是在编译ui文件时自动生成的，所以不要试图对.h文件进行修改，那样只会费力不讨好。

另外，Qt在头文件里自动创建了一个child widget，而且这个widget的大小是固定的，即设计时的大小，从而导致使用UI文件的窗口，其子控件们无法随着窗口的放大缩小进行自动缩放。后面会介绍一个办法来解决这个问题。