HarmonyOS6 RcText 组件使用示例完整指南

主题色说明：

使用建议：

• 正文内容使用 default 类型
• 重要信息使用 primary 类型
• 成功提示使用 success 类型
• 错误提示使用 danger 类型
• 辅助说明使用 info 类型

1.3 文本尺寸

RcText 提供 3 种预设尺寸，覆盖常见使用场景。

Column({ space: 10 }) {
  RcText({ text: 'Large 大号文本', textSize: 'large' })
  RcText({ text: 'Default 默认文本', textSize: 'default' })
  RcText({ text: 'Small 小号文本', textSize: 'small' })
}

尺寸规格表：

选择建议：

• 页面标题、卡片标题使用 large 尺寸
• 正文内容、列表项使用 default 尺寸
• 提示文字、时间戳使用 small 尺寸

二、样式定制

2.1 自定义颜色和字号

当预设样式不满足需求时，可以精确控制文本样式。

Column({ space: 10 }) {
  // 自定义颜色
  RcText({ text: '自定义颜色文本', color: '#ff6600' })
  // 自定义字号
  RcText({ text: '自定义字号文本', fontSize: 20 })
  // 组合自定义
  RcText({ text: '组合自定义样式', color: '#ff6600', fontSize: 18, fontWeight: 'bold' })
}

自定义属性说明：

• color: 文本颜色，优先级高于 type
• fontSize: 字体大小，优先级高于 textSize
• fontWeight: 字体粗细，支持关键字和数值

fontWeight 支持值：

• 关键字：'normal'、'bold'、'lighter'、'bolder'
• 数值：100、200、300、400、500、600、700、800、900

2.2 文本对齐方式

RcText 支持 5 种对齐方式，满足不同布局需求。

Column({ space: 10 }) {
  RcText({ text: '左对齐文本（默认）', textAlign: 'left' })
  RcText({ text: '居中对齐文本', textAlign: 'center', type: 'primary' })
  RcText({ text: '右对齐文本', textAlign: 'right', type: 'success' })
}

对齐方式说明：

• left: 左对齐，默认方式
• center: 居中对齐，适合标题
• right: 右对齐，适合金额显示
• start: 开始对齐，支持 RTL
• end: 结束对齐，支持 RTL

应用场景：

// 页面标题居中
RcText({ text: '页面标题', textAlign: 'center', fontSize: 20, fontWeight: 'bold' })
// 金额右对齐
RcText({ text: '¥1,234.56', textAlign: 'right', type: 'danger', fontSize: 18 })

2.3 文本装饰

RcText 支持下划线和删除线装饰。

Column({ space: 10 }) {
  // 下划线
  RcText({ text: '下划线文本', textDecoration: 'underline', type: 'primary' })
  // 删除线
  RcText({ text: '删除线文本', textDecoration: 'line-through', type: 'danger' })
}

装饰类型说明：

• none: 无装饰，默认状态
• underline: 下划线，常用于链接
• line-through: 删除线，表示作废或原价

典型应用场景：

// 链接文本
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' })
}

三、文本截断

3.1 单行截断

单行截断用于需要限制文本在一行内显示的场景。

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' })

3.2 多行截断

多行截断可以控制文本显示的最大行数。

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 })

四、特殊显示模式

4.1 价格模式

价格模式自动格式化数字为标准价格格式。

Column({ space: 10 }) {
  // 标准价格
  RcText({ text: '1234.56', mode: 'price', type: 'danger', fontSize: 20, fontWeight: 'bold' })
  // 大额价格
  RcText({ text: '999999.99', mode: 'price', type: 'danger' })
}

价格格式化规则：

1. 自动添加货币符号 ¥
2. 保留两位小数
3. 添加千分位分隔符

格式化示例：

输入:'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' })
      }
    }
  }
}

4.2 手机号模式

手机号模式自动脱敏显示，保护用户隐私。

Column({ space: 10 }) {
  RcText({ text: '13888888888', mode: 'phone', type: 'primary' })
  RcText({ text: '18912345678', mode: 'phone' })
}

脱敏规则：

• 仅处理 11 位标准手机号
• 显示前 3 位和后 4 位
• 中间 4 位显示为星号 (***)

脱敏示例：

输入:'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 })
}

4.3 链接模式

链接模式提供可点击的文本链接功能。

Column({ space: 10 }) {
  RcText({ text: '点击访问官网', mode: 'link', href: 'https://example.com', type: 'primary', textDecoration: 'underline', onTextClick: () => {
    console.log('链接被点击')
    // 这里可以实现页面跳转逻辑
  }})
}

链接模式特点：

• 支持点击事件
• 可配合 href 属性使用
• 建议使用 primary 类型
• 建议添加下划线装饰

链接样式最佳实践：

// 标准链接样式
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: () => {
  // 跳转逻辑
}})

五、前后置元素

5.1 前置元素

前置元素可以在文本前显示提示或装饰。

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' })
}

5.2 后置元素

后置元素常用于导航和展开指示。

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
}})

5.3 前后双元素

同时使用前后置元素，创建更丰富的视觉效果。

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'
  }
}

5.4 自定义元素颜色

元素颜色可以单独设置，不受文本颜色限制。

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' })
}

元素颜色说明：

• 默认情况下，元素颜色跟随文本颜色
• 设置 iconColor 后，元素使用独立颜色
• 前后置元素使用相同的 iconColor

六、交互功能

6.1 点击事件

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 ? '点赞成功' : '取消点赞' })
}})

6.2 可选中文本

可选中文本允许用户长按选择和复制内容。

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' })
}

七、布局应用

7.1 边距控制

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 是一个功能强大且易用的文本展示组件，覆盖了大部分鸿蒙应用开发中的文本展示案例。