HarmonyOS 全文省略展开收起demo （API12+）

import { inspector } from '@kit.ArkUI';

@Entry
@Component
struct RenderTest {
  @State text: string = 'Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!'
  @State isEllipsis: boolean = false
  controller: TextController = new TextController()
  maxLine: number = 2
  ellipsisText: string = '...展开'
  textWidth: number = 200

  aboutToAppear(): void {
    const context = this.getUIContext()
    let listener: inspector.ComponentObserver = context.getUIInspector().createComponentObserver('TEXT_DEMO')
    listener.on('layout', () => {
      const manager = this.controller.getLayoutManager()
      const line = manager.getLineCount()
      console.log(`ccc ${line} `)
      if (line <= this.maxLine) {
        return;
      }
      const lastLine = manager.getLineMetrics(this.maxLine - 1)
      const eWidth = context.getMeasureUtils().measureText({ textContent: this.ellipsisText })

      const parentWidth = context.vp2px(this.textWidth)
      let lastIndex = lastLine.endIndex
      for (let i = lastLine.endIndex; i > lastLine.startIndex; i--) {
        const textBox = manager.getRectsForRange({ start: lastLine.startIndex, end: i }, 0, 0)
        let info = textBox[0]
        let width = info.rect.right - info.rect.left
        if (eWidth + width <= parentWidth) {
          lastIndex = i
          break;
        }
      }

      this.text = this.text.slice(0, lastIndex)
      this.isEllipsis = true
    })
  }

  build() {
    Column() {
      Column() {
        Text(undefined, { controller: this.controller }) {
          Span(this.text)
          if (this.isEllipsis) {
            Span(this.ellipsisText)
          }
        }
        .id('TEXT_DEMO')

      }.width(this.textWidth)
      .height(200)
      .backgroundColor(Color.Pink)
    }.width('100%')
    .height('100%')
  }
}