夜雨聆风
QT学习项目 从零开发 IDE 编辑器,7 天 7 个迭代版本,零基础闭眼学
为什么选择代码编辑器 Qt 项目？
这个代码编辑器项目到底有多强？
|
功能模块 |
具体特性 |
|
🖥️ 窗口框架 |
QMainWindow 主框架 + QSplitter 分割布局 |
|
📂 文件管理 |
文件树浏览 + 多标签编辑 + 新建/打开/保存/另存为 |
|
✏️ 编辑核心 |
行号绘制 + 当前行高亮 + 等宽字体 + Ctrl+滚轮缩放 |
|
🎨 语法高亮 |
13 种词法规则 + 多行注释状态机 |
|
🎯 括号匹配 |
深度优先算法 + ExtraSelections 高亮 |
|
📜 代码折叠 |
花括号/注释/条件编译区域折叠 |
|
🔍 查找替换 |
查找/替换/全词匹配/区分大小写/循环搜索/全局搜索 |
|
🔧 构建集成 |
QProcess 一键构建运行 + 编译错误解析 + 双击跳转 |
|
⚙️ 字体设置 |
QFontComboBox 字体选择 + QSpinBox 字号微调 |
|
💬 行/块注释 |
Ctrl+/ 行注释 + Ctrl+Shift+/ 块注释 |
|
🔗 智能缩进 |
自动缩进 + 括号补全 + beginEditBlock 原子操作 |
|
📊 Dock 面板 |
输出面板 + 错误列表 + 全局搜索面板 |
|
🎨 深色主题 |
QPalette + QSS 全局样式 VS Code 风格 |
|
📝 最近文件 |
最近文件/文件夹/项目列表 + QSettings 持久化 |
|
🏷️ 图标资源 |
.qrc 资源系统 + 应用图标 |
来看张图，直观感受一下系统架构
┌───────────────────────────────────────────────────────────────────────┐│ CodeEditPlus 系统架构图 │├───────────────────────────────────────────────────────────────────────┤│ ││ main.cpp ││ QApplication + MainWindow ││ │ ││ ▼ ││ ┌──────────────────────────────────────────────────────────────┐ ││ │ MainWindow (QMainWindow) │ ││ │ ┌─────────┐ ┌──────────┐ ┌────────┐ ┌────────────────┐ │ ││ │ │ 菜单栏 │ │ 工具栏 │ │ 状态栏 │ │ Dock 面板 │ │ ││ │ │ 文件/编辑│ │ 新建/保存│ │光标位置 │ │ 输出/错误/搜索 │ │ ││ │ │ 视图/构建│ │ 构建/运行│ │编码/项目│ │ (toggleView) │ │ ││ │ └─────────┘ └──────────┘ └────────┘ └────────────────┘ │ ││ └────────────────────────────┬─────────────────────────────────┘ ││ │ ││ ┌─────────────▼─────────────┐ ││ │ QSplitter (中央部件) │ ││ │ ┌──────────┐ ┌─────────┐ │ ││ │ │ 文件树 │ │ TabWidget│ │ ││ │ │QTreeView │ │ 多标签页 │ │ ││ │ │ + Proxy │ │ CodeEditor ││ │ │ 过滤模型 │ │ 实例管理 │ │ ││ │ └──────────┘ └─────────┘ │ ││ └───────────────────────────┘ ││ │ ││ ┌───────────────────┼───────────────────┐ ││ ▼ ▼ ▼ ││ ┌────────────────┐ ┌──────────────┐ ┌──────────────────┐ ││ │ CodeEditor │ │SyntaxHighlight│ │FontSettingsDialog│ ││ │ :QPlainTextEd │ │:QSyntaxHighl │ │ :QDialog │ ││ │ │ │ │ │ │ ││ │ • 行号绘制 │ │ • 13种规则 │ │ • QFontComboBox │ ││ │ • 括号匹配 │ │ • 正则匹配 │ │ • QSpinBox │ ││ │ • 代码折叠 │ │ • 状态机 │ │ • 确定/取消 │ ││ │ • 智能缩进 │ │ • 多行注释 │ │ │ ││ │ • 自动补全 │ └──────────────┘ └──────────────────┘ ││ │ • 注释/缩放 │ ││ └────────────────┘ ││ ││ ┌──────────────────────────────────────────────────────────────┐ ││ │ 依赖底层技术 │ ││ │ QPalette + QSS │ QProcess │ QFileSystemModel │ QFile │ │ ││ │ QSettings │ QRC/RCC │ QRegularExpression│ QUndoStack│ ││ └──────────────────────────────────────────────────────────────┘ │└───────────────────────────────────────────────────────────────────────┘
7天实战课程，每天只需45~60分钟
第1天：项目骨架 & 暗色窗口
// mainwindow.cpp —— 深色主题核心void MainWindow::applyDarkTheme(){QPalette p;p.setColor(QPalette::Window, { 37, 37, 38 });p.setColor(QPalette::WindowText, { 245, 245, 245 });p.setColor(QPalette::Base, { 30, 30, 30 });p.setColor(QPalette::Text, { 245, 245, 245 });p.setColor(QPalette::Highlight, { 14, 99, 156 });qApp->setPalette(p);qApp->setStyleSheet(QStringLiteral("QMenuBar { background-color:#2d2d30; color:#f7f7f7; }""QTabBar::tab:selected { background:#4a4a4f; color:#ffffff; }"// ...));}
第2天：侧边栏 & 文件树 & 多标签
void MainWindow::createSideBarAndEditors(){auto *sp = new QSplitter(this);setCentralWidget(sp);// 左侧：文件浏览器m_fsModel = new QFileSystemModel(this);m_filterProxy = new SourceFileFilterProxy(this);m_filterProxy->setSourceModel(m_fsModel);m_fileTree = new QTreeView(sp);m_fileTree->setModel(m_filterProxy);// 隐藏 .o .obj .exe 等编译产物// 右侧：标签编辑器m_tabWidget = new QTabWidget(sp);m_tabWidget->setTabsClosable(true);m_tabWidget->setMovable(true);sp->setStretchFactor(1, 1); // 编辑器占更多空间}
第3天：编辑器核心组件
void CodeEditor::lineNumberAreaPaintEvent(QPaintEvent *event){QPainter painter(m_lineNumberArea);painter.fillRect(event->rect(), QColor("#2d2d30"));QTextBlock block = firstVisibleBlock();while (block.isValid() && block.position() <= event->rect().bottom()) {int lineNumber = block.blockNumber() + 1;// 绘制行号（右对齐）painter.drawText(0, blockY, width() - 4, height(),Qt::AlignRight, QString::number(lineNumber));block = block.next();}}void CodeEditor::wheelEvent(QWheelEvent *event){if (event->modifiers() == Qt::ControlModifier) {// Ctrl + 滚轮缩放字体int delta = event->angleDelta().y();delta > 0 ? increaseFontSize() : decreaseFontSize();return;}QPlainTextEdit::wheelEvent(event);}
第4天：C++ 语法高亮
voidSyntaxHighlighter::highlightBlock(const QString &text){// 13 种高亮规则for (const auto &rule : m_highlightingRules) {QRegularExpressionMatchIterator it = rule.pattern.globalMatch(text);while (it.hasNext()) {auto match = it.next();setFormat(match.capturedStart(), match.capturedLength(), rule.format);}}// 多行注释状态机setCurrentBlockState(0);int startIndex = (previousBlockState() == 1)? 0 : text.indexOf(m_commentStartExpression);// ... 查找注释结束，跨行时设置 state=1}
第5天：菜单栏 & 文件操作 & 状态栏
void MainWindow::createActions(){m_newAction = new QAction("新建(&N)", this);m_newAction->setShortcut(QKeySequence::New);m_newAction->setStatusTip("新建文件");connect(m_newAction, &QAction::triggered, this, &MainWindow::newFile);m_saveAction = new QAction("保存(&S)", this);m_saveAction->setShortcut(QKeySequence::Save);connect(m_saveAction, &QAction::triggered, this, &MainWindow::saveFile);}void MainWindow::createStatusBar(){m_statusCursorLabel = new QLabel("行: 1 列: 1");statusBar()->addPermanentWidget(m_statusCursorLabel);}void MainWindow::saveFile(){auto *editor = currentEditor();QFile file(editor->filePath());if (file.open(QIODevice::WriteOnly)) {QTextStream out(&file);out << editor->toPlainText();file.close();editor->document()->setModified(false);}}
第6天：Dock 面板 & 查找替换 & 搜索输出
voidMainWindow::createDockPanels(){// 输出面板m_outputDock = new QDockWidget("输出", this);auto *outputText = new QTextBrowser;m_outputDock->setWidget(outputText);addDockWidget(Qt::BottomDockWidgetArea, m_outputDock);// 错误列表m_errorDock = new QDockWidget("错误列表", this);auto *errorTree = new QTreeWidget;errorTree->setHeaderLabels({"文件", "行号", "消息"});m_errorDock->setWidget(errorTree);addDockWidget(Qt::BottomDockWidgetArea, m_errorDock);// 一行代码搞定 toggleviewMenu->addAction(m_outputDock->toggleViewAction());viewMenu->addAction(m_errorDock->toggleViewAction());}// 编译错误解析：file.cpp:10:5: error: 未定义标识符voidMainWindow::parseBuildOutputLine(const QString &line){static QRegularExpression regex(R"((.+?):(\d+):(\d+):\s+(error|warning):\s+(.+))");auto match = regex.match(line);if (match.hasMatch()) {// 提取文件路径、行号、列号、错误消息// 添加到错误列表 TreeWidget，支持双击跳转}}
第7天：构建运行 & 字体设置 & 高级编辑
// 深度优先括号匹配算法bool CodeEditor::findMatchingBracket(QChar bracket, int pos,int &matchPos, bool &mismatch) const{QChar open, close;int step = (bracket == '(' || bracket == '[' || bracket == '{') ? 1 : -1;// 确定配对关系if (bracket == '(') { open = '('; close = ')'; }else if (bracket == ')') { open = '('; close = ')'; step = -1; }int depth = 0;for (int i = pos; i >= 0 && i < text.size(); i += step) {if (text.at(i) == open) ++depth;if (text.at(i) == close) {--depth;if (depth == 0) { matchPos = i; return true; }if (depth < 0) { mismatch = true; return false; }}}mismatch = true;return false;}// 代码折叠void CodeEditor::toggleFoldAtCurrentBlock(){QTextBlock block = textCursor().block();int endBlockNumber;if (!findFoldRegionForBlock(block.blockNumber(), endBlockNumber))return;for (int i = block.blockNumber() + 1; i <= endBlockNumber; ++i) {QTextBlock b = document()->findBlockByNumber(i);b.setVisible(false);b.setLineCount(0); // 行号归零}document()->markContentsDirty(block.position(), document()->characterCount());viewport()->update();}
来看看具体代码
void CodeEditor::keyPressEvent(QKeyEvent *event){// ── 标准快捷键：交给 Qt 默认处理 ──if (event->matches(QKeySequence::SelectAll) ||event->matches(QKeySequence::Copy) ||event->matches(QKeySequence::Paste)) {QPlainTextEdit::keyPressEvent(event);return;}// ── 检测修饰键组合（快捷键） ──if (event->modifiers() == Qt::ControlModifier) {switch (event->key()) {case Qt::Key_Slash: toggleLineComment(); return; // Ctrl+/case Qt::Key_Plus: zoomIn(); return; // Ctrl++case Qt::Key_Minus: zoomOut(); return; // Ctrl+-}}if (event->modifiers() == (Qt::ControlModifier | Qt::ShiftModifier)&& event->key() == Qt::Key_Slash) {toggleBlockComment(); return; // Ctrl+Shift+/}// ── 自动补全括号（纯字符输入，无修饰键） ──if (!event->modifiers() && !textCursor().hasSelection()) {QString text = event->text();int pos = textCursor().position();QString fullText = toPlainText();if (text == "(") { insertPair('(', ')'); return; }if (text == "[") { insertPair('[', ']'); return; }if (text == "{") { insertPair('{', '}'); return; }if (text == "\"") { insertPair('"', '"'); return; }// 跳过已有的右括号if ((text == ")" || text == "]" || text == "}")&& pos < fullText.size() && fullText.at(pos) == text.at(0)) {textCursor().movePosition(QTextCursor::Right);event->accept();return;}// ── 智能缩进（Enter 键） ──if (event->key() == Qt::Key_Return || event->key() == Qt::Key_Enter) {QTextBlock block = textCursor().block();QString currentLine = block.text();QString leadingWhitespace;for (QChar ch : currentLine) {if (ch == ' ' || ch == '\t')leadingWhitespace.append(ch);elsebreak;}// 检测是否在花括号后换行（如 "function() {"）QString trimmed = currentLine.trimmed();bool beforeBrace = trimmed.endsWith('{');if (beforeBrace) {// 原子操作：一次撤销textCursor().beginEditBlock();textCursor().insertText("\n" + leadingWhitespace + " \n");textCursor().insertText(leadingWhitespace + "}");textCursor().endEditBlock();// 光标定位在中间行QTextCursor c = textCursor();c.movePosition(QTextCursor::Up);setTextCursor(c);return;}}}// ── 默认处理 ──QPlainTextEdit::keyPressEvent(event);}
实际使用演示
学习这个项目，你将获得什么？
|
收获类型 |
具体内容 |
|
🏆 扎实的 Qt 桌面开发能力 |
QMainWindow / QPlainTextEdit / QDockWidget / 信号槽全面覆盖 |
|
⚡ 现代 C++ 实战经验 |
Lambda、RAII、智能指针、 |
|
🎯 高级编辑器功能实现 |
语法高亮引擎、代码折叠、括号匹配算法、智能缩进 |
|
📊 性能优化实战 |
markContentsDirty 布局重算、QSyntaxHighlighter 按需渲染 |
|
🔧 Qt 资源系统 |
.qrc 文件编写、rcc 编译流程、资源路径语法 |
|
🏗️ 系统架构思维 |
MVC 模式（Model/View/Proxy）、职责分离、模块解耦 |
|
📝 面试加分项 |
52 道高频面试题精讲 + 6 套简历模板 |
|
⭐ 可写入简历的项目 |
完整源码 + 7 天讲解，面试有得聊 |
如何参加这个项目？
首期Qt IDE编辑器项目现已开放报名，原价199，现在只要99元。作为首批学员，你将获得：
📦 完整的学习资料包
●项目完整源码（12个核心文件，代码2000+行，逐行详细注释）
●7天分步教学文档（每天的实现目标、代码拆解、步骤手把手教学）
●Qt核心知识点详解文档（控件原理、事件机制、样式、架构全覆盖）
●52道桌面开发面试题精讲（原理 + 代码示例 + 面试应答话术）
●项目架构图、功能拓展方案、程序打包部署教程
🎯 专属服务
●专属微信群内的技术答疑和一对一指导
●学员作业代码审核、代码优化、架构改进建议
●学习进度跟踪、零基础个性化学习建议
如何报名？
1. 扫描下方二维码添加我的微信，或者微信搜索 Qqing_Ffeng 添加
2. 备注 「Qt编辑器项目」
3. 确认报名后，微信/支付宝付款即可
4. 付款成功后，当天开放学习权限，领取全部源码+文档资料
还在犹豫？简单算笔账…
|
问题 |
自己摸索 |
跟着课程 |
|---|---|---|
|
从0到1自研代码编辑器 |
2.5个月 |
7天 |
|
Qt控件、事件机制啃文档 |
英文官方文档晦涩难懂 |
中文拆解+实战落地讲解 |
|
语法高亮/代码折叠算法学习 |
网上碎片资料、逻辑断层 |
端到端完整源码+算法拆解 |
|
面试被问Qt架构、项目难点 |
项目单薄、原理答不上来 |
配套面试题，应答话术直接给到 |
|
简历书写桌面开发项目 |
Demo项目，面试官一问就露馅 |
商用级IDE项目，架构功能可深挖 |
与其花费数月自学并反复踩坑，不如跟着系统的实战课程，7天高效掌握Qt桌面IDE开发！
从”会写C++控制台代码”到”能独立开发商用Qt桌面应用”，就差这一步
很多同学一听到 “GUI界面”、“事件重载”、“语法引擎”、“桌面架构” 就觉得高大上、很难，但我要告诉你：
复杂的东西，拆开了其实都很简单！
●Qt窗口框架？就是一个 QMainWindow + 基础控件嵌套
●语法高亮？就是 QSyntaxHighlighter + 正则表达式分词
●代码折叠？就是 QTextBlock文本块显隐控制 + 界面局部刷新
●括号匹配？就是深度优先搜索 + 嵌套层数depth计数器
●编译运行集成？就是QProcess子进程调用+日志字符串解析
跟着我的7天计划，每天45~60分钟，即使你只会基础C++，也能一步步搞定专业级Qt代码编辑器。
关键就是动手写代码，别光看。
从 “写过几个控制台程序” 到 “能独立落地桌面GUI项目”，就差这一步实践！
想报名的话：
加我微信「Qqing_Ffeng」，备注「Qt编辑器项目」就行。
我会详细介绍课程安排，期待和真正想提升实战能力的你一起进步！
⚠️ 报名名额有限，先到先得！
写在最后
这个7天Qt代码编辑器项目是我精心准备的作品。它不是一个简单的Demo，而是一个可以直接写到简历上的商用级桌面项目。
无论你是正在准备秋招的应届生，还是想提升桌面开发实战能力的在职开发者，我相信这个项目都能帮助你在C++/Qt桌面开发这条路上少走很多弯路。
从今天开始，7天掌握Qt桌面IDE编辑器开发！
期待和你一起进步！🚀
