2015.5.29：QT——纯代码设计UI实例分析

学习自：Qt纯代码设计UI实例分析

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

不过，由于底层都是用C++做的，所以底层实现的功能比可视化设计更加强大和灵活，甚至某些界面效果是可视化设计都无法做到的。QT自带的实例基本上都是用纯代码的方式实现用户界面的。

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

 

实例功能

首先创建一个Widget Application项目samp2_3，在创建向导中选择基类时，选择QDialog，新类命名为QWDlgManual，创建过程中取消勾选“Generate form”，这样就取消创建窗体。创建后的项目的文件目录树中没有qwdlgmanual.ui界面设计文件。

该项目通过代码创建一个对话框，实现与samp2_2类似的界面与功能。

运行效果如下：

界面创建

QWDlgManual类定义——qwdlgmanual.h

这一部分是对dlg上的各组件定义、各组件槽函数的定义、UI初始化、信号与槽连接的初始化

#ifndef QWDLGMANUAL_H
#define QWDLGMANUAL_H

#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 * rBtnBlue;
    QRadioButton * rBtnRed;
    QPlainTextEdit * txtEdit;
    QPushButton * btnOK;
    QPushButton * btnCancel;
    QPushButton * btnClose;
    
    void iniUI();//UI创建与初始化
    void iniSignalSlots();//初始化信号与槽的连接
private slots:
    void on_chkBoxUnder(bool);//Underline的clicked(bool)信号的槽函数
    void on_chkBoxItalic(bool);//Italic的clicked(bool)信号的槽函数
    void on_chkBoxBold(bool);//Bold的clicked(bool)信号的槽函数
    void setTextFontColor();//设置字体颜色
public:
    QWDlgManual(QWidget *parent = nullptr);
    ~QWDlgManual();
};
#endif // QWDLGMANUAL_H

在QWDlgManual类的private部分，声明各个组件的指针变量，所有窗体组件都需要在QWDlgManual类的构造函数中创建并布局。

在private部分自定义了两个函数——iniUI()、iniSignalSlots()，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 manually");
}

构造函数调用iniUI()完成界面组件创建与布局，下面是iniUI()的完整代码：

void QWDlgManual::iniUI()
{
    //创建3个CheckBox:Underline,Italic,Bold,水平布局
    chkBoxBold = new QCheckBox(tr("Underline"));
    chkBoxUnder = new QCheckBox(tr("Underline"));
    chkBoxItalic = new QCheckBox(tr("Italic"));
    QHBoxLayout * HLay1 = new QHBoxLayout;
    HLay1->addWidget(chkBoxUnder);
    HLay1->addWidget(chkBoxItalic);
    HLay1->addWidget(chkBoxBold);
    //创建3个RadioButton:Black,Red,Blue,水平布局
    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);
    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 个水平布局和文本框依次添加到此布局里。
  • 设置垂直布局为窗体的主布局。

如此创建组件并设置完成布局之后，运行可以得到如下的界面效果：

 

 这完全是代码设计的结果，这些功能在可视化设计中是由setupUi()函数根据界面的可视化设计结果自动实现的。

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

总结

  1. 纯代码设计UI，在创建项目时要取消勾选Generate form，这样就没有ui文件
  2. 代码化设计与可视化设计不同之处在于，代码化设计的类定义中没有指针ui，可以直接用那些界面上的控件
posted @ 2021-05-29 20:55  ShineLe  阅读(427)  评论(0)    收藏  举报