【鸿蒙性能优化】基于measure实现的文本测量

最新推荐文章于 2025-06-17 17:55:00 发布

原创

最新推荐文章于 2025-06-17 17:55:00 发布 · 970 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #ui #鸿蒙 #缓存 #前端

场景描述

场景一：当文本的内容超过指定的行数时显示 …展开，当所有文本展开后，最后面跟着收起。

场景二：搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容

方案描述

场景一：

当文本的内容超过指定的行数时显示 …展开，当所有文本展开后，最后面跟着收起。

方案

1、文本默认超过两行时，直接截断，在截断文本后添加…展开

2、测量两行文本和全部文本的高度，当全部文本的高度超过两行文本的高度时进行展开的逻辑

3、文本全部展开后，点击收起，所有文本全部收齐变成固定的两行

核心代码

文本收起态（即展开逻辑）


collapseText(): void {

//判断文本是否需要展开

if (!this.needProcess) {

return;

}

let titleSize : SizeOptions = measure.measureTextSize({

textContent: this.rawTitle,

constraintWidth: this.titleWidth,

fontSize: 20

})

//测量最大行数（两行）限制的高度，

let twoLineSize : SizeOptions = measure.measureTextSize({

textContent: this.rawTitle,

constraintWidth: this.titleWidth,

fontSize: 20,

maxLines: this.MAX_LINES

})

//文本未超过限制行数，不进行展开、收起处理

if (Number(titleSize.height) == Number(twoLineSize.height)) {

this.needProcess = false;

return;

}



console.log('test row height:' + titleSize.height)

console.log('test twoLineSize height:' + twoLineSize.height)

//clipTitle被截取的文本，rawtitle只全部的文本

let clipTitle: string = this.rawTitle

//EXPAND_STR将展开这个文本赋值给最后一个span

this.lastSpan = this.EXPAND_STR;

while (Number(titleSize.height) > Number(twoLineSize.height)) {

//判断是否展开

this.expanded = true;

clipTitle = clipTitle.substring(0, clipTitle.length - 1);

titleSize = measure.measureTextSize({

//文本总共被分成三段，展示的则是被截取的文本+省略号+最后的展开或收起的文字

textContent: clipTitle + this.ellipsis + this.lastSpan,

constraintWidth: this.t