[转载]Qt Designer使用简易教程_huadingjin_新浪博客

本来想写一篇手把手教学的博文,写了一大半了,一只飞蛾在屏幕前乱晃,用力一打,打倒了桌上的东西,砸在鼠标上,把写博文的标签页关掉了,太TM寸了。已经不早了,无奈只能写个大概其,赶紧睡觉。

以Qt 4.4自带的example/designer/calculatorform为例进行说明。

创建工作目录。
打开终端,在预定目录执行如下命令:
mkdir CalculatorForm
cd CalculatorForm

创建窗体。
打开Qt Designer(这个也不会的话,请找块豆腐自己撞死)。快捷键Ctrl+N弹出新建窗体菜单,选择Widget模板。点击创建(C reate)。如下图:
[转载]Qt <wbr>Designer使用简易教程

添加控件,修改属性和对象名。
从Qt Designer主窗体的Widget Box里面拖拽6个Label、2个SpinBox、1个HorizontalSpacer、1个VerticalSpacer。简单摆放。修改窗体的WindowTitle为Calculator Form,并在属性编辑器中修改每个Label的显示文字,如下图。
[转载]Qt <wbr>Designer使用简易教程

用于显示结果的Label还要修改其他几个属性,如下图:
[转载]Qt <wbr>Designer使用简易教程

在对象查看器中修改各控件的对象名,可以起成相关的有意义的名字,参考下图:
[转载]Qt <wbr>Designer使用简易教程
注:我这里用于显示结果的Label所起的对象名(resultLabel)和Qt自带例子中的对象名(outputWidget)不一样,导致后面的代码和自带例子的代码中的一个变量名也不一样。

调整布局。
同时选中Input1和它下方的SpinBox(按住shift鼠标左键逐个点击或用鼠标左键圈选),点击Qt Designer主窗体上的垂直布局按钮对二者进行布局,以此类推对Input2和下方SpinBox、Output和结果Label进行垂直布局。然后左键单击窗体空白处,点击Qt Designer主窗体上的栅格布局(GridLayout),给整个窗体赋以栅格布局(如果不对整个窗体进行布局,保存成.ui格式的文件时,占位符无法被保存)。布局结束后,窗体如下图:
[转载]Qt <wbr>Designer使用简易教程

保存窗体。
快捷键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 <QtGui>

#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 <QApplication>

#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手册的基础上总结的,希望对大家有所帮助,如有不正确的地方,欢迎指正。转载请注明出处。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值