15-界面创建

2.3.2　界面创建

1．QWDlgManual类定义

完成功能后的qwdlgmanual.h文件中QWDlgManual类的完整定义如下。

#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>
class QWDlgManual : public QDialog
{
   Q_OBJECT
private:
   QCheckBox   *chkBoxUnder;
   QCheckBox   *chkBoxItalic;
   QCheckBox   *chkBoxBold;
   QRadioButton    *rBtnBlack;
   QRadioButton    *rBtnRed;
   QRadioButton    *rBtnBlue;
   QPlainTextEdit  *txtEdit;
   QPushButton     *btnOK;
   QPushButton     *btnCancel;
   QPushButton     *btnClose;
   void    iniUI();  //UI 创建与初始化
   void    iniSignalSlots(); //初始化信号与槽的链接
private slots:
   void on_chkBoxUnder(bool checked); //Underline的槽函数
   void on_chkBoxItalic(bool checked);//Italic的槽函数
   void on_chkBoxBold(bool checked); //Bold的槽函数
   void setTextFontColor(); //设置字体颜色
public:
   QWDlgManual(QWidget *parent = 0);
   ~QWDlgManual();
};

在QWDlgManual类的private部分，声明了界面上的各个组件的指针变量，这些界面组件都需要在QWDlgManual类的构造函数里创建并在窗体上布局。

在private部分自定义了两个函数，iniUI()用来创建所有界面组件，并完成布局和属性设置，iniSignalSlots()用来完成所有的信号与槽函数的关联。

在private slots部分声明了4个槽函数，分别是3个CheckBox的响应槽函数，以及3个颜色设置的RadioButton的共同响应槽函数。

注意 与可视化设计得到的窗体类定义不同，QWDlgManual的类定义里没有指向界面的指针ui。

这几个槽函数的功能与例samp2_2中的类似，只是在访问界面组件时，无需使用ui指针，而是直接访问QWDlgManual类里定义的界面组件的成员变量即可，例如on_chkBoxUnder()的代码：

void QWDlgManual::on_chkBoxUnder(bool checked)
{
   QFont   font=txtEdit->font();
   font.setUnderline(checked);
   txtEdit->setFont(font);
}

界面的创建，以及信号与槽函数的关联都在QWDlgManual的构造函数里完成，构造函数代码如下：

QWDlgManual::QWDlgManual(QWidget *parent) : QDialog(parent)
{
   iniUI(); //界面创建与布局
   iniSignalSlots(); //信号与槽的关联
   setWindowTitle("Form created mannually");
}

构造函数调用iniUI()创建界面组件并布局，调用iniSignalSlots()进行信号与槽函数的关联。

2．界面组件的创建与布局

iniUI()函数实现界面组件的创建与布局，以及属性设置。下面是iniUI()的完整代码。

void QWDlgManual::iniUI()
{ //创建 Underline, Italic, Bold 3个CheckBox，并水平布局
   chkBoxUnder=new QCheckBox(tr("Underline"));
   chkBoxItalic=new QCheckBox(tr("Italic"));
   chkBoxBold=new QCheckBox(tr("Bold"));
   QHBoxLayout *HLay1=new QHBoxLayout;
   HLay1->addWidget(chkBoxUnder);
   HLay1->addWidget(chkBoxItalic);
   HLay1->addWidget(chkBoxBold);
//创建 Black, Red, Blue 3个RadioButton，并水平布局
   rBtnBlack=new QRadioButton(tr("Black"));
   rBtnBlack->setChecked(true);
   rBtnRed=new QRadioButton(tr("Red"));
   rBtnBlue=new QRadioButton(tr("Blue"));
   QHBoxLayout *HLay2=new QHBoxLayout;
   HLay2->addWidget(rBtnBlack);
   HLay2->addWidget(rBtnRed);
   HLay2->addWidget(rBtnBlue);
//创建 确定, 取消, 退出3个 PushButton, 并水平布局
   btnOK=new QPushButton(tr("确定"));
   btnCancel=new QPushButton(tr("取消"));
   btnClose=new QPushButton(tr("退出"));
   QHBoxLayout *HLay3=new QHBoxLayout;
   HLay3->addStretch();
   HLay3->addWidget(btnOK);
   HLay3->addWidget(btnCancel);
   HLay3->addStretch();
   HLay3->addWidget(btnClose);
//创建 文本框,并设置初始字体
   txtEdit=new QPlainTextEdit;
   txtEdit->setPlainText("Hello world\n\nIt is my demo");
   QFont   font=txtEdit->font(); //获取字体
   font.setPointSize(20);//修改字体大小
   txtEdit->setFont(font);//设置字体
//创建 垂直布局，并设置为主布局
   QVBoxLayout *VLay=new QVBoxLayout;
   VLay->addLayout(HLay1); //添加字体类型组
   VLay->addLayout(HLay2);//添加字体颜色组
   VLay->addWidget(txtEdit);//添加PlainTextEdit
   VLay->addLayout(HLay3);//添加按键组
   setLayout(VLay); //设置为窗体的主布局
}

iniUI()函数按照顺序完成了如下的功能。

• 创建3个QCheckBox组件，这3个组件的指针已经定义为QWDlgManual的私有变量，然后创建一个水平布局HLay1，将3个CheckBox添加到这个水平布局里。
• 创建3个QRadioButton组件，并创建一个水平布局HLay2，将3个RadioButton添加到这个水平布局里。
• 创建3个QPushButton组件，并创建一个水平布局HLay3，将3个PushButton添加到这个水平布局里，并适当添加水平空格。
• 创建一个QPlainTextEdit组件，设置其文字内容，并设置其字体。
• 创建一个垂直布局VLay，将前面创建的3个水平布局和文本框依次添加到此布局里。
• 设置垂直布局为窗体的主布局。

如此创建组件并设置布局后，运行可以得到如图2-14所示的界面效果。这里完全是采用代码来实现组件创建与布局的设置，而这些功能在可视化设计中是由setupUi()函数根据界面的可视化设计结果自动实现的。

采用代码设计实现UI时，需要对组件的布局有个完整的规划，不如可视化设计直观，且编写代码工作量大。