qt的代码化UI设计(关注槽函数如何实现和GUI开发布局)

1.项目结构

1.1 项目创建
创建一个基类为Dialog的，窗口类名为QWlgmannual,不带UI界面的项目

2.文件代码

2.1 ui_code_design.pro

// 导入QT的GUI核心库
QT       += core gui

// qtversion > 4:执行
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets

// 使用c++11标准
CONFIG += c++11

# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Please consult the documentation of the
# deprecated API in order to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS

# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000    # disables all the APIs deprecated before Qt 6.0.0
// 源文件
SOURCES += \
    main.cpp \
    qdwlgmannual.cpp
// 头文件
HEADERS += \
    qdwlgmannual.h

# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target

2.2 qdwlgmannual.h

#ifndef QDWLGMANNUAL_H
#define QDWLGMANNUAL_H

#include <QDialog>
#include <QCheckBox>
#include <QRadioButton>
#include <QPlainTextEdit>
#include <QPushButton>


class QDWlgMannual : public QDialog
{
    // 使用槽函数的宏
    Q_OBJECT

public:
    QDWlgMannual(QWidget *parent = nullptr);
    ~QDWlgMannual();

private:
    QCheckBox *underline,*italic,*bold;
    QRadioButton *black,*red,*blue;
    QPlainTextEdit *txt;
    QPushButton *ok,*cancel,*close;
    // UI创建与初始化
    void initUI();
    // 初始化信号和槽的连接
    void initSignalSlots();

// 槽函数声明
private slots:
    // 设置点击事件
    void on_underline(bool checked);
    void on_italic(bool checked);
    void on_bold(bool checked);
    // 设置字体颜色
    void setTextFontColor();
};
#endif // QDWLGMANNUAL_H

2.3 qwdlgmannual.cpp

#include "qdwlgmannual.h"
#include <QHBoxLayout>
#include <QVBoxLayout>

// 构造函数
QDWlgMannual::QDWlgMannual(QWidget *parent)
    : QDialog(parent)
{
    // UI界面布局和创建
    initUI();
    // 信号和槽函数的关联
    initSignalSlots();
    setWindowTitle("Form created mannualy");
}
// 析构函数,释放指针
QDWlgMannual::~QDWlgMannual()
{
    delete underline;
    delete italic;
    delete bold;
    delete black;
    delete red;
    delete blue;
    delete txt;
    delete ok;
    delete cancel;
    delete close;
}
// UI界面组件创建和布局,以及属性设置
void QDWlgMannual::initUI(){
    // 创建underline,italic,bold 3个QCheckBox,并设置水平布局
    underline = new QCheckBox(tr("underline"));
    italic = new QCheckBox(tr("italic"));
    bold = new QCheckBox(tr("bold"));
    QHBoxLayout *l1_font = new QHBoxLayout;
    l1_font->addWidget(underline);
    l1_font->addWidget(italic);
    l1_font->addWidget(bold);
    // 创建black,red,blue 3个QRadioButton,并设置水平布局
    black = new QRadioButton(tr("black"));
    red = new QRadioButton(tr("red"));
    blue = new QRadioButton(tr("blue"));
    QHBoxLayout *l2_font_color = new QHBoxLayout;
    l2_font_color->addWidget(black);
    l2_font_color->addWidget(red);
    l2_font_color->addWidget(blue);
    // 创建确定,取消,退出 3个QPushButton,并水平布局
    ok = new QPushButton(tr("ok"));
    cancel = new QPushButton(tr("cancel"));
    close = new QPushButton(tr("close"));
    QHBoxLayout *l3_button = new QHBoxLayout;
    l3_button->addWidget(ok);
    l3_button->addWidget(cancel);
    l3_button->addWidget(close);
    // 创建文本框,并设置初始字体
    txt = new QPlainTextEdit;
    txt->setPlainText("Hello World\n\nIt is my demo");
    QFont font = txt->font();  // 获取txt的字体对象
    font.setPointSize(20);     // 设置font的字体大小
    txt->setFont(font);        // 设置txt的字体
    // 创建垂直布局,并设置主界面布局为垂直布局
    QVBoxLayout *l4_main = new QVBoxLayout;
    l4_main->addLayout(l1_font); // 添加字体类型组
    l4_main->addLayout(l2_font_color); // 添加字体颜色组
    l4_main->addWidget(txt);        // 添加txt文本输入框
    l4_main->addLayout(l3_button);  // 添加按钮组
    // 设置主窗口布局为垂直布局
    setLayout(l4_main);
}
// 信号和槽函数关联
void QDWlgMannual::initSignalSlots(){
    // 3个字体设置的 QCheckBox的clicked（）信号和相应的槽函数关联
    connect(underline,SIGNAL(clicked(bool)),this,SLOT(on_underline(bool)));
    connect(italic,SIGNAL(clicked(bool)),this,SLOT(on_italic(bool)));
    connect(bold,SIGNAL(clicked(bool)),this,SLOT(on_bold(bool)));
    // 3个颜色QRadioButton的clicked（）信号和setTextFontColor()槽函数关联
    connect(black,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
    connect(red,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
    connect(blue,SIGNAL(clicked()),this,SLOT(setTextFontColor()));
    // 3个按钮的信号和窗体的槽函数关联
    connect(ok,SIGNAL(clicked()),this,SLOT(accept()));
    connect(cancel,SIGNAL(clicked()),this,SLOT(reject()));
    connect(close,SIGNAL(clicked()),this,SLOT(close()));
}

// 槽函数实现
void QDWlgMannual::on_underline(bool checked){
    QFont font = txt->font();
    font.setUnderline(checked);
    txt->setFont(font);
}
void QDWlgMannual::on_italic(bool checked){
    QFont font = txt->font();
    font.setItalic(checked);
    txt->setFont(font);
}
void QDWlgMannual::on_bold(bool checked){
    QFont font = txt->font();
    font.setBold(checked);
    txt->setFont(font);
}

// 设置文字颜色的槽函数
void QDWlgMannual::setTextFontColor(){
    QPalette plet = txt->palette();
    if(black->isChecked())
        plet.setColor(QPalette::Text,Qt::black);
    else if(red->isChecked())
        plet.setColor(QPalette::Text,Qt::red);
    else if(blue->isChecked())
        plet.setColor(QPalette::Text,Qt::blue);
    else
        plet.setColor(QPalette::Text,Qt::yellow);
    txt->setPalette(plet);
}

2.4 主文件

#include "qdwlgmannual.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    // 创建一个应用程序对象
    QApplication a(argc, argv);
    // 创建一个对话框对象
    QDWlgMannual w;
    // 显示组件
    w.show();
    // 进入消息循环和事件等待
    return a.exec();
}