HarmonyOS 如何实现文字渐变色效果？

Question

如何实现文字渐变色效果

Answer 1

使用linearGradient与blendMode结合可以实现该效果；

参考demo：

@Entry
@Component
struct GradientTest {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column() {
        Row() {
          Text(this.message)
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        }
        .linearGradient({
          direction: GradientDirection.Right,
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
        })
        .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
      }
      .width('100%')
    }
    .height('100%')
  }
}