HarmonyOS Text组件如何计算文本行数

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

@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.message, fontSize: 24, constraintWidth: 300 });

// 限定宽度和最大行数(3行),计算高度
let textSize2: SizeOptions = measure.measureTextSize({
  textContent: this.message,
  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 =
    'HarmonyOS NEXT 多设备设计指南与重点特性规范,为您提供面向垂类场景、全端侧的针对性设计建议。 并有简单易用的控件助力您打造高端精致的 HarmonyOS NEXT 应用新体验,与您共同构建一个和谐的数字世界。';

  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
微信
回复
1天前
相关问题
HarmonyOS Text获取文本显示的行数
89浏览 • 1回复 待解决
HarmonyOS 文本计算不准
70浏览 • 1回复 待解决
肉眼没有看出来的文本行差异
4503浏览 • 1回复 待解决
HarmonyOS Text组件中,文本怎么换行
26浏览 • 1回复 待解决
HarmonyOS Text计算高度
72浏览 • 1回复 待解决
获取文本Text组件的宽度
527浏览 • 1回复 待解决
HarmonyOS 文本高度计算问题
51浏览 • 1回复 待解决
如何计算文本是否溢出省略
1724浏览 • 1回复 待解决
有谁知道如何计算文本的宽度
2256浏览 • 1回复 待解决
HarmonyOS 计算多行文本布局宽高
34浏览 • 1回复 待解决