Text组件多行文本的时候,怎么实现隐藏前面几行显示后面几行 HarmonyOS 鸿蒙Next

Text组件多行文本的时候,怎么实现隐藏前面几行显示后面几行 HarmonyOS 鸿蒙Next 需要显示多行文本,并且在文本长度超出的时候,显示最后10行。但是现在用text的
textOverflow的时候,使用ellipsisMode也只能显示前面的行数而隐藏后面的行,设置start的时候只有单行的时候才生效

2 回复

// 可以使用@ohos.measure 计算文本宽高,当文本超出一定程度可以选择截取需要显示的字符串,具体参考: https://developer.huawei.com/consumer/cn/doc/architecture-guides/develop-arkui-89-0000002124314916

import measure from '[@ohos](/user/ohos).measure';
import { display } from '@kit.ArkUI';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State rawTitle: string =
    "1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。"
    +"1月16日,国务院新闻办公室举行新闻发布会,介绍2024年春运形势及工作安排。从2月9日(除夕)00:00到2月17日(正月初八)24:00,免费9天。"
    +"返回目标元素变化之前的宽高以及目标元素相对父元素和页面左上角的坐标位置。"
    +"设置文本段落在水平方向的对齐方式"
    +"可通过align属性控制文本段落在垂直方向上的位置,此组件中不可通过align属性控制文本段落在水平方向上的位置,即align属性中,设置文本的字体粗细,设置过大可能会在不同字体下有截断。此组件中不可通过align属性控制文本段落在水平方向上的位置"
    +"与BREAK_ALL相同,对于Non-CJK的文本可在任意2个字符间断行,一行文本中有断行破发点(如空白符)时,优先按破发点换行,保障单词优先完整显示。若整一行文本均无断行破发点时,则在任意2个字符间断行。对于CJK与NORMAL效果一致。"

  build() {
    Column() {
      TextMeasure({ rawTitle: this.rawTitle, maxLines: 10 })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct TextMeasure {
  //显示文本
  @Link rawTitle: string;
  // 最大显示行数
  @Prop maxLines: number;
  @State isExpanded: boolean = false;
  // 屏幕宽度(单位px)
  screenWidth: number = 0;
  //目标索引
  endIndex: number = 0;
  // 测量文本宽度(单位px)
  @State textwidth: number = measure.measureText({
    textContent: this.rawTitle,
    fontSize: 20
  })
  // 获取当前所有的display对象
  promise: Promise<Array<display.Display>> = display.getAllDisplays()

  aboutToAppear(): void {
    console.log(`文本宽度为:${this.textwidth}`)
    this.promise.then((data: Array<display.Display>) => {
      console.log(`所有的屏幕信息:${JSON.stringify(data)}`);
      this.screenWidth = data[0]["width"]
      // 屏幕宽度 * 最大行数 * 组件宽度比例 和 文字测量宽度
      this.isExpanded = this.screenWidth * this.maxLines * 1 <= this.textwidth;
      let sliText: string = '';
      let temTextWidth: number = 0;
      if (this.isExpanded) {
        console.info('进入循环')
        for (let i = this.rawTitle.length - 1; i > this.endIndex; i--) {
          console.log(`i:${i}`)
          sliText = this.rawTitle.slice(i);
          temTextWidth = measure.measureText({
            textContent: sliText,
            fontSize: 20
          })
          //截取的字符串长度超出组件宽度,返回索引
          if (this.screenWidth * this.maxLines * 1 <= temTextWidth) {
            this.endIndex = i;
            //截取的字符串长度不一定正好等于组件显示的长度,最后几个字符不能显示出来,所以增大索引以展示完整的文本
            sliText = this.rawTitle.slice(i+5);
            console.log(`sliText:${sliText}`)
            //存储原文本
            let tem: string = this.rawTitle;

            this.rawTitle = '...' + sliText;
          }

        }
      }
    })
  }

  build() {
    Text(this.rawTitle)
      .fontSize(20)
      .fontColor(Color.Black)
      .maxLines(this.maxLines)
      .wordBreak(WordBreak.BREAK_ALL)
      .width('100%')

  }
}

更多关于Text组件多行文本的时候,怎么实现隐藏前面几行显示后面几行 HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS中,要实现Text组件多行文本时隐藏前面几行并显示后面几行,可以使用Text组件的maxLinestextOverflow属性结合clipellipsis来实现。具体步骤如下:

  1. 设置maxLines属性:通过maxLines属性限制文本显示的行数。例如,如果你想显示后3行,可以将maxLines设置为3。

  2. 使用textOverflow属性:将textOverflow设置为clipellipsis,以控制超出部分的文本显示方式。clip会直接裁剪超出部分,而ellipsis会在末尾显示省略号。

  3. 调整文本内容:如果需要隐藏前面几行,可以通过字符串处理截取文本的后几行内容。

示例代码如下:

Text('这里是多行文本内容,前面几行将被隐藏,只显示后面几行。')
  .maxLines(3)
  .textOverflow({ overflow: TextOverflow.Ellipsis })

注意:Text组件本身不支持直接隐藏前面几行,需要通过手动处理文本内容来实现。如果需要更复杂的文本布局和显示控制,可以使用RichText组件或自定义布局组件。

回到顶部