HarmonyOS 如何判断Text中的文字显示的行数?

HarmonyOS  如何判断Text中的文字显示的行数?

HarmonyOS
2024-09-25 12:41:36
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

@ohos.measure可以返回多行文字的宽高,没有返回行数,但可以根据业务场景来计算。API文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5

场景一:超过特定行数(下方以3行为例),样式不同,比如加上展开、收缩。

计算文本总高度。

let textSize : SizeOptions = measure.measureTextSize({  
  textContent: this.content,  
  fontSize: 24,  
  constraintWidth: 300  
})

限定宽度和最大行数(3行),计算高度。

let textSize2 : SizeOptions = measure.measureTextSize({  
  textContent: this.content,  
  fontSize: 24,  
  maxLines: 3,  
  constraintWidth: 300  
})

若textSize.height > textSize2.height,则表示实际高度超过3行,根据判断结果进行业务处理。

场景二:组件渲染前预留合适高度展示内容。

import measure from '@ohos.measure'  
@Entry  
@Component  
struct Index {  
  @State textSize: SizeOptions = { width: 0, height: 0 }  
  @State message: string = '很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段';  
  
  aboutToAppear(): void {  
    this.textSize = measure.measureTextSize({  
      textContent: this.message,  
      fontSize: 14,  
      constraintWidth: 300  
    })  
    console.log(JSON.stringify(this.textSize))  
  }  
  
  build() {  
    Row() {  
      Swiper() {  
        Row() {  
          Text(this.message)  
            .fontSize(14)  
            .width(300)  
        }  
        .backgroundColor(Color.Yellow)  
        .width(300)  
        .height(px2vp(Number(this.textSize.height)))  
      }  
  
    }  
    .height('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-25 16:55:41
相关问题
Text匹配文字高亮显示
753浏览 • 1回复 待解决
HarmonyOS TextSpan显示问题
347浏览 • 1回复 待解决
HarmonyOS如何使Text单词折行显示
353浏览 • 1回复 待解决
HarmonyOS Text如何显示 emjo 表情?
124浏览 • 1回复 待解决
如何获取Text组件中文字宽度
2014浏览 • 1回复 待解决
HarmonyOS 文字显示问题
311浏览 • 1回复 待解决
过长文字如何滚动显示
1815浏览 • 1回复 待解决
HarmonyOS TextImageSpan和Span
324浏览 • 1回复 待解决