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

发布时间：2026/10/14 18:04:11

代码化 UI 设计：脱离 Qt 设计师，手写 C++ 构建界面
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() { chkBoxUndernew QCheckBox(tr(underline)); chkBoxItalicnew QCheckBox(tr(Italic)); chkBoxBoldnew QCheckBox(tr(Bold)); QHBoxLayout *HLay1new QHBoxLayout; HLay1-addWidget(chkBoxUnder); HLay1-addWidget(chkBoxItalic); HLay1-addWidget(chkBoxBold); rBtnBlacknew QRadioButton(tr(Black)); rBtnBlack-setChecked(true); rBtnRednew QRadioButton(tr(Red)); rBtnBluenew QRadioButton(tr(Blue)); QHBoxLayout *HLay2new QHBoxLayout; HLay2-addWidget(rBtnBlack); HLay2-addWidget(rBtnBlue); HLay2-addWidget(rBtnRed); txtEditnew QPlainTextEdit; txtEdit-setPlainText(Hello World, \nthis is my demo.); QFont fonttxtEdit-font(); font.setPointSize(20); txtEdit-setFont(font); btnOKnew QPushButton(tr(确定)); btnCancelnew QPushButton(tr(取消)); btnClosenew QPushButton(tr(退出)); QHBoxLayout *HLay3new QHBoxLayout; HLay3-addWidget(btnOK); HLay3-addWidget(btnCancel); HLay3-addWidget(btnClose); QVBoxLayout *VLaynew 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 plettxtEdit-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 fonttxtEdit-font(); font.setUnderline(checked); txtEdit-setFont(font); } void QWDlgManual::on_chkBoxItalic(bool checked) { QFont fonttxtEdit-font(); font.setItalic(checked); txtEdit-setFont(font); } void QWDlgManual::on_chkBoxBold(bool checked) { QFont fonttxtEdit-font(); font.setBold(checked); txtEdit-setFont(font); }

相关新闻

Agent 工具调用设计最容易踩的 5 个坑：MCP Server 不是把 REST API 包一层

Agent 工具调用设计最容易踩的 5 个坑：MCP Server 不是把 REST API 包一层

很多团队做 Agent 工具调用时，最自然的起点是：**把现有的 REST API 包一层，变成 MCP Server。**这很合理。现有 API 已经跑通了，业务逻辑已经验证了，包一层就能让 Agent 调用，看起来是最快的路径。但这也是…

2026/10/9 23:10:34 阅读更多 →
一个样品，一次合作：知医邦泡泡米是如何丰富企业大健康产品开发新原料需求的

一个样品，一次合作：知医邦泡泡米是如何丰富企业大健康产品开发新原料需求的

在大健康食品领域，越来越多企业开始关注药食同源原料。但对于企业来说，寻找一个原料并不是终点。真正重要的是：这个原料能不能进入食品生产体系？能不能适配不同产品开发需求？能不能根据市场变化进行调整？这…

2026/10/8 21:29:37 阅读更多 →
让 Agent RAG 真正好用，检索质量是关键，多路召回 + 重排序

让 Agent RAG 真正好用，检索质量是关键，多路召回 + 重排序

一、多路召回与重排序：工程级的检索优化 要让 Agent RAG 真正好用，检索质量是关键。工程实践中，最有效的提升策略是多路召回 重排序。 多路召回策略：三种检索方式融合用户查询并行触发三路：向量检索（语义相…

2026/10/13 0:47:13 阅读更多 →

最新新闻

从坐标变换到动力学：机器人学导论前六章核心链路总结

从坐标变换到动力学：机器人学导论前六章核心链路总结

很多人看《机器人学导论》前六章，最容易出现的状态就是：每一步推导都能看懂，合上书做题就一片空白。我自己的体会是，这门课的前六章不是六个独立话题，而是一条非常完整的链路——先用空间变换把机械臂的姿态讲清楚&…

2026/10/14 18:03:26 阅读更多 →
pycurl+pyspider+phantomjs组合：动态渲染与静态抓取的爬虫实战

pycurl+pyspider+phantomjs组合：动态渲染与静态抓取的爬虫实战

简介：这套工具包面向需要处理复杂网页数据的 Python 爬虫开发者，围绕 pycurl、pyspider 与 PhantomJS 三款组件，重点解决静态页面抓取、动态内容渲染以及爬虫任务调度协同等常见问题。压缩包共 52 个文件，整体约 28.71MB&#xff…

2026/10/14 18:03:26 阅读更多 →
BurntSushi/toml：Go 语言解析与生成 TOML v1.0.0 配置的完整指南

BurntSushi/toml：Go 语言解析与生成 TOML v1.0.0 配置的完整指南

测试操作系统网络安全 【免费下载链接】syzkaller syzkaller is an unsupervised coverage-guided kernel fuzzer 项目地址： https://gitcode.com/gh_mirrors/syz/syzkaller 点击查看 免费下载 导读 TOML（Toms Obvious, Minimal Language）是…

2026/10/14 18:03:26 阅读更多 →
AMD Ryzen 平台运行 macOS 虚拟机：VMware 实战指南

AMD Ryzen 平台运行 macOS 虚拟机：VMware 实战指南

1. 折腾前的判断：AMD Ryzen 这台机器到底能不能干这事折腾这事花了我两个周末。手头主力机是 AMD Ryzen 7 5800X，配某品牌 B550 主板，32GB 内存，Windows 11 日常使用。想搞 macOS 虚拟机，不是出于“什么都想装一遍”的…

2026/10/14 18:03:26 阅读更多 →
绿色政府网站建设源码：政务门户底包快速搭建与二次开发避坑指南

绿色政府网站建设源码：政务门户底包快速搭建与二次开发避坑指南

简介：这份绿色政府网站建设源码面向需要搭建政务门户的开发者与建站人员，基于pageadmin v3.0制作，采用清新大气的绿色主色、1000px居中布局，结构简洁，内置工作流、信息签收、信息签发与互动交流等常用政府网站功能&…

2026/10/14 18:03:26 阅读更多 →
学生成绩管理系统源码攻略：数据库设计到权限边界实现

学生成绩管理系统源码攻略：数据库设计到权限边界实现

简介：这是一套基于PHPAJAX的学生成绩管理系统源码，面向大中小学及培训机构，也适用于部队等需要成绩统计的单位。系统提供管理员、校长室、班主任、任课老师、学生及家长六种权限，可在线录入、查询成绩，自动排名并生成平…

2026/10/14 18:02:23 阅读更多 →

日新闻

AnyPS5通用适配层设计：兼容性与性能的工程取舍

AnyPS5通用适配层设计：兼容性与性能的工程取舍

1. 从"AnyPS5"这个名字说起：它到底想解决什么问题第一次看到"AnyPS5"这个标题，我脑子里冒出来的第一个念头是：这大概率是一个围绕"跨平台运行"或者"通用适配"做文章的项目。名字里的"Any"…

2026/10/14 0:00:41 阅读更多 →
Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

Flutter跨平台开发实战：二手交易应用与HarmonyOS适配

1. 项目概述：Flutter跨平台二手交易应用开发作为一名长期从事移动应用开发的工程师，我最近完成了一个基于Flutter框架的二手物品交易平台项目。这个项目最吸引我的地方在于它完美结合了Flutter的跨平台优势与HarmonyOS的生态特性，实现了"…

2026/10/14 0:00:41 阅读更多 →
DFS算法解决飞机降落调度问题实战

DFS算法解决飞机降落调度问题实战

1. 项目背景与核心思路飞机降落问题是一个经典的调度优化场景，也是算法竞赛和面试中的高频题目。这个题目要求我们合理安排多架飞机的降落顺序和时间，确保所有飞机都能安全着陆而不发生冲突。在实际航空管制中，这类问题直接关系到飞行安全和机…

2026/10/14 0:00:41 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/14 3:30:28 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/14 16:30:29 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/14 3:29:58 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 22:01:27 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/13 14:57:39 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 7:53:34 阅读更多 →