TypeScript大前端
HarmonyOS6 RcText 组件使用示例完整指南
HarmonyOS6 中 RcText 组件的使用指南。该组件支持基础文本展示、主题色与尺寸预设、自定义样式（颜色、字号、对齐、装饰）、文本截断（单行/多行）、特殊模式（价格格式化、手机号脱敏、链接点击）、前后置图标及交互功能（点击事件、可选中）。通过封装常用文本处理逻辑，RcText 有助于提升鸿蒙应用开发的效率与界面一致性。
HarmonyOS6 中 RcText 组件的使用指南。该组件支持基础文本展示、主题色与尺寸预设、自定义样式（颜色、字号、对齐、装饰）、文本截断（单行/多行）、特殊模式（价格格式化、手机号脱敏、链接点击）、前后置图标及交互功能（点击事件、可选中）。通过封装常用文本处理逻辑，RcText 有助于提升鸿蒙应用开发的效率与界面一致性。
rchoui 是一个面向 HarmonyOS6 的企业级 UI 组件库，旨在提供开箱即用的高质量组件，让开发者告别'重复造轮子'。
RcText 最基础的用法就是显示文本内容。
// 导入组件
import { RcText } from 'rchoui'
// 基础使用
Column({ space: 10 }) {
RcText({ text: '这是一段普通文本' })
RcText({ text: '支持数字类型', text: 12345 })
}
特点说明：
RcText 提供了 6 种预设主题色，满足不同语义场景。
Column({ space: 10 }) {
RcText({ text: 'Default 默认', type: 'default' })
RcText({ text: 'Primary 主色', type: 'primary' })
RcText({ text: 'Success 成功', type: 'success' })
RcText({ text: 'Warning 警告', type: 'warning' })
RcText({ text: 'Danger 危险', type: 'danger' })
RcText({ text: 'Info 信息', type: 'info' })
}
主题色说明：
| 主题类型 | 颜色值 | 使用场景 | 视觉特点 |
|---|---|---|---|
| default | #303133 | 常规文本、正文内容 | 深灰色，清晰易读 |
| primary | #409eff | 强调信息、链接文本 | 蓝色系，吸引注意 |
| success | #67c23a | 成功提示、正向状态 | 绿色系，积极正向 |
| warning | #e6a23c | 警告信息、注意事项 | 橙色系，提醒注意 |
| danger | #f56c6c | 错误提示、危险操作 | 红色系，强烈警示 |
| info | #909399 | 次要信息、辅助说明 | 灰色系，弱化视觉 |
使用建议：
RcText 提供 3 种预设尺寸，覆盖常见使用场景。
Column({ space: 10 }) {
RcText({ text: 'Large 大号文本', textSize: 'large' })
RcText({ text: 'Default 默认文本', textSize: 'default' })
RcText({ text: 'Small 小号文本', textSize: 'small' })
}
尺寸规格表：
| 尺寸 | 字体大小 | 使用场景 |
|---|---|---|
| large | 18vp | 页面标题、重要信息 |
| default | 14vp | 正文内容、常规文本 |
| small | 12vp | 辅助文字、次要信息 |
选择建议：
当预设样式不满足需求时，可以精确控制文本样式。
Column({ space: 10 }) {
// 自定义颜色
RcText({ text: '自定义颜色文本', color: '#ff6600' })
// 自定义字号
RcText({ text: '自定义字号文本', fontSize: 20 })
// 组合自定义
RcText({ text: '组合自定义样式', color: '#ff6600', fontSize: 18, fontWeight: 'bold' })
}
自定义属性说明：
color: 文本颜色，优先级高于 typefontSize: 字体大小，优先级高于 textSizefontWeight: 字体粗细，支持关键字和数值fontWeight 支持值：
RcText 支持 5 种对齐方式，满足不同布局需求。
Column({ space: 10 }) {
RcText({ text: '左对齐文本（默认）', textAlign: 'left' })
RcText({ text: '居中对齐文本', textAlign: 'center', type: 'primary' })
RcText({ text: '右对齐文本', textAlign: 'right', type: 'success' })
}
对齐方式说明：
应用场景：
// 页面标题居中
RcText({ text: '页面标题', textAlign: 'center', fontSize: 20, fontWeight: 'bold' })
// 金额右对齐
RcText({ text: '¥1,234.56', textAlign: 'right', type: 'danger', fontSize: 18 })
RcText 支持下划线和删除线装饰。
Column({ space: 10 }) {
// 下划线
RcText({ text: '下划线文本', textDecoration: 'underline', type: 'primary' })
// 删除线
RcText({ text: '删除线文本', textDecoration: 'line-through', type: 'danger' })
}
装饰类型说明：
典型应用场景：
// 链接文本
RcText({ text: '点击查看详情', textDecoration: 'underline', type: 'primary' })
// 原价展示
Row({ space: 8 }) {
RcText({ text: '¥299.00', textDecoration: 'line-through', type: 'info', textSize: 'small' })
RcText({ text: '¥199.00', type: 'danger', fontSize: 20, fontWeight: 'bold' })
}
单行截断用于需要限制文本在一行内显示的场景。
Column({ space: 10 }) {
RcText({ text: '这是一段很长的文本内容，超出容器宽度会显示省略号，这是单行截断的效果展示', truncated: true })
}
单行截断特点：
应用示例：
// 文章标题
RcText({ text: article.title, truncated: true, fontSize: 16, fontWeight: 'bold' })
// 商品名称
RcText({ text: product.name, truncated: true, type: 'default' })
多行截断可以控制文本显示的最大行数。
Column({ space: 10 }) {
// 显示最多 2 行
RcText({ text: '这是一段很长的文本内容，可以显示多行。超出指定行数会显示省略号。这是第三行内容。这是第四行内容，应该会被截断。', maxLines: 2, type: 'info' })
// 显示最多 3 行
RcText({ text: '文章摘要内容通常需要显示多行，但又不能占用太多空间。使用 maxLines 可以精确控制显示行数。超出部分会自动显示省略号，保持界面整洁。', maxLines: 3, lineHeight: 22 })
}
多行截断应用场景：
1. 文章摘要
RcText({ text: article.summary, maxLines: 3, lineHeight: 22, type: 'info' })
2. 商品描述
RcText({ text: product.description, maxLines: 2, textSize: 'small', type: 'info' })
3. 评论内容
RcText({ text: comment.content, maxLines: 4, lineHeight: 20 })
价格模式自动格式化数字为标准价格格式。
Column({ space: 10 }) {
// 标准价格
RcText({ text: '1234.56', mode: 'price', type: 'danger', fontSize: 20, fontWeight: 'bold' })
// 大额价格
RcText({ text: '999999.99', mode: 'price', type: 'danger' })
}
价格格式化规则：
格式化示例：
输入:'1234.56' → 输出:'¥1,234.56'
输入:'999999' → 输出:'¥999,999.00'
输入:'100' → 输出:'¥100.00'
完整的商品价格展示：
@Component struct ProductPrice {
@Prop product: ProductInfo
build() {
Row({ space: 8 }) {
// 现价
RcText({ text: this.product.price, mode: 'price', type: 'danger', fontSize: 24, fontWeight: 'bold' })
// 原价
if (this.product.originalPrice) {
RcText({ text: this.product.originalPrice, mode: 'price', textDecoration: 'line-through', type: 'info', textSize: 'small' })
}
}
}
}
手机号模式自动脱敏显示，保护用户隐私。
Column({ space: 10 }) {
RcText({ text: '13888888888', mode: 'phone', type: 'primary' })
RcText({ text: '18912345678', mode: 'phone' })
}
脱敏规则：
脱敏示例：
输入:'13888888888' → 输出:'138****8888'
输入:'18912345678' → 输出:'189****5678'
应用场景：
// 用户信息展示
Column({ space: 8 }) {
Row({ space: 8 }) {
Text('手机号:').fontSize(14).fontColor('#666')
RcText({ text: user.phone, mode: 'phone', type: 'default' })
}
}
// 订单联系方式
Column({ space: 4 }) {
Text('收货人信息').fontSize(14).fontColor('#999')
RcText({ text: order.receiverPhone, mode: 'phone', fontSize: 15 })
}
链接模式提供可点击的文本链接功能。
Column({ space: 10 }) {
RcText({ text: '点击访问官网', mode: 'link', href: 'https://example.com', type: 'primary', textDecoration: 'underline', onTextClick: () => {
console.log('链接被点击')
// 这里可以实现页面跳转逻辑
}})
}
链接模式特点：
链接样式最佳实践：
// 标准链接样式
RcText({ text: '查看详情', mode: 'link', type: 'primary', textDecoration: 'underline', onTextClick: () => {
router.pushUrl({ url: 'pages/Detail' })
}})
// 协议链接
RcText({ text: '《用户协议》', mode: 'link', type: 'primary', textSize: 'small', onTextClick: () => {
router.pushUrl({ url: 'pages/Agreement' })
}})
// 带后置箭头的链接
RcText({ text: '了解更多', mode: 'link', type: 'primary', suffixIcon: 'icon-houi_arrow_ios_forward_outline', iconSize: 16, onTextClick: () => {
// 跳转逻辑
}})
前置元素可以在文本前显示提示或装饰。
Column({ space: 10 }) {
RcText({ text: '首页', prefixIcon: 'icon-houi_home_outline', iconSize: 20, type: 'primary' })
RcText({ text: '设置', prefixIcon: 'icon-houi_settings_2_outline', iconSize: 20, type: 'info' })
RcText({ text: '成功提示', prefixIcon: 'icon-houi_checkmark_circle_2_outline', iconSize: 20, type: 'success' })
}
前置元素应用场景：
1. 状态提示
Column({ space: 10 }) {
RcText({ text: '操作成功', prefixIcon: 'icon-houi_checkmark_circle_2_outline', iconSize: 18, type: 'success' })
RcText({ text: '警告信息', prefixIcon: 'icon-houi_alert_circle_outline', iconSize: 18, type: 'warning' })
RcText({ text: '错误提示', prefixIcon: 'icon-houi_close_circle_outline', iconSize: 18, type: 'danger' })
}
2. 功能入口
Column({ space: 12 }) {
RcText({ text: '搜索商品', prefixIcon: 'icon-houi_search_outline', iconSize: 20, type: 'info' })
RcText({ text: '定位信息', prefixIcon: 'icon-houi_pin_outline', iconSize: 18, type: 'primary' })
}
后置元素常用于导航和展开指示。
Column({ space: 10 }) {
RcText({ text: '查看更多', suffixIcon: 'icon-houi_arrow_ios_forward_outline', iconSize: 16, type: 'primary' })
RcText({ text: '返回上一页', suffixIcon: 'icon-houi_arrow_ios_back_outline', iconSize: 16 })
}
后置元素应用场景：
// 导航链接
RcText({ text: '个人中心', suffixIcon: 'icon-houi_chevron_right_outline', iconSize: 16, onTextClick: () => {
router.pushUrl({ url: 'pages/Profile' })
}})
// 下拉展开
RcText({ text: this.expanded ? '收起' : '展开', suffixIcon: this.expanded ? 'icon-houi_chevron_up_outline' : 'icon-houi_chevron_down_outline', iconSize: 16, type: 'primary', onTextClick: () => {
this.expanded = !this.expanded
}})
同时使用前后置元素，创建更丰富的视觉效果。
Column({ space: 10 }) {
RcText({ text: '重要通知', prefixIcon: 'icon-houi_bell_outline', suffixIcon: 'icon-houi_chevron_right_outline', iconSize: 18, type: 'warning' })
RcText({ text: '收藏文章', prefixIcon: 'icon-houi_star_outline', suffixIcon: 'icon-houi_arrow_ios_forward_outline', iconSize: 16, type: 'danger' })
}
完整的列表项示例：
@Component struct ListItemWithIcons {
@Prop item: ListItemData
build() {
Row() {
RcText({ text: this.item.title, prefixIcon: this.getStatusIcon(this.item.status), suffixIcon: 'icon-houi_chevron_right_outline', iconSize: 18, type: this.getStatusType(this.item.status), onTextClick: () => {
router.pushUrl({ url: 'pages/Detail', params: { id: this.item.id }})
}})
}.width('100%').padding(16).backgroundColor('#fff')
}
getStatusIcon(status: string): string {
const iconMap = {
'success': 'icon-houi_checkmark_circle_2_outline',
'warning': 'icon-houi_alert_circle_outline',
'error': 'icon-houi_close_circle_outline'
}
return iconMap[status] || 'icon-houi_info_outline'
}
getStatusType(status: string): RcTextType {
const typeMap = {
'success': 'success',
'warning': 'warning',
'error': 'danger'
}
return typeMap[status] || 'default'
}
}
元素颜色可以单独设置，不受文本颜色限制。
Column({ space: 10 }) {
// 橙色元素
RcText({ text: '橙色元素', prefixIcon: 'icon-houi_heart_outline', iconSize: 20, iconColor: '#ff6600', type: 'default' })
// 紫色元素
RcText({ text: '紫色元素', prefixIcon: 'icon-houi_star_outline', iconSize: 20, iconColor: '#9c27b0' })
}
元素颜色说明：
RcText 支持点击事件，可以实现各种交互功能。
@Component struct ClickExample {
@State clickCount: number = 0
build() {
Column({ space: 15 }) {
Text(`点击次数：${this.clickCount}`).fontSize(16)
RcText({ text: `点击次数：${this.clickCount}`, type: 'primary', prefixIcon: 'icon-houi_file_add', iconSize: 18, onTextClick: () => {
this.clickCount++
}})
}
}
}
点击事件应用场景：
1. 导航跳转
RcText({ text: '查看订单详情', type: 'primary', suffixIcon: 'icon-houi_arrow_ios_forward_outline', onTextClick: () => {
router.pushUrl({ url: 'pages/OrderDetail', params: { orderId: this.orderId }})
}})
2. 展开折叠
@State expanded: boolean = false
Column() {
Text(this.expanded ? this.fullContent : this.shortContent)
RcText({ text: this.expanded ? '收起' : '展开全部', type: 'primary', textSize: 'small', suffixIcon: this.expanded ? 'icon-houi_chevron_up_outline' : 'icon-houi_chevron_down_outline', onTextClick: () => {
this.expanded = !this.expanded
}})
}
3. 切换状态
@State liked: boolean = false
RcText({ text: this.liked ? '已点赞' : '点赞', type: this.liked ? 'danger' : 'default', prefixIcon: this.liked ? 'icon-houi_heart' : 'icon-houi_heart_outline', iconSize: 18, onTextClick: () => {
this.liked = !this.liked
promptAction.showToast({ message: this.liked ? '点赞成功' : '取消点赞' })
}})
可选中文本允许用户长按选择和复制内容。
Column({ space: 10 }) {
RcText({ text: '这段文本可以被选中和复制，请长按尝试', selectable: true, type: 'primary', rcPadding: 10 }).backgroundColor('#f0f9ff').borderRadius(4)
}
可选中文本应用场景：
1. 订单号
Row({ space: 8 }) {
Text('订单号:').fontSize(14).fontColor('#666')
RcText({ text: order.orderNo, selectable: true, fontWeight: 'bold' })
}
2. 地址信息
Column({ space: 4 }) {
Text('收货地址').fontSize(14).fontColor('#999')
RcText({ text: order.address, selectable: true, maxLines: 2 })
}
3. 验证码
Column({ space: 8 }) {
Text('验证码').fontSize(14)
RcText({ text: verifyCode, selectable: true, fontSize: 32, fontWeight: 'bold', color: '#409eff', textAlign: 'center' })
}
RcText 支持精确控制外边距和内边距。
Column({ space: 10 }) {
// 带内边距
RcText({ text: '带内边距的文本', rcPadding: { left: 16, right: 16, top: 8, bottom: 8 }, type: 'primary', color: '#fff' }).backgroundColor('#409eff').borderRadius(4)
// 带外边距
RcText({ text: '带外边距的文本', rcMargin: { top: 10, bottom: 10 }, type: 'success' })
}
边距使用场景：
1. 标签样式
Flex({ wrap: FlexWrap.Wrap }) {
ForEach(this.tags, (tag: string) => {
RcText({ text: tag, type: 'primary', textSize: 'small', rcPadding: { left: 12, right: 12, top: 4, bottom: 4 }, rcMargin: { right: 8, bottom: 8 }}).backgroundColor('#e6f7ff').borderRadius(4)
})
}
2. 卡片内容
Column({ space: 0 }) {
RcText({ text: '卡片标题', fontSize: 16, fontWeight: 'bold', rcMargin: { bottom: 8 }})
RcText({ text: '卡片内容描述文字', type: 'info', textSize: 'small', maxLines: 2 })
}.padding(16).backgroundColor('#fff').borderRadius(8)
RcText 是一个功能强大且易用的文本展示组件，覆盖了大部分鸿蒙应用开发中的文本展示案例。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online