QT编程(11):Qt 文本高亮实现代码编辑器

一、功能概述与核心原理本次基于Qt Widgets实现一款简易代码编辑器核心实现自定义语法文本高亮、基础代码编辑、行号显示、关键字/注释/字符串区分高亮四大核心功能适配C/C基础语法高亮规则可轻松拓展到Python、Java等其他语言。核心技术原理继承Qt自带的QSyntaxHighlighter类重写高亮规则函数实现文本块级别的语法匹配与颜色渲染自定义CodeEditor类继承QPlainTextEdit封装行号显示、编辑区域优化解决原生控件无行号、高亮生硬的问题通过正则表达式匹配关键字、注释、字符串、数字精准划分文本类型并设置不同文本格式实现差异化高亮全程基于Qt5/Qt6兼容写法无第三方依赖编译后可直接运行适配环境Qt 5.12及以上、Qt 6.x编译器支持MSVC/MinGW项目类型为Qt Widgets Application二、完整项目代码实现2.1 语法高亮核心类SyntaxHighlighter该类负责所有文本高亮规则的定义与渲染重写highlightBlock()函数针对每个文本块执行正则匹配设置对应文本颜色、字体加粗等格式。#ifndefSYNTAXHIGHLIGHTER_H#defineSYNTAXHIGHLIGHTER_H#includeQSyntaxHighlighter#includeQTextCharFormat#includeQRegularExpressionclassSyntaxHighlighter:publicQSyntaxHighlighter{Q_OBJECTpublic:explicitSyntaxHighlighter(QTextDocument*parentnullptr);protected:// 重写高亮核心函数对每个文本块进行高亮处理voidhighlightBlock(constQStringtext)override;private:// 存储高亮规则正则表达式 对应文本格式structHighlightRule{QRegularExpression pattern;QTextCharFormat format;};QVectorHighlightRulehighlightRules;// 定义各类语法格式QTextCharFormat keywordFormat;// 关键字格式QTextCharFormat commentFormat;// 单行注释格式QTextCharFormat stringFormat;// 字符串格式QTextCharFormat numberFormat;// 数字格式QTextCharFormat operatorFormat;// 运算符格式};#endif// SYNTAXHIGHLIGHTER_H#includeSyntaxHighlighter.hSyntaxHighlighter::SyntaxHighlighter(QTextDocument*parent):QSyntaxHighlighter(parent){HighlightRule rule;// 1. 关键字格式配置C/C关键字 keywordFormat.setForeground(Qt::darkBlue);keywordFormat.setFontWeight(QFont::Bold);// C/C核心关键字列表可自行拓展QStringList keywordPatterns{\\bchar\\b,\\bclass\\b,\\bconst\\b,\\bdouble\\b,\\benum\\b,\\bexplicit\\b,\\bfriend\\b,\\binline\\b,\\bint\\b,\\blong\\b,\\bnamespace\\b,\\boperator\\b,\\bprivate\\b,\\bprotected\\b,\\bpublic\\b,\\bshort\\,\\bsignals\\b,\\bsigned\\b,\\bslots\\b,\\bstatic\\b,\\bstruct\\b,\\btemplate\\b,\\btypedef\\b,\\bunion\\b,\\bunsigned\\b,\\bvirtual\\b,\\bvoid\\b,\\bvolatile\\b,\\bbool\\b,\\bif\\b,\\belse\\b,\\bfor\\b,\\bwhile\\b,\\breturn\\b,\\bbreak\\b,\\bcontinue\\b,\\bswitch\\b,\\bcase\\b};for(constQStringpattern:keywordPatterns){rule.patternQRegularExpression(pattern);rule.formatkeywordFormat;highlightRules.append(rule);}// 2. 单行注释格式// 开头 commentFormat.setForeground(Qt::darkGreen);commentFormat.setFontItalic(true);rule.patternQRegularExpression(//[^\n]*);rule.formatcommentFormat;highlightRules.append(rule);// 3. 字符串格式双引号包裹 stringFormat.setForeground(Qt::darkRed);rule.patternQRegularExpression(\.*\);rule.formatstringFormat;highlightRules.append(rule);// 4. 数字格式整数浮点数 numberFormat.setForeground(Qt::darkMagenta);rule.patternQRegularExpression(\\b[0-9]\\.?[0-9]*\\b);rule.formatnumberFormat;highlightRules.append(rule);// 5. 运算符格式 operatorFormat.setForeground(Qt::darkCyan);rule.patternQRegularExpression([\\-*/()%!|]);rule.formatoperatorFormat;highlightRules.append(rule);}voidSyntaxHighlighter::highlightBlock(constQStringtext){// 遍历所有高亮规则匹配文本并设置格式for(constHighlightRulerule:highlightRules){QRegularExpressionMatchIterator matchIteratorrule.pattern.globalMatch(text);while(matchIterator.hasNext()){QRegularExpressionMatch matchmatchIterator.next();setFormat(match.capturedStart(),match.capturedLength(),rule.format);}}// 处理多行注释可选拓展此处基础版先实现单行注释setCurrentBlockState(0);}2.2 带行号的代码编辑器主类CodeEditor继承QPlainTextEdit自定义行号显示区域同步滚动和文本行数解决原生编辑器无行号的问题同时绑定高亮类实现行号高亮一体化。#ifndefCODEEDITOR_H#defineCODEEDITOR_H#includeQPlainTextEdit#includeQWidget#includeSyntaxHighlighter.hclassCodeEditor:publicQPlainTextEdit{Q_OBJECTpublic:explicitCodeEditor(QWidget*parentnullptr);// 行号区域绘制voidlineNumberAreaPaintEvent(QPaintEvent*event);// 计算行号区域宽度intlineNumberAreaWidth();protected:// 重写调整事件适配行号区域voidresizeEvent(QResizeEvent*event)override;privateslots:// 更新行号区域宽度voidupdateLineNumberAreaWidth(intnewBlockCount);// 滚动时同步行号区域voidupdateLineNumberArea(constQRectrect,intdy);private:QWidget*lineNumberArea;// 行号显示控件SyntaxHighlighter*highlighter;// 高亮对象};#endif// CODEEDITOR_H#includeCodeEditor.h#includeQPainter#includeQTextBlockCodeEditor::CodeEditor(QWidget*parent):QPlainTextEdit(parent){// 初始化行号区域lineNumberAreanewQWidget(this);// 绑定高亮类highlighternewSyntaxHighlighter(this-document());// 信号槽连接文本变化、滚动时同步更新行号connect(this,CodeEditor::blockCountChanged,this,CodeEditor::updateLineNumberAreaWidth);connect(this,CodeEditor::updateRequest,this,CodeEditor::updateLineNumberArea);// 设置编辑器基础样式setFont(QFont(Consolas,11));// 等宽字体适配代码编辑setTabStopDistance(4*fontMetrics().horizontalAdvance( ));// Tab宽度4个空格setLineWrapMode(QPlainTextEdit::NoWrap);// 禁止自动换行符合代码编辑习惯// 初始化行号区域宽度updateLineNumberAreaWidth(0);}intCodeEditor::lineNumberAreaWidth(){intdigits1;intmaxqMax(1,blockCount());// 计算最大行数的位数确定行号区域宽度while(max10){max/10;digits;}// 左右留白提升美观度intspace10fontMetrics().horizontalAdvance(QLatin1Char(9))*digits;returnspace;}voidCodeEditor::updateLineNumberAreaWidth(intnewBlockCount){// 设置编辑器左边距预留行号区域setViewportMargins(lineNumberAreaWidth(),0,0,0);}voidCodeEditor::updateLineNumberArea(constQRectrect,intdy){if(dy)lineNumberArea-scroll(0,dy);elselineNumberArea-update(0,rect.y(),lineNumberArea-width(),rect.height());if(rect.contains(viewport()-rect()))updateLineNumberAreaWidth(0);}voidCodeEditor::resizeEvent(QResizeEvent*event){QPlainTextEdit::resizeEvent(event);// 调整行号区域大小充满编辑器左侧QRect crcontentsRect();lineNumberArea-setGeometry(QRect(cr.left(),cr.top(),lineNumberAreaWidth(),cr.height()));}voidCodeEditor::lineNumberAreaPaintEvent(QPaintEvent*event){QPainterpainter(lineNumberArea);painter.fillRect(event-rect(),Qt::lightGray);// 行号区域背景色QTextBlock blockfirstVisibleBlock();intblockNumberblock.blockNumber();inttopqRound(blockBoundingGeometry(block).translated(contentOffset()).top());intbottomtopqRound(blockBoundingRect(block).height());// 逐行绘制行号while(block.isValid()topevent-rect().bottom()){if(block.isVisible()bottomevent-rect().top()){QString numberQString::number(blockNumber1);painter.setPen(Qt::black);// 行号右对齐居中显示painter.drawText(0,top,lineNumberArea-width()-5,fontMetrics().height(),Qt::AlignRight,number);}blockblock.next();topbottom;bottomtopqRound(blockBoundingRect(block).height());blockNumber;}}2.3 主函数入口main.cpp创建主窗口将自定义代码编辑器作为中心控件实现完整窗口展示。#includeQApplication#includeQMainWindow#includeCodeEditor.hintmain(intargc,char*argv[]){QApplicationa(argc,argv);QMainWindow w;w.setWindowTitle(Qt 代码编辑器 - 文本高亮版);w.resize(900,600);// 窗口默认大小// 绑定自定义代码编辑器CodeEditor*editornewCodeEditor;w.setCentralWidget(editor);w.show();returna.exec();}三、项目文件配置.pro文件新建Qt Widgets项目后替换.pro文件内容保证模块依赖完整无编译报错。QT core gui widgets TARGET QtCodeEditor TEMPLATE app SOURCES main.cpp \ SyntaxHighlighter.cpp \ CodeEditor.cpp HEADERS \ SyntaxHighlighter.h \ CodeEditor.h # 适配C11及以上Qt6默认开启Qt5需手动配置 CONFIG C11四、代码运行效果与核心说明4.1 运行效果左侧显示灰色行号区域行号右对齐随文本滚动同步更新C/C关键字显示深蓝色加粗注释为绿色斜体字符串为深红色数字为紫红色运算符为青蓝色支持基础代码编辑、Tab缩进、滚动查看等宽字体适配代码排版4.2 关键使用说明高亮规则拓展如需适配Python/Java等语言只需修改SyntaxHighlighter中的关键字列表和正则表达式比如Python注释用#修改注释匹配正则为#[^\n]*即可样式自定义可修改各类格式的前景色setForeground、背景色setBackground、字体粗细、斜体适配自己的配色主题多行注释实现在highlightBlock函数中添加状态判断匹配/* */区间即可实现多行注释高亮字体与间距调整修改CodeEditor构造函数中的字体、Tab宽度、行号区域留白优化编辑体验五、常见问题与优化方向常见问题编译报错检查.pro文件是否添加widgets模块Qt6必须手动引入widgetsQt5可省略但建议加上高亮不生效确认SyntaxHighlighter绑定到document()且正则表达式书写正确避免转义字符错误行号显示错乱重写的resizeEvent和updateRequest信号槽必须绑定保证滚动和窗口缩放同步进阶优化方向添加代码折叠、括号匹配、自动补全功能实现深色/浅色主题切换自定义高亮配色方案支持代码格式化、语法检查、文件打开保存功能优化大文本加载性能减少高亮匹配耗时