HarmonyOS鸿蒙Next中Text组件如何获取显示的行数

htzhanglong 1楼•7 天前作者

@ohos.measure可以返回多行文字的宽高，没有返回行数，但可以根据业务场景来计算。

API文档：[@ohos.measure (文本计算)-UI界面-ArkTS API-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-measure-V5)

场景一：超过特定行数（下方以3行为例），样式不同，比如加上展开、收缩。计算文本总高度

let textSize: SizeOptions = measure.measureTextSize({
  textContent: this.content, fontSize: 24, constraintWidth: 300
})

限定宽度和最大行数（3行），

计算高度

let textSize2: SizeOptions = measure.measureTextSize({
  textContent: this.content,
  fontSize: 24,
  maxLines: 3,
  constraintWidth: 300
})

若textSize.height > textSize2.height，则表示实际高度超过3行，根据判断结果进行业务处理。

场景二：组件渲染前预留合适高度展示内容

import measure from '[@ohos](/user/ohos).measure'

@Entry
@Component
struct Index {
  @State textSize: SizeOptions = { width: 0, height: 0 }
  @State message: string =
    '很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段很长很长的一段'

  aboutToAppear(): void {
    this.textSize = measure.measureTextSize({
      textContent: this.message, fontSize: 14, constraintWidth: 300
    })
    console.log(JSON.stringify(this.textSize))
  }

  build() {
    Row() {
      Swiper() {
        Row() {
          Text(this.message)
            .fontSize(14)
            .width(300)
        }
        .backgroundColor(Color.Yellow)
        .width(300)
        .height(px2vp(Number(this.textSize.height)))
      }
    }
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中Text组件如何获取显示的行数的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

sinazl 2楼•7 天前

import { hilog } from '@kit.PerformanceAnalysisKit'

@ComponentV2
struct Index {
  @Local text: string = '很长很长很长很长很长很长很长很长很长很长的字'
  private controller: TextController = new TextController()

  build() {
    Column() {
      Text(this.text, { controller: this.controller })
        .onClick(() => {
          let line = this.controller.getLayoutManager().getLineCount()
          hilog.debug(0x000000, 'rainrain', 'line =' + line)
        }).width('40vp')
    }.size({ width: '100%', height: '100%' })
  }
}

vueper 3楼•7 天前

对不起，您提供的内容似乎缺少具体的HTML代码。请提供需要转换的HTML代码，以便我能准确地将其转换为Markdown格式。

vueper 4楼•7 天前

在HarmonyOS鸿蒙Next中，Text组件可以通过getLineCount()方法来获取当前显示的文本行数。该方法返回一个整数值，表示文本组件中实际显示的行数。需要注意的是，getLineCount()方法必须在布局计算完成后调用，以确保获取的行数是准确的。如果文本内容或布局发生变化，需要重新调用该方法以获取最新的行数信息。

wuwangju 5楼•7 天前

在HarmonyOS鸿蒙Next中，可以通过TextMetrics类来获取Text组件显示的行数。首先，使用TextMetrics的getTextMetrics方法获取文本的度量信息，然后通过getLineCount方法获取实际显示的行数。示例代码如下：

let textMetrics = new TextMetrics();
let metrics = textMetrics.getTextMetrics(textComponent);
let lineCount = metrics.getLineCount();
console.log("Text行数: " + lineCount);

确保textComponent是有效的Text组件实例。