本来想写一篇手把手教学的博文，写了一大半了，一只飞蛾在屏幕前乱晃，用力一打，打倒了桌上的东西，砸在鼠标上，把写博文的标签页关掉了，太TM寸了。已经不早了，无奈只能写个大概其，赶紧睡觉。
以Qt 4.4自带的example/designer/calculatorform为例进行说明。
创建工作目录。
打开终端，在预定目录执行如下命令：
mkdir CalculatorForm
cd CalculatorForm
创建窗体。
打开Qt Designer（这个也不会的话，请找块豆腐自己撞死）。快捷键Ctrl+N弹出新建窗体菜单，选择Widget模板。点击创建（Create）。如下图：
添加控件，修改属性和对象名。
从Qt Designer主窗体的Widget Box里面拖拽6个Label、2个SpinBox、1个HorizontalSpacer、1个VerticalSpacer。简单摆放。修改窗体的WindowTitle为Calculator Form，并在属性编辑器中修改每个Label的显示文字，如下图。
用于显示结果的Label还要修改其他几个属性，如下图：
在对象查看器中修改各控件的对象名，可以起成相关的有意义的名字，参考下图：
注：我这里用于显示结果的Label所起的对象名（resultLabel）和Qt自带例子中的对象名（outputWidget）不一样，导致后面的代码和自带例子的代码中的一个变量名也不一样。
调整布局。
同时选中Input1和它下方的SpinBox（按住shift鼠标左键逐个点击或用鼠标左键圈选），点击Qt Designer主窗体上的垂直布局按钮对二者进行布局，以此类推对Input2和下方SpinBox、Output和结果Label进行垂直布局。然后左键单击窗体空白处，点击Qt Designer主窗体上的栅格布局（GridLayout），给整个窗体赋以栅格布局（如果不对整个窗体进行布局，保存成.ui格式的文件时，占位符无法被保存）。布局结束后，窗体如下图：
保存窗体。
快捷键Ctrl+S保存窗体为CalculatorForm.ui（可以使用Ctrl+R快捷键对界面进行预览）。然后就可以关闭Qt Designer了。
从.ui到.h。
在终端中工作目录下，使用uic命令
uic -o ui_CalculatorForm.h CalculatorForm.ui
将在Qt Designer中绘制好的窗体转化成Ui_CalculatorForm类的头文件（其中包含了窗体控件属性信息及布局信息等）
注：此一步可以省略，待qmake的时候将自动调用uic生成相应的头文件（默认生成的头文件为ui_********.h的格式），但由于考虑到下一步的代码中需要include这个头文件，所以这里手工调用uic完成转化。
定义窗体类。
在工作目录下编写两个文件（随便你使用vim、emacs、gedit……），定义窗体类以及相应的槽函数（类似于消息响应函数）。内容如下：
头文件CalculatorForm.h如下：
// CalculatorForm.h
#ifndef CALCULATORFORM_H
#define CALCULATORFORM_H
//! [0]
#include "ui_CalculatorForm.h"
//! [0]
//! [1]
class CalculatorForm : public QWidget
{
Q_OBJECT
public:
CalculatorForm(QWidget *parent = 0);
private slots:
//根据SpinBox的变化更新显示结果的槽函数
void on_inputSpinBox1_valueChanged(int value);
void on_inputSpinBox2_valueChanged(int value);
private:
Ui::CalculatorForm ui;
};
//! [1]
#endif
相应的CalculatorForm.cpp如下：
// CalculatorForm.cpp
#include
#include "CalculatorForm.h"
//! [0]
CalculatorForm::CalculatorForm(QWidget *parent)
: QWidget(parent)
{
ui.setupUi(this);
}
//! [0]
//! [1]
void CalculatorForm::on_inputSpinBox1_valueChanged(int value)
{
ui.resultLabel->setText(QString::number(value + ui.inputSpinBox2->value()));
}
//! [1]
//! [2]
void CalculatorForm::on_inputSpinBox2_valueChanged(int value)
{
ui.resultLabel->setText(QString::number(value + ui.inputSpinBox1->value()));
}
//! [2]
编写主函数。
在工作目录下创建main.cpp文件，在其中实现如下代码：
//main.cpp
#include
#include "CalculatorForm.h"
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
CalculatorForm calculator;
calculator.show();
return app.exec();
}
编译运行。
使用终端，在工作目录下，用qmake命令生成*.pro和Makefile文件。输入：
qmake -project
qmake
make
如果程序没有错，可执行程序就编译出来了，名为CalculatorForm。在终端中输入如下命令，启动可执行程序，查看运行效果：
./CalculatorForm
注：本例子程序的类采用单继承法实现，也可以采用Qt Designer手册中介绍的直接法或者多继承法实现。
PS：本文是在研读Qt Designer手册的基础上总结的，希望对大家有所帮助，如有不正确的地方，欢迎指正。转载请注明出处。
阅读(8801) | 评论(1) | 转发(0) |
