HarmonyOS6半年磨一剑 - RcText组件文本显示模式深度解析
文章目录
一、链接模式深度解析
1.1 链接模式设计
链接模式提供了可点击的文本链接功能:
@Param mode: RcTextMode ='text'@Param href:string=''@ParamonTextClick:()=>void=()=>{}1.2 链接点击处理
privatehandleClick(){if(this.mode ==='link'&&this.href){console.log('Open link:',this.href)// 这里可以添加打开链接的逻辑}if(this.onTextClick){this.onTextClick()}}处理流程:
- 检查是否为链接模式且有href
- 执行内置的链接处理逻辑(预留扩展点)
- 执行用户自定义回调
1.3 链接模式使用示例
基础链接
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:()=>{// 跳转逻辑}})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)优先级规则:
- maxLines > 0: 使用maxLines的值
- truncated = true: 设置为1行
- 都未设置: 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=false4.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 组件的相关方法进行解析说明，注意本章节与上一章节更加完整的展示了Text组件实现的原理， 同时图片为示例图片(效果图)， 开发者可以根据该文档来从零开发属于自己的Text 文本组件哦~~
