首先,需要使用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
{QApplication a(argc, argv);myQtTest w; w.show();return a.exec();
}
只是实例化一个myQtTest对象,然后show。再看下myQtTest里有什么。。
//myQtTest.h
#ifndef MYQTTEST_H
#define MYQTTEST_H#include
#include "ui_myqttest.h"class myQtTest : public QDialog
{Q_OBJECTpublic: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里看看吧。。相关说明,看注释吧。
/******************************************************************************** Qt ui\345\244\264\346\226\207\344\273\266\350\247\243\346\236\220
** 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
#include
#include
#include
#include
#include
#include
#include
#include
#include
#include
#include
#include
{
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);} // setupUivoid 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", "\n"
"\n"
"
};//在命名空间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文件的窗口,其子控件们无法随着窗口的放大缩小进行自动缩放。后面会介绍一个办法来解决这个问题。