第八章 Qt GUI之对话框使用
对话框可以是模态（modal）的或非模态（modeless）两种。当我们在一个用户界面程序里面对一个对话框（比如选择文件对话框）的操作没有结束前，界面的其他窗口无法操作，遇到的这个对话框就是模态对话框，而当我们在一个字处理软件中利用查找和替换对话框时，可以在字处理软件和查找替换对话框之间切换进行交互，这就是个非模态对话框。
先来看一下QDialog类的继承关系，如下图所示。
QDialog从QWidget继承，然后它下面又被Qt的内置对话框类（QFileDialog选择文件或目录对话框、QFontDialog选择字体对话框、QMessageBox消息提示对话框等）继承。用户要实现自己的对话框，需要继承自QDialog类，并包含头文件<QDialog>。
一、快速设计对话框
例子1：
实现一个Find（查找对话框），它的运行效果如下图所示，这将实现一个拥有自主权的对话框。
程序清单如下：
finddialog.h
1 #ifndef FINDDIALOG_H 2 #define FINDDIALOG_H 3 4 #include <QDialog> 5 #include <QCheckBox> 6 #include <QLabel> 7 #include <QLineEdit> 8 #include <QPushButton> 9 10 class FindDialog : public QDialog 11 { 12 Q_OBJECT 13 14 public: 15 FindDialog(QWidget *parent = 0); 16 ~FindDialog(); 17 18 signals: 19 void findNext(const QString &str, Qt::CaseSensitivity cs); 20 void findPrevious(const QString &str, Qt::CaseSensitivity cs); 21 22 private slots: 23 void findClicked(); 24 void enableFindButton(const QString &text); 25 26 private: 27 QLabel *label; 28 QLineEdit *lineEdit; 29 QCheckBox *caseCheckBox; 30 QCheckBox *backwardCheckBox; 31 QPushButton *findButton; 32 QPushButton *closeButton; 33 }; 34 35 #endif // FINDDIALOG_H
finddialog.cpp:
1 #include <QtGui> 2 #include "finddialog.h" 3 4 FindDialog::FindDialog(QWidget *parent) 5 : QDialog(parent) 6 { 7 label = new QLabel(tr("Find &what")); //tr()函数是把它们翻译成其他语言的标志，“&”来表示快捷键（Alt+W） 8 lineEdit = new QLineEdit; 9 label->setBuddy(lineEdit);//设置行编辑器为标签的伙伴，按下标签的快捷键（Alt+W）时接收焦点，焦点会移动到行编辑器 10 11 caseCheckBox = new QCheckBox(tr("Math &case")); 12 backwardCheckBox = new QCheckBox(tr("Search &backward")); 13 14 findButton = new QPushButton(tr("&Find")); 15 findButton->setDefault(true);//设置“Find”按钮为默认按钮，默认按钮就是当用户Enter键时能够按下对应的按钮 16 findButton->setEnabled(false);//禁用“Find”按钮，它通常显示为灰色，不能和用户进行交互操作 17 18 closeButton = new QPushButton(tr("Close")); 19 20 connect(lineEdit, SIGNAL(textChanged(const QString &)), this, SLOT(enableFindButton(const QString &))); 21 connect(findButton, SIGNAL(clicked()), this, SLOT(findClicked())); 22 connect(closeButton, SIGNAL(clicked()), this, SLOT(close())); 23 24 QHBoxLayout *topLeftLayout = new QHBoxLayout; 25 topLeftLayout->addWidget(label); 26 topLeftLayout->addWidget(lineEdit); 27 28 QVBoxLayout *leftLayout = new QVBoxLayout; 29 leftLayout->addLayout(topLeftLayout); 30 leftLayout->addWidget(caseCheckBox); 31 leftLayout->addWidget(backwardCheckBox); 32 33 QVBoxLayout *rightLayout = new QVBoxLayout; 34 rightLayout->addWidget(findButton); 35 rightLayout->addWidget(closeButton); 36 rightLayout->addStretch(); 37 38 QHBoxLayout *mainLayout = new QHBoxLayout; 39 mainLayout->addLayout(leftLayout); 40 mainLayout->addLayout(rightLayout); 41 setLayout(mainLayout); //将mainLayout布局安装在FindDialog 42 43 setWindowTitle(tr("Find")); 44 setFixedHeight(sizeHint().height()); 45 } 46 47 void FindDialog::findClicked() 48 { 49 QString text = lineEdit->text(); 50 Qt::CaseSensitivity cs = caseCheckBox->isChecked() ? Qt::CaseSensitive : Qt::CaseInsensitive; 51 if (backwardCheckBox->isChecked()) 52 { 53 emit findPrevious(text, cs); 54 } 55 else 56 { 57 emit findNext(text, cs); 58 } 59 } 60 61 void FindDialog::enableFindButton(const QString &text) 62 { 63 findButton->setEnabled(!text.isEmpty()); 64 } 65 66 FindDialog::~FindDialog() 67 { 68 69 }
main.cpp
#include <QApplication> #include "finddialog.h" int main(int argc, char *argv[]) { QApplication a(argc, argv); FindDialog *w = new FindDialog; w->show(); return a.exec(); }
编译运行就出现上图效果了。
例子2：
使用Qt designer设置对话框，实现效果如下图：
基本步骤：
1、创建并初始化子窗口部件；
2、把子窗口部件放在布局中；
3、设置Tab键顺序；
4、建立信号-槽之间的连接；
5、实现对话框的自定义槽。
第一步是创建子窗口部件并且把它们放置到窗体中。创建一个标签（Label）、一个行编辑器（Line Edit）、一个水平分隔符（Horizontal Spacer）、两个按钮（Push Button）。
使用Qt设计师的属性编辑器设置每个窗口部件的属性：
1、单击文本标签。确保此时objectName的属性是“label”，将它的text属性设置成“&Cell Location”。
2、单击行编辑器。确保objectName属性是“lineEdit”。
3、单击第一个按钮。将它的objectName属性设置成“okButton”，将它的enabled属性设置成“false”，将它的text属性设置成“OK”，并且把它的default属性设置成“true”。
4、单击第二个按钮。将它的objectName属性设置成“cancelButton”，并且将它的text属性设置成“Cancel”。
5、单击这个窗体中空白的地方，选中窗体本身。将它的windowTitle属性设置成“Go to Cell”。
6、单击Edit->Edit Buddies进入一种允许设置窗口部件伙伴（buddy）的特殊模式。然后，单击这个标签并把红色箭头拖到行编辑器上，释放鼠标按键。单击Edit->Edit Widgets离开伙伴设置模式。
下一步是在窗体中摆放这些窗口部件，步骤如下：
1、单击“Cell Location”标签并且按下ctrl键是单击与之相邻的行编辑器，这样就可以同时选择了它们，然后选择水平布局（Lay Out Horizontally）。
2、选中分隔符、OK按钮和Cancel按钮，然后选择水平布局（Lay Out Horizontally）。
3、单击窗体中的空白，取消对所有已选中项的选择，然后单击垂直布局（Lay Out Vertically）。
4、单击Edit->Edit Tab Order。在每一个可以接受焦点的窗口部件上，都会出现一个带蓝色矩形的数字，如下图所示。按照你所希望的接受焦点的顺序单击每一个窗口部件，然后单击Edit->Edit Widgets离开Tab键顺序设置模式。
接下来添加代码：
main.cpp
1 #include <QApplication> 2 #include "mywidget.h" 3 4 int main(int argc, char *argv[]) 5 { 6 QApplication a(argc, argv); 7 MyDialog w; 8 w.show(); 9 10 return a.exec(); 11 }
mywidget.h
1 #ifndef MYWIDGET_H 2 #define MYWIDGET_H 3 4 #include <QDialog> 5 6 namespace Ui { 7 class MyDialog; 8 } 9 10 class MyDialog : public QDialog 11 { 12 Q_OBJECT 13 14 public: 15 explicit MyDialog(QDialog *parent = 0); 16 ~MyDialog(); 17 18 private slots: 19 void on_lineEdit_textChanged(); 20 21 private: 22 Ui::MyDialog *ui; 23 }; 24 25 #endif // MYWIDGET_H
mywidget.cpp
1 #include "mywidget.h" 2 #include "ui_mywidget.h" 3 4 MyDialog::MyDialog(QDialog *parent) : 5 QDialog(parent), 6 ui(new Ui::MyDialog) 7 { 8 ui->setupUi(this); 9 10 QRegExp regExp("[A-Za-z][1-9][0-9]{0,2}");//建立一个正则表达式 11 ui->lineEdit->setValidator(new QRegExpValidator(regExp, this)); //检验器限制输入的范围， 12 //Qt提供3个内置检验器类：QIntValidator、QDoubleValidator、QRegExpValidator 13 14 connect(ui->okButton, SIGNAL(clicked()), this, SLOT(accept())); //accept()槽函数关闭对话框，将对话框返回的结果变量设置为QDialog::Accepted(其值为1) 15 connect(ui->cancelButton, SIGNAL(clicked()), this, SLOT(reject()));//reject()槽函数关闭对话框，将对话框返回的结果变量设置为QDialog::Reject(其值为0) 16 } 17 18 void MyDialog::on_lineEdit_textChanged() 19 { 20 ui->okButton->setEnabled(ui->lineEdit->hasAcceptableInput()); 21 } 22 23 MyDialog::~MyDialog() 24 { 25 delete ui; 26 }
最后点击
编译运行就ok了。
二、可扩展的对话框
这部分内容直接截取别人的，不想写。
前面我们设计的对话框都是不能改变它的样子的。但是有时需要对话框根据要求进行适当的改变。两个最常用的需要改变的对话框是可扩展对话框和多页对话框。这两种类型的可以通过代码编写，也可以用Qt Designer设计。一个例子如下图所示：
可扩展对话框通常外观简单，带有一个可扩展按钮来切换对话框的简单外观和可扩展外观。这种对话框通常为了迎合普通用户和高端用户而设计的，如果没有特别请求隐藏高级应用部分。在这个实验中，我们使用 Qt Designer设计一个可扩展对话框。
对话框是一个表格程序的排序对话框，对用户选择的一些列按要求排列。对话框的简单外观允许用户输入一个简单排序关键词，扩展部分允许输入两个额外的排序关键词。一个More按钮使用户在简单外观和扩展外观进行切换。
我们使用 Qt Designer创建这个可扩展的对话框，在运行时刻隐藏高级功能，这个看起来很复杂的对话框用Qt Designer可以很容易实现。首先设计好第一个关键词，第二个和第三个关键词通过复制就可以得到：
1、 启动“文件”?“新建”菜单，选择“Dialog without Buttons”模板。
2、 拖动一个PushButton按钮并把它拖放到窗体的右上角。将它的objectName修改为“okButton”，并将它的default属性设置为“true”，将它的text属性设置为“确定”，这就创建了OK按钮。
3、 同样的办法创建Cancel按钮，放到OK按钮的下方，将objectName修改为“cancelButton”，将text属性设置为“取消”。
4、 创建一个垂直分隔符（Vertical Spacer）并将它放到Cancel按钮的下方，然后再创建一个More按钮，并将它放在垂直分隔符的下方，将More按钮的objectName修改为“moreButton”，text属性设置为“(&M)更多”，checkable属性设置为“true”。
5、 选择OK按钮，Cancel按钮，垂直分隔符和More按钮，将它们的布局设定为“垂直布局”。
6、 创建一个群组框（GroupBox），两个标签（Label），两个下拉组合框（Combo Box）和一个水平分隔符（Horizontal Spacer），先把它们放在对话框的任何地方。
7、 拖动群组框的右下角，把它拖动变大些，把上一步中其他控件移动到群组框中，按比例调整位置。当你按住鼠标左键将其他部件拖动到群组框内的时候，应该在群组框显示出灰色的时候才松开鼠标，否则，有可能部件只是挨着群组框并没有正确的放入其中。
8、 拖动第二个下拉组合框，将其宽度调整为第一个下拉框的二倍左右。现在看起来的情况大概如下图所示：
9、 将群组框的title属性设置为“&Primary Key”，第一个标签的text属性设置为“Column:”，
第二个标签的text属性为“Order:”。
10、 右键单击第一个组合框，从Qt设计师弹出的右键菜单的组合框编辑器中选择“编辑项目”，
用文本“None”创建一个项目。
11、同样的方式对第二个组合框创建两个项目，项目为“Ascending”和“Descending”两个项目，
即升序和降序排列。
12、右键单击群组框，然后选择“布局”?“栅格布局”。再次右键单击群组框，并选择“布局”
->“调整大小”，这个操作也可以通过单击工具栏上的按钮“
”来完成，产生的布局如上图2的右图所示布局。
如果设计过程中出现错误，可以选择 “编辑”?“撤销”或者“打破布局”工具按钮，重新进行布局。当然只要看起来不是很难看，也可以是其他的样子，只要易于理解就是ok。
现在加入其它两个群组框：Secondary Key和Teriary Key：
1、将对话框拖动到足够大，以便能容纳下另外两个部分。
2、复制第一个组合框，粘贴两次，依次拖动到下面。
3、把复制的两个组合框的title属性为“&Secondary Key”和“&Tertiary Key”。
4、创建一个垂直分隔符（Vertical Spacer），并将它放在Primary Key群组框和Secondary Key群组框的中间。
5、适当调整添加的控件的位置。
6、选择对话框中的所有控件，降它们的布局设置为“栅格布局”，得到的效果应该如下图3（a）。
7、单击窗体，取消对窗口中任意控件的选择，将整个对话框窗体的布局设置为“栅格布局”。然后向上和向左拖动窗体的右下角，将窗体变得尽可能小，设置两个垂直空白的sizeHint属性为[20,0]。现在窗体应该像下图3（b）所示：
最终的网格布局是4行2列，一共有8个单元格。如果你做出来的不是这样，那么请撤销布局，重新进行布局。
按照下图命名每一个控件。命名对话框为 SortDialog，窗口标题为“Sort”。对各个控件进行命名，也就是修改控件的objectName属性，最终结果如下图4：
设置Tab顺序，从上到下点击下拉框，然后点击Ok，Cancel，More按钮。最终的顺序如下图（a）：
以上是对话框的设计。然后用 Qt Designer建立控件的信号连接，单击工具栏上的（即编辑信号/槽），切换到信号/槽的编辑状态。将“确认”和“取消”按钮连接到对话框的accept()和reject()槽函数。操作方法是点击“确认按钮”并拖动到对话框的空白处即可，然后在弹出的对话框中左边点选clicked()信号，右边点选accept()槽函数，如上图（b）所示。同样的方法将“取消”按钮连接到reject()槽函数。
然后连接“更多”按钮和secondaryGroupBox群组框，将按钮的toggled(bool)信号和群组框的setVisible(bool)槽函数连接。同样将“更多”按钮与tertiaryGroupBox群组框setVisible(bool)槽函数连接。在连接的时候，可能看不到群组框的setVisible(boo)槽函数，这时在连接对话框（图5（b））中点选“显示从QWidget继承的信号和槽”即可看到。
最终的连接情况如下图6所示，我们可以在“信号/槽编辑器”中清楚地看到连接情况。
创建一个 sort目录，将对话框保存到sort目录下，文件名为：sortdialog.ui。
下面给这个窗体添加代码，我们使用多继承的方式使用这个对话框，也就是创建一个新的类来继承QDialog类和这个窗体的类。
首先新建一个sortdialog.h头文件，代码如下：
然后新建sortdialog.cpp源文件：
1 #include <QtGui> 2 #include "sortdialog.h" 3 SortDialog::SortDialog(QWidget *parent):QDialog(parent) 4 { 5 setupUi(this); 6 secondaryGroupBox->hide(); 7 tertiaryGroupBox->hide(); 8 layout()->setSizeConstraint(QLayout::SetFixedSize); 9 setColumnRange('A', 'Z'); 10 } 11 void SortDialog::setColumnRange(QChar first, QChar last) 12 { 13 primaryColumnCombo->clear(); 14 secondaryColumnCombo->clear(); 15 tertiaryColumnCombo->clear(); 16 secondaryColumnCombo->addItem(tr("None")); 17 tertiaryColumnCombo->addItem(tr("None")); 18 primaryColumnCombo->setMinimumSize(secondaryColumnCombo->sizeHint()); 19 QChar ch = first; 20 while (ch <= last) { 21 primaryColumnCombo->addItem(QString(ch)); 22 secondaryColumnCombo->addItem(QString(ch)); 23 tertiaryColumnCombo->addItem(QString(ch)); 24 ch = ch.unicode() + 1; 25 } 26 }
在构造函数中，隐藏了secondaryGroupBox和tertiaryGroupBox群组框部分。并设置对话框的sizeConstraint的属性为QLayout::setFixedSize，这样用户不能随便改变对话框的大小。
下面是main.cpp文件：
编译运行这个程序，点击“更多”按钮，查看对话框的改变，结果应该与图1一样。另一种可以改变的对话框是多页对话框。这类对话框也可以用两种方式创建。相关的类有QTabWidget,QStackedWidget,QListWidget,QTreeWidget等。