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

发布时间：2026/9/21 8:25:28

代码化 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/9/18 12:42:40 阅读更多 →
一个样品，一次合作：知医邦泡泡米是如何丰富企业大健康产品开发新原料需求的

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

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

2026/9/20 4:41:23 阅读更多 →
让 Agent RAG 真正好用，检索质量是关键，多路召回 + 重排序

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

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

2026/9/8 10:17:54 阅读更多 →

最新新闻

汽车之家网页版地址排查指南：3步定位挂马源，附前端布局对比评测

汽车之家网页版地址排查指南：3步定位挂马源，附前端布局对比评测

汽车之家网页版地址排查指南：3步定位挂马源，附前端布局对比评测 网站被黑挂马，后台却一片空白，这种绝望感每个运维和前端都懂。别慌，这通常不是代码逻辑错误，而是服务器环境或静态资源被篡改。今天不聊虚的，直接上干货，用 对比评测 的思路，带你从 汽车之家网页版地址…

2026/9/21 8:14:36 阅读更多 →
企业网站做电脑营销避坑指南：选哪家好别只看价格，看这套设计规范

企业网站做电脑营销避坑指南：选哪家好别只看价格，看这套设计规范

企业网站做电脑营销避坑指南：选哪家好别只看价格，看这套设计规范 改个需求建站公司拖一周，这种憋屈事谁没经历过？很多老板找企业网站做电脑营销，问得最多的一句话就是“哪家好”。其实，网站好不好用，营销转不转化，核心不在你付了多少钱，而在前端代码写得够不够规范，设计逻辑是否支撑你的业务目标。…

2026/9/21 8:00:00 阅读更多 →
做品管圈网站哪家好？3步避开被黑挂马陷阱

做品管圈网站哪家好？3步避开被黑挂马陷阱

做品管圈网站哪家好？3步避开被黑挂马陷阱 网站上线三天，后台突然多了个奇怪的脚本，页面弹出一堆博彩广告，SEO排名一夜清零。如果你正面临这种“网站被黑挂马不知道怎么办”的噩梦，先别慌着删库重装。很多站长在找做品管圈网站哪家好时，只盯着价格和功能，却忽略了最底层的代码安全与架构选型。今天咱们不聊虚的，…

2026/9/21 7:44:43 阅读更多 →
Voyager 資料夾管理指南：為 Gemini 與 AI Studio 的 AI 對話打造真正的「檔案系統」

Voyager 資料夾管理指南：為 Gemini 與 AI Studio 的 AI 對話打造真正的「檔案系統」

AI 应用前端 【免费下载链接】voyager Enhancement suite for Gemini, AI Studio, Claude & ChatGPT — plus a prompt manager for any websites, DeepSeek Harness included. / 面向 Gemini、AI Studio、Claude 与 ChatGPT 的增强套件；其中的提示词管理器可用…

2026/9/21 7:41:44 阅读更多 →
gatsby-source-graphql 插件全解析：将任意第三方 GraphQL API 缝合进 Gatsby 数据层

gatsby-source-graphql 插件全解析：将任意第三方 GraphQL API 缝合进 Gatsby 数据层

前端静态站点Web框架 【免费下载链接】gatsby React-based framework with performance, scalability, and security built in. 项目地址： https://gitcode.com/gh_mirrors/ga/gatsby 点击查看 免费下载 本篇技术指南以 gatsby-source-graphql 插件的 CHANGELOG 版…

2026/9/21 7:41:44 阅读更多 →
Lightweight Charts v3 到 v4 迁移指南：破坏性变更逐项分析与实战改造方案

Lightweight Charts v3 到 v4 迁移指南：破坏性变更逐项分析与实战改造方案

Lightweight Charts v3 到 v4 迁移指南：破坏性变更逐项分析与实战改造方案 【免费下载链接】lightweight-charts Performant financial charts built with HTML5 canvas 项目地址: https://gitcode.com/gh_mirrors/li/lightweight-charts 本指南以 Lightweig…

2026/9/21 7:41:44 阅读更多 →

日新闻

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程

agents-generator 决策矩阵全解析：从项目检测到 AGENTS.md 规则生成的 16 步判定流程 【免费下载链接】agentic-awesome-skills AAS Core is the local, agent-first control plane for complete catalog discovery, agent-owned selection, stack validation, and …

2026/9/21 0:00:01 阅读更多 →
gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析

gin-vue-admin 前端工具函数全景指南：src/utils 复用规范与源码级解析 【免费下载链接】gin-vue-admin 🚀ViteVue3Gin拥有AI辅助的基础开发平台，企业级业务AI开发解决方案，内置mcp辅助服务，内置skills管理，…

2026/9/21 0:00:01 阅读更多 →
Wox 全功能插件开发实战指南：基于 Python / Node.js 宿主与 WebSocket 的持久化插件体系

Wox 全功能插件开发实战指南：基于 Python / Node.js 宿主与 WebSocket 的持久化插件体系

桌面应用AI 应用插件系统 【免费下载链接】Wox A cross-platform launcher that simply works 项目地址： https://gitcode.com/gh_mirrors/wo/Wox 点击查看 免费下载 全功能插件（Full-featured Plugin）是 Wox 三类插件实现方式中能力最完整的…

2026/9/21 0:00:01 阅读更多 →

周新闻

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

Flutter for OpenHarmony游戏卡片渐变背景实战：从原理到性能优化

直接铺开项目本身吧。这几个月我一直在折腾一件事：用Flutter给OpenHarmony做一款游戏集合类的App，说白了就是把若干小游戏塞进一个壳里，用统一入口分发。这个方向本身不算新鲜，真正让我花了不少心思的，是首页那堆游戏卡…

2026/9/21 3:13:20 阅读更多 →
Word表格编号全攻略：从列表编号到题注交叉引用

Word表格编号全攻略：从列表编号到题注交叉引用

写Word文档，最让人头疼的往往是那些“看起来不起眼”的小问题。比如表格编号这事：今天在表后面多加了两个空白行，明天给客户交稿前发现整个章节的编号全部错位，光是挨个改序号就能耗掉大半个下午。我前阵子帮人整理一份上百页的技…

2026/9/21 2:19:36 阅读更多 →
从第一个站到第二个站：独立开发者的静态网站选型与落地实践

从第一个站到第二个站：独立开发者的静态网站选型与落地实践

1. 项目概述1.1 核心需求解析做独立开发者这几年，说实话，第一个网站上线的那天晚上我兴奋得没睡着。但等它跑了半年，流量惨淡、功能臃肿、代码自己都懒得看第二遍之后，我才慢慢琢磨明白一个道理：第一个网站是练手&…

2026/9/21 4:51:05 阅读更多 →

月新闻

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能

持续集成 流水线自动化与 声明式交付 实践：原型怎样变成可用功能分类：[AI/大模型]细分主题：AI 增强型 CI/CD 流水线自动化与 GitOps 实践：Agent 工作流、工具调用与任务拆解：从原型到生产的验收清单很多团队在尝试用大…

2026/9/19 23:01:36 阅读更多 →
容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场

容器编排 生产环境运维与排障实战：复盘记录怎样真正派上用场分类：[工程技术]细分主题：Kubernetes 生产环境运维与排障实战：可复制的项目复盘模板与决策记录大部分团队的事故复盘报告，最后都变成了躺在 Confluence 或钉…

2026/9/19 17:50:38 阅读更多 →
容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步

容器 容器化技术与镜像安全管理：核心链路应该先拆哪一步分类：[工程技术]细分主题：Docker 容器化技术与镜像安全管理：核心链路的逐步实现与关键代码取舍面对一个积累了五六年历史包袱的单体架构应用（包含 Web 接口、后台…

2026/9/19 23:35:34 阅读更多 →