Qt4读书笔记7

快速对话框设计

本节主要学习使用Qt Designer来快速开发界面程序。

 

Qt设计主要用来手工编程。然而，许多程序员喜欢使用可视化的途径设计界面，因为这比手工编程更加自然和快速。修改起来也方便很多。

Qt Designer就是这样一个工具。可用于开发所有或者部分应forms. Qt Designer最终生成C++ code.所以对编译器没有特殊要求。

本节我们学习使用Qt Designer创建一个对话框。创建步骤：

1. 创建和初始化子控件；

2. 将子控件放入layout;

3. 设置tab order;

4. 建立signal-slot连接；

5. 实现特定的slots.

 

在windows的开始菜单中运行Designer。弹出的模板列表中，点击"Widget"模板，点击"Create",这样你就得到一个命名为"Untitled"窗口。

然后就是一些拖动操作，将控件放到合适的位置......

对话框的样子：

--------------------------

  Cel Location : |       |

 

         |OK|     |Cancel|

--------------------------

其中，label和line editor要建立伙伴关系，需要点击Edit|Edit Bubbies菜单，设置完成后点击Edit|Edit Widgets恢复正常状态。

 

下一步是排列组件：

1. 点击Cell Location label然后按住shift点击line editor，然后选择Form|lay out Horizontally，进行水平布局；

2. 单击spacer和两个按钮，进行水平布局；

3. 点击空白出，进行垂直布局；

4. 点击Form|Adjust Size调整合适的大小

 

然后调试tab order顺序：点击Edit|Edit Tab Order

然后可以预览窗口：Form|Preview

 

保存：gotocelldialog.ui到目录gotocell，然后创建main.cpp

 

#include <QApplication>

#include <QDialog>

 

#include "ui_gotocelldialog.h"

 

int main(int argc, char *argv[])

{

       QApplication app(argc, argv);

      

       Ui::GoToCellDialog ui;

       QDialog *dialog= new QDialog;

       ui.setupUi(dialog);

       dialog->show();

 

       return app.exec();

}

 

然后编译：

qmake -project

qmake gotocell.pro

qmake足够聪明来检测.ui文件并生成相应的makefile通过调用uic(Qt用户接口编译器)

uic将.ui转换成C++并将结果放入ui_gotocelldialog.h中

 

 

自动生成的ui_gotocelldialog.h文件包括了Ui::GoToCellDialog类的定义，这是一个gotocelldialog.ui对应的C++文件。这个类定义了组件和布局。setupUi()方法初始化form，生成的类如下：

class Ui::GoToCellDialog

{

public:

    QLabel *label;

    QLineEdit *lineEdit;

    QSpacerItem *spacerItem;

    QPushButton *okButton;

    QPushButton *cancelButton;

    ...

 

    void setupUi(QWidget *widget) {

        ...

    }

};

 

为了让程序实现一些功能，定义了一个新的类：

gotocelldialog.h

 

#ifndef GOTOCELLDIALOG_H

#define GOTOCELLDIALOG_H

 

#include <QDialog>

 

#include "ui_gotocelldialog.h"

 

class GoToCellDialog : public QDialog, public Ui::GoToCellDialog

{

       Q_OBJECT

 

public:

       GoToCellDialog(QWidget *parent = 0);

 

private slots:

       void on_lineEdit_textChanged();

};

 

#endif

 

gotocelldialog.cpp

 

#include <QtGui>

 

#include "gotocelldialog.h"

 

GoToCellDialog::GoToCellDialog(QWidget *parent) : QDialog(parent)

{

       setupUi(this);

 

       QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");

       lineEdit->setValidator(new QRegExpValidator(regExp, this));

 

       connect(okButton, SIGNAL(clicked()), this, SLOT(accept()));

       connect(cancelButton, SIGNAL(clicked()), this, SLOT(reject()));

}

 

void GoToCellDialog::on_lineEdit_textChanged()

{

       okButton->setEnabled(lineEdit->hasAcceptableInput());

}

在构造方法中，我们调用setupUi()来初始化form。感谢多继承，是我们能访问Ui::GoToCellDialog的成员。

setupUi()自动建立配置的连接，如：

connect(lineEdit, SIGNAL(textChanged(const QStrnig &)), this, SLOT(on_lineEdit_textChanged()));

其名称是约定的：

on_objectName_signalName()与objectName's signalName()之间的连接。

 

main.cpp需要修改一下：

#include <QApplication>

 

#include "gotocelldialog.h"

 

int main(int argc, char *argv[])

{

       QApplication app(argc, argv);

       GoToCellDialog *dialog = new GoToCellDialog;

       dialog->show();

       return app.exec();

}