HarmonyOS 虚线下划线的实现方式

虚线下划线可以用canvas自定义一个组件实现，demo如下：

@Entry
@Component
struct CanvasExample {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)

  /*
  * text: 绘制的文本内容
  * x: 开始位置的x坐标
  * y: 开始位置的y坐标
  * maxWidth: 最大换行宽度
  * lineHeight: 行高
  */
  wrapText(text: string, x: number, y: number, maxWidth?: number, lineHeight?: number) {
    if (typeof maxWidth == 'undefined') {
      maxWidth = 300;
    }
    if (typeof lineHeight == 'undefined') {
      lineHeight = 20
    }
    let arrText = text.split(''); // 字符分隔为数组
    let line = '';
    for (let n = 0; n < arrText.length; n++) {
      let testLine = line + arrText[n];
      let metrics = this.context.measureText(testLine);
      let testWidth = metrics.width;
      if (testWidth > maxWidth && n > 0) {
        this.context.fillText(line, x, y);
        this.context.beginPath();
        this.context.moveTo(x, y + 10);
        this.context.lineTo(maxWidth, y + 10);
        this.context.stroke();
        this.context.closePath();
        line = arrText[n];
        y += lineHeight;
      } else {
        line = testLine;
      }
    }
    this.context.fillText(line, x, y);
    this.context.beginPath();
    this.context.moveTo(x, y + 10);
    this.context.lineTo(maxWidth, y + 10);
    this.context.stroke();
    this.context.closePath();
  }
  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context).width('100%').height('100%')
        .backgroundColor('#ffff00')
        .onReady(() => {
          this.context.lineWidth = 2 // 设置线条宽度
          this.context.strokeStyle = "red" // 设置线条颜色
          this.context.setLineDash([10, 3]) // 设置虚线间隔
          this.context.font = "45px"
          this.wrapText("我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行，我要换行我要换行", 0, 40, this.context.width, 30)
        })
    }.width('100%').height('100%')
  }
}