TypeScript大前端
HarmonyOS6 RcText 组件文本显示模式深度解析
深入解析了 HarmonyOS 中 RcText 组件的文本显示功能。涵盖链接模式设计与点击处理、单行及多行文本截断机制、字体样式定制（大小、粗细、对齐、装饰、行高）、文本选中复制功能以及组合使用场景示例（如商品价格、用户信息卡片）。通过参数配置与代码实践，帮助开发者实现灵活可控的文本展示效果。
深入解析了 HarmonyOS 中 RcText 组件的文本显示功能。涵盖链接模式设计与点击处理、单行及多行文本截断机制、字体样式定制（大小、粗细、对齐、装饰、行高）、文本选中复制功能以及组合使用场景示例（如商品价格、用户信息卡片）。通过参数配置与代码实践，帮助开发者实现灵活可控的文本展示效果。
链接模式提供了可点击的文本链接功能:
@Param mode: RcTextMode = 'text'
@Param href: string = ''
@Param onTextClick: () => void = () => {}
private handleClick() {
if (this.mode === 'link' && this.href) {
console.log('Open link:', this.href); // 这里可以添加打开链接的逻辑
}
if (this.onTextClick) {
this.onTextClick();
}
}
处理流程:
RcText({ text:'查看详情', mode:'link', href:'https://example.com/detail', type:'primary', textDecoration:'underline',onTextClick:()=>{console.log('链接被点击')}})
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:()=>{// 跳转逻辑}})
链接文本的典型样式组合:
// 标准蓝色下划线链接
{ mode:'link', type:'primary', textDecoration:'underline'}
// 次要链接 (无下划线)
{ mode:'link', type:'info', textDecoration:'none'}
// 危险操作链接
{ mode:'link', type:'danger', textDecoration:'underline'}
RcText 提供了两种截断方式:
@Param maxLines:number=0
@Param truncated:boolean=false
参数说明:
.maxLines(this.maxLines >0?this.maxLines :(this.truncated ?1:undefined)).textOverflow(this.maxLines >0||this.truncated ?{ overflow: TextOverflow.Ellipsis }:undefined)
优先级规则:
配合 textOverflow:
// 文章标题
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})
不截断的情况:
RcText({ text:'正常换行的长文本内容会自动换行显示，不会被截断'})
// 自动换行，完整显示
单行截断:
RcText({ text:'单行截断的文本会在末尾显示省略号', truncated:true})
// 显示：单行截断的文本会在末尾...
多行截断:
RcText({ text:'多行截断的文本可以显示多行内容，但超过指定行数后会在最后一行末尾显示省略号', maxLines:2})
// 显示:
// 多行截断的文本可以显示多行
// 内容，但超过指定行数后会...
@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'
支持类型:
使用示例:
RcText({ text:'标题', fontWeight:'bold'})
RcText({ text:'强调', fontWeight:600})
RcText({ text:'正文', fontWeight:'normal'})
@Param textAlign: RcTextAlign ='left'
对齐方式:
使用场景:
// 标题居中
RcText({ text:'页面标题', textAlign:'center', fontSize:18, fontWeight:'bold'})
// 金额右对齐
RcText({ text:'¥1,234.56', textAlign:'right', mode:'price'})
@Param textDecoration: RcTextDecoration ='none'
装饰类型:
装饰颜色跟随文本颜色:
.decoration({ type:this.getDecoration(), color:this.getTypeColor()})
使用场景:
// 链接下划线
RcText({ text:'点击跳转', textDecoration:'underline', type:'primary'})
// 原价删除线
RcText({ text:'¥299.00', textDecoration:'line-through', type:'info'})
@Param lineHeight: RcStringNumber =0
作用:
使用示例:
// 紧凑行高
RcText({ text: content, lineHeight:18, maxLines:3})
// 舒适行高
RcText({ text: content, lineHeight:24, fontSize:16})
@Param selectable:boolean=false
.copyOption(this.selectable ? CopyOptions.InApp : CopyOptions.None)
CopyOptions 说明:
// 可复制的订单号
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'})
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})
}
Column(){
// 用户名
RcText({ text: user.name, fontSize:18, fontWeight:'bold'})
// 手机号
RcText({ text: user.phone, mode:'phone', type:'info', textSize:'small'}).margin({ top:4})
}
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 组件的相关方法进行了详细解析，展示了文本组件的实现原理与效果示例，供开发者参考以实现自定义文本展示需求。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 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