【前端接口】GUI:RichText_Create：图文混排的富文本实现

实战应用：用在哪里

聊天里的道具链接、公告里的彩色关键词、邮件里的图文混排全是 GUI:RichText_Create 的舞台。富文本控件把文字、颜色、表情图、物品图标混排在同一段内容里，替换掉多个 Text 控件拼接的原始方案。

创建与混排

---创建富文本 parent:父节点 ID:x/y:坐标 str:内容 width:宽度 fontSize/fontColor:字号颜色
function GUI:RichText_Create(parent, ID, x, y, str, width, fontSize, fontColor) end

-- 聊天气泡：文字与物品图标混排
local rich = GUI:RichText_Create(bubble, "msg", 8, 8, "刚打到#<item=裁决之杖>#，全服第一把！", 220, 13, "#FFFFFF")

富文本的内容串支持内嵌标记：颜色标记切换文字颜色、物品标记内嵌物品图标与名称，一段内容里文字与图标自然混排。富文本的宽度参数让长内容自动折行，折行后的图文对齐由控件内部处理，多 Text 拼接方案的对齐噩梦就此终结。物品标记的点击响应：RichText_setOpenUrlEvent 给内容里的链接注册点击事件，点击道具链接弹出物品详情，聊天里的道具可直接查验。

与其他文本控件的分工

-- 三种文本控件的选择
-- 纯文字单行：Text_Create
-- 数字滚动与艺术字：BmpText_Create
-- 图文混排多样式：RichText_Create
local rich2 = GUI:RichTextCombine_Create(parent, "combine", x, y)
GUI:RichTextCombine_pushBackElements(rich2, elements)

文本控件的三兄弟分工明确：Text 管纯文本、BmpText 管艺术字数字、RichText 管混排。RichTextCombine 的组合器形态支持把多个元素对象推入组合，程序化构建复杂内容时比字符串标记更灵活。富文本的背景色（setBackgroundColor）让公告类的富文本有底色承托。

验证与监控

富文本的渲染开销高于纯文本，长列表里大量富文本条目的帧率要实测。

踩坑记录

富文本的内容串里的特殊字符（尖括号）曾经被解析器吃掉，内容转义的处理在拼接层统一。物品标记的物品不存在时（已下架物品）渲染出空框，物品标记的合法性校验在渲染前过一遍。

上线要点

富文本的内容标记语法在团队内成文，聊天、公告、邮件三处使用同一套标记语法。富文本的宽度与自动折行的配合在多分辨率下实测，折行位置的文字切割不能出现半个字。富文本的点击热区与气泡触摸的优先级在聊天气泡场景要调好，点链接不触发气泡的拖动。

本文由 996 技术组基于 996 引擎官方知识库与浮生梦老师课程体系整理。团队长期从事传奇类引擎 Lua 后端逻辑、客户端界面与商业版本交付，内容以官方知识库与真实项目为出处，按版本持续修订。