通知场景实战：用 text-layout-cj 打造高亮+链接+点击回调三合一富文本通知

通知场景实战：用 text-layout-cj 打造高亮+链接+点击回调三合一富文本通知

【免费下载链接】text-layout-cj文本自定义布局组件项目地址: https://gitcode.com/Cangjie-TPC/text-layout-cj

text-layout-cj 是一款基于仓颉语言（cangjie）的开源文本自定义布局组件，它能将一段普通文本变成支持关键词高亮、链接自动识别、点击回调的富文本，特别适合通知类文本需要特殊显示的场景。本文带你用几行代码，打造"高亮 + 链接 + 点击回调"三合一的富文本通知。

🎯 text-layout-cj 能解决什么问题？

通知文案默认都是"千人一面"：同样字号、同样颜色、没有重点。而真实业务里你通常希望：

• 重点信息一眼看到：把"123456"这样的关键词放大、换色、加间距高亮；
• 链接可点击可区分：正文中的 URL 自动带链接色 + 下划线；
• 响应用户点击：用户点中高亮文字后弹窗、跳转或执行自定义逻辑。

text-layout-cj 把这 3 个能力封装成一个组件，免去了手写富文本排版的繁琐。它围绕 3 个核心概念：

组件内部会把文本拆分成普通文本、特殊文本（高亮）和链接三类 Span 分别渲染，定义可见 text_layout_component.cj。

⚙️ 快速上手：3 步引入 text-layout-cj

第 1 步：克隆仓库

git clone https://gitcode.com/Cangjie-TPC/text-layout-cj

第 2 步：配置依赖

将项目中的textlayoutbuilder模块拷贝到你的应用下，然后：

• 在 entry 的 oh-package.json5 的dependencies中添加"textlayoutbuilder": "file:../textlayoutbuilder"；
• 在 cjpm.toml 的[dependencies]下添加：

[dependencies] textlayoutbuilder = { path = "../../../../textlayoutbuilder/src/main/cangjie", version = "1.0.0" }

第 3 步：导入并使用

import textlayoutbuilder.*

在组件中放置TextLayout(model: this.data)，传入配置好的Layout即可。

✨ 实战：高亮+链接+点击回调三合一配置

假设通知文案为："我想问，123456，你知道是如何生成的吗？https://xxxxx.xxxxxx.com/……"，目标是把"123456"高亮为绿色、链接显示为红色、点击高亮文字时弹窗提示。

1. 高亮关键文字：TextInfo 标记范围与样式

let textInfo1 = TextInfo() textInfo1.setStart(2) // 开始字符位置 textInfo1.setEnd(8) // 结束字符位置 textInfo1.setFontSize(16) // 字号 textInfo1.setFontColor(0x00ff00) // 绿色高亮 textInfo1.setFontLetterSpacing(6) // 字间距 textInfo1.setFontStyle(FontStyle.Italic) // 斜体

2. 链接识别与配色：零额外操作

文本中的 URL（http/https/ftp 等）会被组件自动识别，以链接色加下划线渲染，只需自定义颜色：

.setLinkColor(0xff0000) // 红色链接 .setLetterSpacing(6.0) // 字间距（可选）

3. 点击回调：一行拿到被点击的文字

.setSpecialTextClick({ textInfo => AlertDialog.show(AlertDialogParamWithConfirm("我点击了 = ${textInfo.getText()}")) })

完整配置代码

把三步串到Layout上，链式调用一气呵成：

let tempData: Layout = this.data tempData.setText(this.strTest) // 通知正文 .setSpecialTextInfo(textInfo1) // 高亮 .setLinkColor(0xff0000) // 链接颜色 .setMaxLines(3) // 最多显示 3 行 .setEllipsize(TextOverflow.Ellipsis) // 超出省略号 .setSpecialTextClick({ textInfo => AlertDialog.show(AlertDialogParamWithConfirm("我点击了 = ${textInfo.getText()}")) }) this.data = tempData

完整示例见 index.cj，其中包含单行显示、反向排列、靠右对齐等 15 种实际效果演示，可以直接对照调试。

🧩 通知场景常用参数速查

完整接口文档见 feature_api.md。

⚠️ 使用前的 3 个注意事项

1. start 不能大于 end：否则组件会记录 Hilog 错误并将该高亮区间置 0 处理；
2. setMinWidth、setMaxWidth、setWidth 不建议同时使用，宽度可能互相冲突；
3. 环境约束：示例在 DevEco Studio NEXT Developer Beta2（5.0.3.910）+ Cangjie Support Plugin 5.0.3.906 验证通过，接入时请确认工具链版本一致。

📚 总结与参考资料

text-layout-cj 的使用思路非常清晰：TextInfo负责"哪段字、怎么美化"，Layout负责"整体怎么排"，TextLayout负责渲染。通知、营销、消息卡片等需要文本强调的场景，几分钟就能跑起来。

• 官方接口文档：doc/feature_api.md
• 示例工程入口：entry/src/main/cangjie/src/index.cj
• 布局配置源码：textlayoutbuilder/src/main/cangjie/src/text_layout.cj
• 组件渲染源码：textlayoutbuilder/src/main/cangjie/src/text_layout_component.cj

【免费下载链接】text-layout-cj文本自定义布局组件项目地址: https://gitcode.com/Cangjie-TPC/text-layout-cj