通知场景实战用 text-layout-cj 打造高亮链接点击回调三合一富文本通知【免费下载链接】text-layout-cj文本自定义布局组件项目地址: https://gitcode.com/Cangjie-TPC/text-layout-cjtext-layout-cj 是一款基于仓颉语言cangjie的开源文本自定义布局组件它能将一段普通文本变成支持关键词高亮、链接自动识别、点击回调的富文本特别适合通知类文本需要特殊显示的场景。本文带你用几行代码打造高亮 链接 点击回调三合一的富文本通知。 text-layout-cj 能解决什么问题通知文案默认都是千人一面同样字号、同样颜色、没有重点。而真实业务里你通常希望重点信息一眼看到把123456这样的关键词放大、换色、加间距高亮链接可点击可区分正文中的 URL 自动带链接色 下划线响应用户点击用户点中高亮文字后弹窗、跳转或执行自定义逻辑。text-layout-cj 把这 3 个能力封装成一个组件免去了手写富文本排版的繁琐。它围绕 3 个核心概念概念作用对应源码TextInfo文字片段的样式实体起止位置、字号、颜色、字间距、字体样式test_info.cjLayout布局配置模型文本内容、链接色、最大行数、按色、点击回调等text_layout.cjTextLayoutUI 组件接收一个Layout并渲染出富文本text_layout_component.cj组件内部会把文本拆分成普通文本、特殊文本高亮和链接三类 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. 链接识别与配色零额外操作文本中的 URLhttp/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 种实际效果演示可以直接对照调试。 通知场景常用参数速查需求API说明设置文本setText通知正文高亮片段setSpecialTextInfo指定区间自定义字号/颜色/间距/样式链接颜色setLinkColorURL 自动识别并带下划线点击回调setSpecialTextClick接收被点击的TextInfo按色反馈setIsEnablePressStatesetTextPressStateStyle按下时整块变色交互更明显限制行数setMaxLinessetEllipsize长通知避免撑破版面背景色setBgColor空文本也能占位显示对齐方式setAlignmentStart / Center / End完整接口文档见 feature_api.md。⚠️ 使用前的 3 个注意事项start 不能大于 end否则组件会记录 Hilog 错误并将该高亮区间置 0 处理setMinWidth、setMaxWidth、setWidth 不建议同时使用宽度可能互相冲突环境约束示例在 DevEco Studio NEXT Developer Beta25.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 通知场景实战：用 text-layout-cj 打造高亮+链接+点击回调三合一富文本通知
通知场景实战用 text-layout-cj 打造高亮链接点击回调三合一富文本通知【免费下载链接】text-layout-cj文本自定义布局组件项目地址: https://gitcode.com/Cangjie-TPC/text-layout-cjtext-layout-cj 是一款基于仓颉语言cangjie的开源文本自定义布局组件它能将一段普通文本变成支持关键词高亮、链接自动识别、点击回调的富文本特别适合通知类文本需要特殊显示的场景。本文带你用几行代码打造高亮 链接 点击回调三合一的富文本通知。 text-layout-cj 能解决什么问题通知文案默认都是千人一面同样字号、同样颜色、没有重点。而真实业务里你通常希望重点信息一眼看到把123456这样的关键词放大、换色、加间距高亮链接可点击可区分正文中的 URL 自动带链接色 下划线响应用户点击用户点中高亮文字后弹窗、跳转或执行自定义逻辑。text-layout-cj 把这 3 个能力封装成一个组件免去了手写富文本排版的繁琐。它围绕 3 个核心概念概念作用对应源码TextInfo文字片段的样式实体起止位置、字号、颜色、字间距、字体样式test_info.cjLayout布局配置模型文本内容、链接色、最大行数、按色、点击回调等text_layout.cjTextLayoutUI 组件接收一个Layout并渲染出富文本text_layout_component.cj组件内部会把文本拆分成普通文本、特殊文本高亮和链接三类 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. 链接识别与配色零额外操作文本中的 URLhttp/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 种实际效果演示可以直接对照调试。 通知场景常用参数速查需求API说明设置文本setText通知正文高亮片段setSpecialTextInfo指定区间自定义字号/颜色/间距/样式链接颜色setLinkColorURL 自动识别并带下划线点击回调setSpecialTextClick接收被点击的TextInfo按色反馈setIsEnablePressStatesetTextPressStateStyle按下时整块变色交互更明显限制行数setMaxLinessetEllipsize长通知避免撑破版面背景色setBgColor空文本也能占位显示对齐方式setAlignmentStart / Center / End完整接口文档见 feature_api.md。⚠️ 使用前的 3 个注意事项start 不能大于 end否则组件会记录 Hilog 错误并将该高亮区间置 0 处理setMinWidth、setMaxWidth、setWidth 不建议同时使用宽度可能互相冲突环境约束示例在 DevEco Studio NEXT Developer Beta25.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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考