HarmonyOS6 RcText 组件文本显示模式深度解析

协议链接

RcText({ text:'《用户协议》', mode:'link', href:'/agreement', type:'primary', textSize:'small',onTextClick:()=>{ router.pushUrl({ url:'pages/Agreement'})}})

带前置符号的链接

RcText({ text:'了解更多', mode:'link', type:'primary', suffixIcon:'arrow_right',onTextClick:()=>{// 跳转逻辑}})

1.4 链接样式最佳实践

链接文本的典型样式组合:

// 标准蓝色下划线链接
{ mode:'link', type:'primary', textDecoration:'underline'}
// 次要链接 (无下划线)
{ mode:'link', type:'info', textDecoration:'none'}
// 危险操作链接
{ mode:'link', type:'danger', textDecoration:'underline'}

二、文本截断机制

2.1 截断参数设计

RcText 提供了两种截断方式:

@Param maxLines:number=0
@Param truncated:boolean=false

参数说明:

• maxLines: 指定最大行数，超出显示省略号
• truncated: 快捷开关，单行截断

2.2 截断逻辑实现

.maxLines(this.maxLines >0?this.maxLines :(this.truncated ?1:undefined)).textOverflow(this.maxLines >0||this.truncated ?{ overflow: TextOverflow.Ellipsis }:undefined)

优先级规则:

1. maxLines > 0: 使用 maxLines 的值
2. truncated = true: 设置为 1 行
3. 都未设置：undefined(不限制行数)

配合 textOverflow:

• 有截断时：显示省略号 (Ellipsis)
• 无截断时：undefined(正常显示)

2.3 截断使用场景

单行截断

// 文章标题
RcText({ text:'这是一个很长的文章标题，超出容器宽度会显示省略号', truncated:true, fontSize:16, fontWeight:'bold'})
// 显示：这是一个很长的文章标题，超出容器...

多行截断

// 文章摘要 (最多显示 3 行)
RcText({ text: articleContent, maxLines:3, lineHeight:22, type:'info'})

列表项名称

// 商品名称 (最多 2 行)
RcText({ text: product.name, maxLines:2, fontSize:14})

2.4 截断与换行的平衡

不截断的情况:

RcText({ text:'正常换行的长文本内容会自动换行显示，不会被截断'})
// 自动换行，完整显示

单行截断:

RcText({ text:'单行截断的文本会在末尾显示省略号', truncated:true})
// 显示：单行截断的文本会在末尾...

多行截断:

RcText({ text:'多行截断的文本可以显示多行内容，但超过指定行数后会在最后一行末尾显示省略号', maxLines:2})
// 显示:
// 多行截断的文本可以显示多行
// 内容，但超过指定行数后会...

三、文本样式定制

3.1 字体样式控制

字体大小

@Param fontSize: RcStringNumber =0
@Param textSize: RcTextSize ='default'

优先级: fontSize > textSize

使用示例:

// 使用预设尺寸
RcText({ text:'标题', textSize:'large'})
// 使用精确数值
RcText({ text:'副标题', fontSize:20})
RcText({ text:'正文', fontSize:'16vp'})

字体粗细

@Param fontWeight: RcTextWeight ='normal'

支持类型:

• 关键字：'normal' | 'bold' | 'lighter' | 'bolder'
• 数值：100 | 200 | … | 900

使用示例:

RcText({ text:'标题', fontWeight:'bold'})
RcText({ text:'强调', fontWeight:600})
RcText({ text:'正文', fontWeight:'normal'})

3.2 文本对齐

@Param textAlign: RcTextAlign ='left'

对齐方式:

• left: 左对齐
• center: 居中对齐
• right: 右对齐
• start: 开始对齐 (支持 RTL)
• end: 结束对齐 (支持 RTL)

使用场景:

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

3.3 文本装饰

@Param textDecoration: RcTextDecoration ='none'

装饰类型:

• none: 无装饰
• underline: 下划线
• line-through: 删除线

装饰颜色跟随文本颜色:

.decoration({ type:this.getDecoration(), color:this.getTypeColor()})

使用场景:

// 链接下划线
RcText({ text:'点击跳转', textDecoration:'underline', type:'primary'})
// 原价删除线
RcText({ text:'¥299.00', textDecoration:'line-through', type:'info'})

3.4 行高控制

@Param lineHeight: RcStringNumber =0

作用:

• 控制行与行之间的垂直间距
• 影响多行文本的可读性
• 用于精确控制文本高度

使用示例:

// 紧凑行高
RcText({ text: content, lineHeight:18, maxLines:3})
// 舒适行高
RcText({ text: content, lineHeight:24, fontSize:16})

四、文本选中功能

4.1 选中参数

@Param selectable:boolean=false

4.2 实现原理

.copyOption(this.selectable ? CopyOptions.InApp : CopyOptions.None)

CopyOptions 说明:

• InApp: 允许在应用内复制
• None: 不允许复制 (默认)

4.3 使用场景

// 可复制的订单号
RcText({ text: order.orderNo, selectable:true, fontWeight:'bold'})
// 可复制的地址
RcText({ text: address.detail, selectable:true, maxLines:2})
// 可复制的验证码
RcText({ text: verifyCode, selectable:true, fontSize:24, fontWeight:'bold', color:'#409eff'})

五、组合使用场景

5.1 商品价格区域

Row(){
  // 现价
  RcText({ text:'199.99', mode:'price', type:'danger', fontSize:24, fontWeight:'bold'})
  // 原价
  RcText({ text:'299.00', mode:'price', textDecoration:'line-through', type:'info', textSize:'small'}).margin({ left:8})
}

5.2 用户信息卡片

Column(){
  // 用户名
  RcText({ text: user.name, fontSize:18, fontWeight:'bold'})
  // 手机号
  RcText({ text: user.phone, mode:'phone', type:'info', textSize:'small'}).margin({ top:4})
}

5.3 文章摘要

Column(){
  // 标题
  RcText({ text: article.title, fontSize:16, fontWeight:'bold', maxLines:2})
  // 摘要
  RcText({ text: article.summary, type:'info', textSize:'small', lineHeight:20, maxLines:3}).margin({ top:8})
  // 查看详情链接
  RcText({ text:'查看全文', mode:'link', type:'primary', textSize:'small',onTextClick:()=>{// 跳转详情页}}).margin({ top:8})
}

六、总结

本文对 RcText 组件的相关方法进行了详细解析，展示了文本组件的实现原理与效果示例，供开发者参考以实现自定义文本展示需求。