HarmonyOS鸿蒙Next中RichEditor实现类似歌词滚动，当前歌词高亮的效果

可以尝试这个demo

在定时器执行过程中进行计算当前所在行数

Bean.ets:

import measure from '@ohos.measure';
import { display } from '@kit.ArkUI';

export class Bean {
  static readonly textArray: Array<TextBean> = [];

  static init() {
    let widthComp = px2vp(display.getDefaultDisplaySync().width); // 组件的宽度，范例是全屏
    console.log('lcs --- widthComp', widthComp)
    for (let i = 0; i < 100; i++) {
      let text = `我是第 ${i} 句话,`;
      Bean.textArray.push({
        label: text,
        startTime: 1000 * i,
        endTime: 1000 * i + 1000,
        width: -1,
        line: -1 // 默认是 -1标识不折行，其他值标识折行在几行
      })
    }
    console.log('lcs ---', JSON.stringify(Bean.textArray));
  }
}

export interface TextBean {
  label: string;
  startTime: number;
  endTime: number;
  width: number;
  line?: number;
}

export function calcWidth(text: string): number {
  let textWidth: number = measure.measureText({
    textContent: text,
    fontSize: 16
  });
  return px2vp(textWidth);
}

export function find(arr: Array<TextBean>, target: number, left: number, right: number): number {
  if (left > right) {
    return -1;
  }
  let mid:number = Math.floor((left + right) / 2);
  if (target >= arr[mid].startTime && target < arr[mid].endTime) {
    return arr[mid].line ?? 0;
  } else if(arr[mid].startTime > target){
    return find(arr, target, left, mid - 1);
  }else{
    return find(arr, target, mid + 1, right);
  }
}

Index.ets:

import { Bean, calcWidth, find, TextBean } from './Bean';
import { Player } from './Player';
import { display, LengthMetrics } from '@kit.ArkUI';

@Entry
@Component
struct main {
  scroller: Scroller = new Scroller();
  duration: number = 99000;
  @State currentTime: number = 0;
  player?: Player
  textHeight: number = 16; // 文字高度
  columHeight: number = 0;
  lines: number = 0;
  widthComp: number = 0;
  // controller: TextController = new TextController();
  @Watch('lineChanged') @State centerLine: number = 0;
  controller: RichEditorController = new RichEditorController();
  private start: number = 0;
  private end: number = 5;
  @State currentTabIndex: number = 0

  aboutToAppear(): void {
    Bean.init(); // 初始化数据
    this.widthComp = px2vp(display.getDefaultDisplaySync().width);
  }

  onPageShow(): void {
    this.start = 0
    this.end = 0
    let w: number = calcWidth(Bean.textArray[0].label)
    let line = 1

    this.player = new Player((time: number) => {
      this.currentTime = time;
      if ((Bean.textArray[this.currentTabIndex]) &&
        this.currentTime >= Bean.textArray[this.currentTabIndex].startTime &&
        this.currentTime < Bean.textArray[this.currentTabIndex].endTime) {
        this.controller.updateSpanStyle({
          start: this.start,
          end: this.end,
          textStyle:
          {
            fontColor: Color.Black
          }
        })
        this.start = this.end
        this.end += Bean.textArray[this.currentTabIndex].label.length
        let width: number = 0
        this.controller.updateSpanStyle({
          start: this.start,
          end: this.end,
          textStyle:
          {
            fontColor: Color.Blue
          }
        })
        this.controller.getSpans({
          start: this.start,
          end: this.end
        }).forEach(item => {
          console.info("text span: " + (item as RichEditorTextSpanResult).value)
          width = calcWidth((item as RichEditorTextSpanResult).value)
        })
        this.currentTabIndex += 1
        w = w + width
        if (w > this.widthComp) {
          w = w - this.widthComp; // 多出的部分设为初始值
          line += 1;
        }
      }
      if (line >= Math.floor(this.lines / 2)) {
        // 大于一半就开始滚动
        this.centerLine = line;
      }
    })
    this.player.setTimer();
  }

  lineChanged() {
    this.scroller.scrollBy(0, (this.textHeight + 5)); // 滚动行高 + 间距lineSpacing
  }

  build() {
    Column() {
      Row() {
        Text('文字高亮实例')
          .fontColor(Color.White)
          .fontSize(16)
      }
      .height(44)
      .width('100%')
      .backgroundColor(Color.Green)
      .padding({
        left: 16
      })

      Scroll(this.scroller) {
        Stack() {
          Column() {
            RichEditor({ controller: this.controller })
              .onReady(() => {
                for (let i = 0; i <= Bean.textArray.length; i++) {
                  this.controller.addTextSpan(Bean.textArray[i]?.label || '', {
                    style: {
                      fontSize: 16
                    }
                  })
                }
              })
              .hitTestBehavior(HitTestMode.None)
              .onAreaChange(() => {
                let layoutManager = this.controller.getLayoutManager();
                let lineCount = "layoutManager LineCount: " + layoutManager.getLineCount()
                this.lines = layoutManager.getLineCount()
              })
              .padding(0)
              .width('100%')
          }
          .width('100%')
          .justifyContent(FlexAlign.Start)
        }
      }
      .scrollBar(BarState.Off)
      .height('50%')
      .backgroundColor(Color.White)
      .onAreaChange((oldValue: Area, newValue: Area) => {
        this.columHeight = Number(newValue.height);
        this.lines = this.columHeight / (this.textHeight + 5);
        console.log('lcs --- lines', this.lines);
      })

      Row() {
        Text('查看原文')
        Text('复制金句')
        Text('智能字幕')
      }
      .height(50)
      .backgroundColor(Color.Green)
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)

      Slider({
        direction: Axis.Horizontal,
        value: this.currentTime,
        min: 0,
        max: this.duration,
        style: SliderStyle.OutSet
      })
        .blockColor(Color.White)
        .trackColor(Color.Gray)
        .selectedColor(Color.White)
        .showTips(false)
        .trackThickness(2)
        .blockSize({
          width: 14,
          height: 14
        })
        .onChange((value: number, mode: SliderChangeMode) => {
          this.currentTime = value;
          if (mode == SliderChangeMode.Begin || mode === SliderChangeMode.Moving) {

          }
          if (mode == SliderChangeMode.End) {
            this.currentTime = value;
          }
        })
    }
  }
}