基于measure实现的文本测量

基于measure实现的文本测量


HarmonyOS
2024-06-11 23:37:44
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
yu_qingbo

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

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

方案描述

场景一:

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

效果图

方案

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 
}
分享
微博
QQ
微信
回复
2024-06-12 23:52:53
相关问题
ArkTS实现Text文本【...展开】
391浏览 • 1回复 待解决
实现文本编码和解码机制。
24浏览 • 1回复 待解决
怎么基于Java实现视频播放?
1618浏览 • 1回复 待解决
基于tabs实现页面布局
217浏览 • 1回复 待解决
如何实现文本竖向排列
970浏览 • 1回复 待解决
基于原生实现高级显示效果
202浏览 • 1回复 待解决
如何实现标签随文本换行
420浏览 • 1回复 待解决
如何实现文本展开收起功能
226浏览 • 1回复 待解决
如何实现文本类型倒计时
412浏览 • 0回复 待解决
measureTextSize测量参数不清晰
401浏览 • 1回复 待解决
JS中input值文本对齐该如何实现
7031浏览 • 1回复 待解决
通过Native 调用c++层实现文本绘制
481浏览 • 1回复 待解决
如何测量获取控件高宽
356浏览 • 1回复 待解决
基于子窗口实现应用内悬浮窗
185浏览 • 1回复 待解决
如何保证振弦传感器测量精度?
2262浏览 • 0回复 待解决