HarmonyOS 如何实现文字播报染色（多行）？

Question

有什么API可以去实现文字染色吗？看了下背景渐变的，如果多行文字的话，会变成多行文字一起染色

我的需求是：文字会有多行，需要像歌词一样，按字去渐进染色，如果是多行的话，每行都会染色，不符合预期。另外播报只是播放一点音频，所以这里不涉及文字播报，只涉及染色

Answer 1

请参考示例如下：

@Entry
@Component
struct Index {
  @State
  message: string = 'Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!';
  @State
  value: number = 0;

  build() {
    Column() {
      // 使用 getLines 方法将 message 分割成多行字符串
      ForEach(this.getLines(this.message), (line: string, lineIndex: number) => {
        Row() {
          // 为每行中的每个字符生成 Text 组件
          ForEach(line.split(''), (char: string, charIndex: number) => {
            Text(char)
              .fontSize(50)
              .fontColor(this.getCharColor(lineIndex, charIndex))
              .fontWeight(FontWeight.Bold);
          })
        }
      });

      Row() {
        Button("++").onClick(() => {
          this.incrementValue();
        }).padding(10);

        Button("--").onClick(() => {
          this.decrementValue();
        }).padding(10);
      }.alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Center).padding(10);
    }.width('100%').height('100%').alignItems(HorizontalAlign.Center).justifyContent(FlexAlign.Center);
  }

  // 增加 value 并触发动画
  incrementValue() {
    animateTo({ duration: 500 }, () => {
      this.value = Math.min(this.value + 0.01, 1.5);
    });
  }

  // 减少 value 并触发动画
  decrementValue() {
    animateTo({ duration: 500 }, () => {
      this.value = Math.max(this.value - 0.01, 0.0);
    });
  }

  // 将消息分割成行的方法
  getLines(message: string): string[] {
    const charsPerLine = this.getCharsPerLine();
    const lines: string[] = [];
    for (let i = 0; i < message.length; i += charsPerLine) {
      lines.push(message.substring(i, i + charsPerLine));
    }
    return lines;
  }

  // 获取每行字符数的方法
  getCharsPerLine(): number {
    return 6; // 根据需要调整每行字符数
  }

  // 根据字符的位置计算颜色
  getCharColor(lineIndex: number, charIndex: number): Color {
    const totalIndex = lineIndex * this.getCharsPerLine() + charIndex;
    const ratio = totalIndex / this.message.length;
    if (ratio <= this.value) {
      return Color.Red; // 渐变的起始颜色（红色）
    } else {
      return Color.Black; // 渐变的结束颜色（黑色）
    }
  }
}