HarmonyOS Text换行后如何获取每行的文案

Text中的文案换行后,如何获取每行的文案,或者首行/末尾行的文案,及行数。

我看measureText只能获取宽高。

HarmonyOS
2024-09-24 10:48:24
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

目前暂无直接获取每行的方法,提供一个demo,可以实现获取每行文案以及行数的功能。

import measure from '@ohos.measure'  
  
@Entry  
@Component  
struct Page49 {  
  // 预设的默认行高,初始未定义  
  private INITIAL_LINE_HEIGHT: number = -1;  
  // 状态管理:存储用户输入的文本内容  
  @State private textContent: string = '';  
  // 状态管理:根据计算显示的行数  
  @State private displayedLines: number = 0;  
  
  @State private textWidth: string = '0';  
  @State private textHeight: string = '0';  
  @State lineIndexArr: number[] = [0];  
  @State lineContentArr: string[] = [''];  
  @State sliceContent: string = '';  
  
  build() {  
    Column() {  
      // 按钮以添加字符到文本  
      Button('添加文字').onClick(() => {  
        this.textContent += '测'+ parseInt(String(Math.random()*1000))+'试'; // 添加一个“测试”至文本内容  
      })  
      // 按钮以删除最后一个字符  
      Button('删除文字').onClick(() => {  
        if (this.textContent.length > 0) { // 确保文本非空才执行删除  
          this.textContent = this.textContent.slice(0, -1); // 删除最后一个字符  
        }  
      })  
      Button('获取每行文本内容').onClick(()=>{  
        this.lineIndexArr = [0];  
        this.lineContentArr = [''];  
        this.sliceContent = '';  
        const count = this.textContent.length;  
        const textSize = measure.measureTextSize({  
          textContent: this.textContent,  
        })  
        const textContentWidth = measure.measureText({  
          textContent: this.textContent,  
        })  
        this.sliceContent = this.sliceContent || this.textContent;  
        for (let iLine=0;iLine<this.displayedLines;iLine++){  
          this.sliceContent = this.sliceContent.slice(this.lineIndexArr[iLine]);  
          const content = this.sliceContent;  
          console.log(content,'content')  
          const currentContentWidth = measure.measureText({  
            textContent: content  
          });  
          if(px2vp(currentContentWidth) < Number(this.textWidth)){  
            this.lineContentArr.push(content);  
            this.lineIndexArr.push(1);  
            break;  
          }  
          content.split('').forEach((v: string,i:number) => {  
            const widthPre = measure.measureText({  
              textContent: content.slice(0,i),  
            })  
            const widthAft = measure.measureText({  
              textContent: content.slice(0,i+1),  
            })  
  
            if(Number(this.textWidth) > px2vp(widthPre) && Number(this.textWidth) < px2vp(widthAft)){  
              const currentContent = content.slice(0,i)  
              // this.firstLineContent = currentContent;  
              this.lineContentArr.push(currentContent);  
              this.lineIndexArr.push(i);  
            }  
          })  
          console.log('this.lineContentArr',this.lineContentArr.toString())  
          console.log('this.lineIndexArr',this.lineIndexArr.toString())  
        }  
  
      })  
      // 显示当前文本行数的提示信息  
      Text(`当前行数: ${this.displayedLines}`)  
      Text(`文本宽度: ${this.textWidth}`);  
      Text(`文本高度: ${this.textHeight}`);  
      // 可变高度的文本显示区域,响应式更新行数  
      Text(this.textContent)  
        .width('50%')// 设置文本宽度为50%  
        .onAreaChange((previousArea: Area, currentArea: Area) => {  
          // 初始化行高,仅在首次获取到有效高度时设置  
          if (this.INITIAL_LINE_HEIGHT == -1 && this.INITIAL_LINE_HEIGHT === this.INITIAL_LINE_HEIGHT && currentArea.height > 0) {  
            this.INITIAL_LINE_HEIGHT = currentArea.height as number;  
          }  
          // 计算并更新显示的行数  
          console.log('Previous Height:', previousArea.height);  
          console.log('Current Height:', currentArea.height);  
          console.log('this.INITIAL_LINE_HEIGHT:', this.INITIAL_LINE_HEIGHT);  
          this.displayedLines = Math.ceil(currentArea.height as number / this.INITIAL_LINE_HEIGHT);  
          this.textWidth = currentArea.width as string;  
        })  
      ForEach(this.lineContentArr,(item: string,index: number)=>{  
        Text(`第${index}行文本内容:${item}`).fontColor(Color.Green)  
      })  
    }  
    .width('100%')  
  }  
}
分享
微博
QQ
微信
回复
2024-09-24 15:41:20
相关问题
Text换行无法在后面添加图片
790浏览 • 1回复 待解决
HarmonyOS TextInput 换行问题
712浏览 • 1回复 待解决
HarmonyOS Text获取文本显示行数
53浏览 • 1回复 待解决
粘贴文本,IDE把内容自动换行
260浏览 • 1回复 待解决
如何获取Text组件中文字宽度
2155浏览 • 1回复 待解决
获取文本Text组件宽度
504浏览 • 1回复 待解决
text内容如何实时获取并添加修改?
3409浏览 • 1回复 待解决
如何把图片和文案结合,保存到相册
237浏览 • 0回复 待解决