【鸿蒙开发实战】基于measure实现的文本测量

场景描述

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

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

方案描述

场景一：

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

方案

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

}

鸿蒙全栈开发全新学习指南

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以要有一份实用的鸿蒙（HarmonyOS NEXT）学习路线与学习文档用来跟着学习是非常有必要的。

针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的核心知识要点，内容有（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、WebGL、元服务、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植等等）鸿蒙（HarmonyOS NEXT）技术知识点。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

开发基础知识:gitee.com/MNxiaona/733GH

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……

基于ArkTS 开发

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing🚀，不定期分享原创知识。
• 想要获取更多完整鸿蒙最新学习资源，请移步前往小编：gitee.com/MNxiaona/733GH