HarmonyOS 鸿蒙Next文字渐变色组件

HarmonyOS 鸿蒙Next文字渐变色组件

@Component
export struct LinearGradientText {
  @Prop text:string=''
  @Prop fontSize:string|number=''
  @Prop rowWidth:Length = ''
  @Prop family:string = 'PingFangSC, PingFang SC'
  @Prop fontWeight:number=0
  build() {
    Row() {
      Text(this.text)
        .fontWeight(this.fontWeight)
        .fontSize(this.fontSize)
        .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
        .textAlign(TextAlign.Center)
        .width(this.rowWidth)
        .maxLines(2)
        .textOverflow({overflow:TextOverflow.Ellipsis})
    }
    .justifyContent(FlexAlign.Center)
    .linearGradient({
      direction: GradientDirection.Right,
      colors: [["#2CD3D7", 0.0], ["#2ACF6F", 1]]
    })
    .width(this.rowWidth)
    .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
  }
}

更多关于HarmonyOS 鸿蒙Next文字渐变色组件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next的渐变色组件通过LinearGradient实现。在Text组件中使用foregroundStyle属性设置线性渐变，定义起始/结束颜色和方向。示例代码：

Text('渐变文字')
  .foregroundStyle(
    LinearGradient({
      angle: 90,
      colors: [Color.Red, Color.Blue]
    })
  )

支持设置角度、颜色数组和位置参数控制渐变效果。

更多关于HarmonyOS 鸿蒙Next文字渐变色组件的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中，实现文字渐变色效果，你提供的组件代码思路是正确的，核心是使用blendMode进行图层混合。不过，代码中存在一个关键问题：Row容器应用了linearGradient，但Text组件本身没有设置高度，这可能导致渐变区域无法正确覆盖文本，或者文本裁剪异常。

一个更稳定、推荐的做法是使用**Text组件的foregroundBlendStyle方法**，这是为文字直接应用前景混合样式（包括渐变）的官方推荐方式。以下是优化后的组件示例：

@Component
export struct LinearGradientText {
  @Prop text: string = ''
  @Prop fontSize: number | string = 16
  @Prop rowWidth: Length = '100%'
  @Prop family: string = 'HarmonyOS Sans'
  @Prop fontWeight: number | FontWeight = FontWeight.Normal
  // 新增：渐变色参数，提高组件复用性
  @Prop colors: Array<[ResourceColor, number]> = [["#2CD3D7", 0.0], ["#2ACF6F", 1.0]]
  @Prop direction: GradientDirection = GradientDirection.Right

  build() {
    Text(this.text)
      .fontSize(this.fontSize)
      .fontWeight(this.fontWeight)
      .fontFamily(this.family)
      .textAlign(TextAlign.Center)
      .width(this.rowWidth)
      .maxLines(2)
      .textOverflow({ overflow: TextOverflow.Ellipsis })
      // 核心：使用foregroundBlendStyle为文字本身应用线性渐变
      .foregroundBlendStyle(
        BlendStyle.LINEAR_GRADIENT, // 指定混合样式为线性渐变
        {
          direction: this.direction,
          colors: this.colors
        }
      )
  }
}

核心改进与说明：

  1. 使用 foregroundBlendStyle：这是ArkUI为文本、图形等元素直接设置前景混合样式的API。第一个参数传入BlendStyle.LINEAR_GRADIENT枚举值，第二个参数传入渐变配置对象。这比通过容器背景渐变再使用blendMode合成更直接、性能更好，且避免了图层尺寸匹配问题。
  2. 移除 Row 与 blendMode：不再需要额外的Row容器和复杂的blendMode设置，代码更简洁，渲染层级更浅。
  3. 增强可配置性：将渐变颜色colors和方向direction作为@Prop参数暴露，方便父组件动态定制渐变色。
  4. 字体建议：默认字体调整为HarmonyOS Sans，这是HarmonyOS的系统字体，兼容性更有保障。

使用示例：

// 在父组件中直接使用
LinearGradientText({
  text: 'HarmonyOS Next',
  fontSize: 30,
  rowWidth: '80%',
  colors: [["#FF6B8B", 0.0], ["#FFE259", 1.0]], // 可自定义渐变颜色
  direction: GradientDirection.Bottom // 可改变渐变方向
})

这种方法直接利用了ArkUI的文本样式混合能力，是HarmonyOS Next上实现文字渐变色的标准且高效的方式。

回到顶部