鸿蒙5.0实战案例：基于measure实现的文本测量
往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）
✏️ 鸿蒙（HarmonyOS）北向开发知识点记录~
✏️ 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
✏️ 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
✏️ 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
✏️ 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
✏️ 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
✏️ 记录一场鸿蒙开发岗位面试经历~
✏️ 持续更新中……
场景描述
场景一：当文本的内容超过指定的行数时显示 …展开，当所有文本展开后，最后面跟着收起。
场景二：搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容
方案描述
场景一：
当文本的内容超过指定的行数时显示 …展开，当所有文本展开后，最后面跟着收起。
方案
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.titleWidth,
fontSize: 20
})
console.log("test while clipTitle:" + clipTitle)
console.log("test while clipTitle height:" + titleSize.height)
}
console.log("test clipTitle:" + clipTitle)
this.title = clipTitle + this.ellipsis
this.expanded = false;
}
// 文本展开态（即收起逻辑）
expandText(): void {
console.log('testTag: ' + this.needProcess);
if (this.needProcess) {
//文本已经展开了，就需要将最后一个文本替换成收起的样式
this.lastSpan = this.COLLAPSE_STR;
this.expanded = true;
this.title = this.rawTitle;
}
}
场景二：
搜索框展示历史记录，单个子组件超过固定长度后展示省略号，固定只展示两行，超出的文字被截断，通过点击按钮展示后续文本内容。
方案
1.历史记录固定只展示两行，超出的均被截断
2.单个文本有固定尺寸，超长后会展示省略号
3.通过点击按钮可以展示出所有的历史记录
核心代码
获取屏幕的宽度
//子组件的最大宽度，目前是定死的
const childMaxWidth:number = 325 //为了方便后续计算，这里的宽度数值为px
let displayClass: display.Display | null = null;
let componentWidth:number = 0;
try {
//获取屏幕宽度
displayClass = display.getDefaultDisplaySync();
componentWidth = displayClass.width
console.log('---这是componentWidth',componentWidth)
} catch (exception) {
console.error('Failed to obtain the default display object. Code: ' + JSON.stringify(exception));
}
// 监听下标和单个文字的改变
IndexChange(){
if(this.AllWidth >= (this.restrictWidth - childMaxWidth) && this.AllWidth <= (this.restrictWidth)){
this.newIndex = this.index
console.log('---这是newIndex',this.newIndex)
}
}
textChange(){
let content:string = this.message
this.textWidth = measure.measureText({
textContent: content,
fontSize: this.fontSizeData
})
if(this.textWidth > childMaxWidth){
this.AllWidth += childMaxWidth
console.log('---这是AllWidth1',this.AllWidth)
}else{
this.AllWidth += this.textWidth
console.log('---这是AllWidth2',this.AllWidth)
console.log('---textWidth',this.textWidth)
}
}
// 对超出的文本进行判断
aboutToAppear(): void {
// this.process();
if(componentWidth != 0){
this.restrictWidth = Math.floor((parseFloat(this.FlexWidth) * componentWidth) * 0.01 )
console.log('---这是restrictWidth',this.restrictWidth)
console.log('---FlexWidth',(this.FlexWidth))
}
for(let i = 0;i < this.AllData.length;i++){
this.message = this.AllData[i]
this.index = i
console.log('---index',this.index)
}
this.SomeData = this.AllData.slice(0,this.newIndex+1)
this.ShowData = this.SomeData
}