当前位置：首页 > news >正文

代码化 UI 设计：脱离 Qt 设计师，手写 C++ 构建界面

news 2026/8/14 14:35:35

Qt 的 UI 可视化设计给开发带来极大便利，拖拽控件、修改属性，就能快速搭出交互界面，ui 文件经过 qmake 编译，最终同样生成 C++ 代码。可视化工具简化了开发，但它并不是唯一的界面开发方式。Qt 很多官方示例，完全不使用 ui 文件，全部依靠 C++ 代码动态创建控件、布局、绑定信号槽，这种方式叫做代码化 UI 设计。

代码化 UI 拥有独有的优势：灵活性更高，部分动态界面效果拖拽设计器很难实现；不需要维护 ui 文件，全部逻辑写在 cpp 头文件中，适合高度动态变化的界面。当然它也有短板，所有控件、布局、尺寸全部手写，开发工作量更大，界面预览不直观。

我们以 QDialog 对话框为载体，完整手写一套交互界面。在构造函数中调用iniUI()完成控件创建布局，调用iniSignalSlots()绑定信号槽。在iniUI()函数内部，使用 new 动态创建QCheckBox、QRadioButton、QPlainTextEdit、QPushButton各类控件，再搭配QHBoxLayout水平布局、QVBoxLayout垂直布局管理控件位置。

布局是代码化 UI 的核心，不手动写控件坐标，依靠布局管理器自动排布。将复选框放进水平布局 HLay1，单选按钮放入 HLay2，按钮控件放入 HLay3，再把三组子布局与文本编辑器，全部加入主垂直布局，最后调用setLayout()设置对话框主布局，界面就自动完成排布，窗口缩放时控件会自动适配大小。

控件创建完成后，需要绑定信号与槽实现交互。iniSignalSlots()中使用 connect 函数，把单选按钮点击信号绑定setTextFontColor()，复选框绑定下划线、斜体、加粗处理函数，按钮绑定对话框自带accept()、reject()实现确定取消逻辑。

复选框功能逻辑比较直观，读取勾选状态，获取控件字体对象，修改下划线、斜体、加粗属性，再回写给文本框，实时改变文字样式。

对比可视化 UI，代码化 UI 适合界面元素动态变化的场景；普通业务开发，可视化设计师效率更高。两种方式底层等价，掌握手写 UI，能够帮助我们看透 Qt 界面运行底层原理，加深对控件、布局、信号槽的理解。

运行之后的效果：

#ifndef QWDLGMANUAL_H #define QWDLGMANUAL_H #include <QDialog> #include <QCheckBox> #include <QHBoxLayout> #include <QRadioButton> #include <QPlainTextEdit> #include <QPushButton> namespace Ui { class QWDlgManual; } class QWDlgManual : public QDialog { Q_OBJECT public: explicit QWDlgManual(QWidget *parent = 0); ~QWDlgManual(); QCheckBox * chkBoxUnder; QCheckBox * chkBoxItalic; QCheckBox * chkBoxBold; QRadioButton * rBtnBlack; QRadioButton * rBtnRed; QRadioButton * rBtnBlue; QPlainTextEdit* txtEdit; QPushButton *btnOK; QPushButton *btnCancel; QPushButton *btnClose; void iniUI(); void iniSignalSlots(); private slots: void setTextFontColor(); void on_chkBoxUnder(bool checked); //Underline 的clicked(bool)信号的槽函数 void on_chkBoxItalic(bool checked);//Italic 的clicked(bool)信号的槽函数 void on_chkBoxBold(bool checked); //Bold 的clicked(bool)信号的槽函数 private: Ui::QWDlgManual *ui; }; #endif // QWDLGMANUAL_H

#include "qwdlgmanual.h" #include "ui_qwdlgmanual.h" QWDlgManual::QWDlgManual(QWidget *parent) : QDialog(parent), ui(new Ui::QWDlgManual) { ui->setupUi(this); iniUI(); iniSignalSlots(); } QWDlgManual::~QWDlgManual() { delete ui; } void QWDlgManual::iniUI() { 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); 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(rBtnBlue); HLay2->addWidget(rBtnRed); txtEdit=new QPlainTextEdit; txtEdit->setPlainText("Hello World, \nthis is my demo."); QFont font=txtEdit->font(); font.setPointSize(20); txtEdit->setFont(font); btnOK=new QPushButton(tr("确定")); btnCancel=new QPushButton(tr("取消")); btnClose=new QPushButton(tr("退出")); QHBoxLayout *HLay3=new QHBoxLayout; HLay3->addWidget(btnOK); HLay3->addWidget(btnCancel); HLay3->addWidget(btnClose); QVBoxLayout *VLay=new QVBoxLayout; VLay->addLayout(HLay1); //添加字体类型组 VLay->addLayout(HLay2);//添加字体颜色组 VLay->addWidget(txtEdit);//添加 PlainTextEdit VLay->addLayout(HLay3);//添加确认按钮 setLayout(VLay); //设置为窗体的主布局 } 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())); } void QWDlgManual::setTextFontColor() { QPalette plet=txtEdit->palette(); if (rBtnBlue->isChecked()) plet.setColor(QPalette::Text,Qt::blue); else if (rBtnRed->isChecked()) plet.setColor(QPalette::Text,Qt::red); else if (rBtnBlack->isChecked()) plet.setColor(QPalette::Text,Qt::black); else plet.setColor(QPalette::Text,Qt::black); txtEdit->setPalette(plet); } void QWDlgManual::on_chkBoxUnder(bool checked) { QFont font=txtEdit->font(); font.setUnderline(checked); txtEdit->setFont(font); } void QWDlgManual::on_chkBoxItalic(bool checked) { QFont font=txtEdit->font(); font.setItalic(checked); txtEdit->setFont(font); } void QWDlgManual::on_chkBoxBold(bool checked) { QFont font=txtEdit->font(); font.setBold(checked); txtEdit->setFont(font); }

查看全文

http://www.jsqmd.com/news/1392148/