《Qt 5.9 C++开发指南》第2.3节 代码化UI设计【完整版】

2.3 代码化UI设计

UI的可视化设计是对用户而言的，其实底层都是C++的代码实现，只是Qt巧妙的进行了处理，让用户省去了很多繁琐的界面设计工作。

由于界面设计的底层其实都是C++语言实现的，底层实现的功能比可视化设计更加强大和灵活。某些界面效果是可视化设计无法完成的，或者某些人习惯了用纯代码的方式来设计界面，就可以采用纯代码的方式设计界面，例如Qt自带的实例基本都是用纯代码方式实现用户界面的。

所以，本节介绍一个用纯代码方式设计UI的实例，通过实例了解用纯代码设计UI的基本原理。与前面的可视化UI设计相对应，且称之为代码化UI设计。

2.3.1 实例功能

【本节完整实例程序项目samp2_3下载地址】https://download.csdn.net/download/hongandyi/10419522

首先建立一个Widget Appliation项目samp2_3，在创建项目向导中选择基类时，选择基类QDialog，新类的名称命名为QWDlgManual，关键是取消创建窗体，即不勾选“Generate form”复选框。创建后的项目文件目录树下没有qwdlgmanual.ui文件。

该项目通过代码创建一个对话框，实现与samp2_2类似的界面和功能。本例完成后的运行效果如图2-14所示，其界面和功能与samp2_2类似。

图2-14实例samp2_3运行效果

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个槽函数，分别是三个CheckBox的响应槽函数，以及三个颜色设置的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三个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三个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);
//创建 确定, 取消, 退出 三个 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()函数按照顺序完成了如下的功能：

●      创建三个QCheckBox组件，这三个组件的指针已经定义为QWDlgManual的私有变量，然后创建一个水平布局HLay1，将三个CheckBox添加到这个水平布局里。

●      创建三个QRadioButton组件，并创建一个水平布局HLay2，将三个RadioButton添加到这个水平布局里。

●      创建三个QPushButton组件，并创建一个水平布局HLay3，将三个PushButton添加到这个水平布局里，并适当添加水平空格。

●      创建一个QPlainTextEdit组件，设置其文字内容，并设置其字体。

●      创建一个垂直布局VLay，将前面创建的三个水平布局和文本框依次添加到此布局里。

●      设置垂直布局为窗体的主布局。

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

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

2.3.3 信号与槽的关联

在纯代码设计UI时，信号与槽的关联也需要用代码来完成。函数iniSignalSlots()初始化所有的信号与槽的关联，其完整代码如下。

void QWDlgManual::iniSignalSlots()
{
//三个颜色 QRadioButton的clicked()信号与setTextFontColor()槽函数关联
    connect(rBtnBlue,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
    connect(rBtnRed,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
    connect(rBtnBlack,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
//三个字体设置的  QCheckBox 的clicked(bool)信号与相应的槽函数关联
    connect(chkBoxUnder,SIGNAL(clicked(bool)),
                    this,SLOT(on_chkBoxUnder(bool)));
    connect(chkBoxItalic,SIGNAL(clicked(bool)),
                     this,SLOT(on_chkBoxItalic(bool)));
    connect(chkBoxBold,SIGNAL(clicked(bool)),
                    this,SLOT(on_chkBoxBold(bool)));
//三个按钮的信号与窗体的槽函数关联
    connect(btnOK,SIGNAL(clicked()),this,SLOT(accept()));
    connect(btnCancel,SIGNAL(clicked()),this,SLOT(reject()));
    connect(btnClose,SIGNAL(clicked()),this,SLOT(close()));
}

设计完成后，编译并运行程序，可以得到如图2-14的运行效果，且功能与samp2_2相同。很显然，采用纯代码方式实现UI界面是比较复杂的，代码设计工作量大而繁琐。

【本节完整实例程序项目samp2_3下载地址】https://download.csdn.net/download/hongandyi/10419522

<总目录>         <第2章>        <上一节>        <下一节>