【C2】对话框【S3】Rapid Dialog Design（上）

Qt被设计得手写代码感到很舒服很有感觉，与单纯使用纯C++开发整个Qt程序没有什么与众不同。但仍然有许多程序员更喜欢使用可视化的方式设置窗体，因为他们发现这比手写代码更自然更快速，他们还想比手写代码更快速更容易的改变窗体。

Qt设计师(Qt Designer)提供了可视的设计功能扩展了程序员可用的选择。Qt设计师能用来开发整个或一些应用程序的窗体。使用Qt设计师创建窗体并生成对应的C++代码，所以Qt设计师能使用传统的工具链并不会强加任何的条件到编译器上。

在这一节，我们将使用Qt设计师创建一个Go-To-Cell对话框，如下图所示。无论我们用代码或用Qt设计师，创建一个对话框总是要涉及到一些相同的基本步骤：

创建和初始化子窗体。

把子窗体放到布局中。

设置tab顺序。

建立信号和槽的连接。

实现对话框自定义的槽。



当启动Qt设计师会弹出一个模板的列表。点击"Widget template"，再点OK（"Dialog with Buttons Bottom"看上去更有吸引力，但在这个例子中我们将手工创建OK和Cancle按钮来展示如何完成之，），你将看到一个Untitiled窗口。

第一步是创建一个子窗体并放到主窗体中。创建一个标签，一个行编辑器，一个水平空格符，和两个按钮。处理每一项从Qt设计师的Widget box拖住这些空间的名字或图标不放，大致在它们应该在主窗体中放置的位置放下鼠标。空格符在最终的窗体中是不可视的，Qt设计师中它是一个蓝色的弹簧。

现在拖动主窗体的底部的边缘，向上拖使主窗体更短些。不要花太多时间来定位主窗体上的每一个子窗体；Qt的布局管理器等会儿会精确的定位它们。

使用Qt设计师的属性编辑器来设置每个窗体的属性：

1.点击text label。确保它的objectName属性是"label"并设置text属性为"&Cell Location:"。

2.点击行编辑器。确保它的objectName属性为"lineEdit"。

3.点击第一个按钮。把objectName属性设为"okButton"，enabled属性为"false"，text属性为"OK"，default属性为"true"。

4.点击第二个按钮。objectName属性设为"cancelButton"，text属性为"cancel"。

5.点击主窗体的背景表示选择了主窗体本身。objectName设为"GoToCellDialog"，windowTitle属性设为"Go to cell"。

现在所有的窗体看起来都不错，除了text label，它显示为"&Cell Location"。点击Edit|Edit Buddies来进入一个特殊的模式，允许你可以设置伙伴。下一步，单击label并把红色箭头拖到行编辑器上并释放鼠标。label现在显示"Cell Location"（首字母下有下划线），行编辑器已经成为label的伙伴了。点击Edit|Edit Widgets离开伙伴模式。

下一步就是布局主窗口上的窗体：

1.点击label并当点击旁边的行编辑器时按下shift键，这样两者都被选中了。点击Form|Lay Out Horizontally。

2.点击空格符，当点击OK和Cancel按钮时按下shift键，然后点击Form|Lay Out Vertically。

3.点击主窗体的背景就解除已经选择的窗体的选择，点击Form|Lay Out Vertically。

4.点击Form|Adjust Size来重新以理想的尺寸来改变主窗体的大小。

出现在主窗体的红线部分展示了已经创建的布局。当主窗体运行时它们不会显示。

现在点击Edit|Edit Tab Order。一个带有数字的蓝色矩形会出现每个窗体的旁边来表示可以接收焦点。以你想让窗体们接收焦点的顺序依次点击每个窗体，然后点击Edit|Edit Widgets离开tab顺序模式。

点击Form|Preview菜单选项来预览这个对话框。重复的按Tab键来检查tab顺序。点击标题栏的close按钮来关闭对话框。

把对话框保存在一个gotocell的目录下，命名为为gotocelldialog.ui，然后用纯文本编辑器在相同的目录下创建一个main.cpp文件：

Code:

#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来创建一个.pro文件和一个makefile（qmake -project;qmake goto-cell.pro）。qmake工具很足够聪明能检测的用户接口文件goto-celldialog.ui并生成合适的调用uic(user interface compile)的makefile规则，Qt的用户接口编译器。这个uic工具能把gotocelldialog.ui转换为C++源码并把结果存放到ui_gotocelldialog.h中。

这个生成的ui_gotocelldialog.h文件包含了Ui::GoToCellDialog类的定义，是与gotocelldialog.ui文件等价的C++源码。这个类声明了存储在主窗体中的子窗体和布局的成员变量和一个setupUi()成员函数来初始化整个主窗体。这个生成的类看起来像下面这样：

Code:

class Ui::GoToCellDialog

{

public:

QLabel *label;

QLineEdit *lineEdit;

QSpacerItem *spacerItem;

QPushButton *okButton;

QPushButton *cancelButton;

...

void setupUi(QWidget *widget) {

...

}

};

这个生成的类没有继承自任何一个Qt类。当我们在main.cpp中使用这个主窗体时，我们创建了一个QDialog并把它传到了setupUi()中。

如果你现在运行这个程序，对话框能显示出来，但它不能按照我们的要求工作：

OK按钮总是禁用的。

Cancel按钮不做任何事。

行编辑器能接受任何输入，而不是仅仅接收合法的单元格位置（cell locations）。

下次再来解决这个问题。