输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心
全部文档版本说明工具设计指南与API参考开发与测试上架分发与运营问题处理与运维最佳实践行业解决方案
问题处理与运维
您当前正在浏览新版开发者文档中心，目录分类和层级有所调整。点击左侧当前文档分类名称前的“☰”图标，可切换文档分类。 了解新版目录
问题处理与运维开发与测试问题应用框架开发UI框架组件使用如何实现文本颜色渐变

如何实现文本颜色渐变

更新时间: 2026-06-26 07:47
复制页面
本文导读

问题现象

如何实现文本颜色从句首到句尾的渐变，且不被换行打断？

背景知识

  • linearGradient：HarmonyOS提供的一种通用属性，它用于实现组件的颜色线性渐变效果。
  • blendMode：一种与图像效果有关的属性，它常用于将当前控件的内容（包含子节点内容）与下方画布（可能为离屏画布）已有内容进行混合。
  • shaderStyle：显示为径向渐变RadialGradientStyle或线性渐变LinearGradientStyle或纯色ColorShaderStyle的效果，shaderStyle的优先级高于fontColor和AI识别，纯色建议使用fontColor。
  • LinearGradientStyle：显示为线性渐变。

解决方案

实现文本颜色渐变的方式及其适用场景内容如下：

展开

实现场景

实现方式

适用场景

文本渐变

linearGradient+blendMode裁切背景。

API20前。

文本渐变

shaderStyle设置线性渐变参数。

更简洁，仅支持API20+。

文本渐变流光效果

linearGradient+blendMode裁切背景+流光动画。

需流光效果的场景。
  • 方案一：通过linearGradient结合blendMode裁切背景，实现文本渐变。
    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct Index {
    4.   message: string = 'Hello World';
    5. 

    6.   build() {
    7.     Row() {
    8.       Column() {
    9.         Row() {
    10.           Text(this.message)
    11.             .fontSize(50)
    12.             .fontWeight(FontWeight.Bold)
    13.             .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
    14.         }
    15.         .linearGradient({
    16.           direction: GradientDirection.Right,
    17.           colors: [['#FFF563FF', 0.0], ['#FF0253EB', 0.2], ['#FF0253EB', 0.5], ['#FF26ECFF', 0.9]]
    18.         })
    19.         .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
    20.       }
    21.       .width('100%')
    22.     }
    23.     .height('100%')
    24.   }
    25. }

    运行效果：

  • 方案二：使用shaderStyle，通过Text组件的shaderStyle属性直接设置线性渐变参数。（仅支持API20+）
    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct ExampleTwo {
    4.   build() {
    5.     Column() {
    6.       Text('HarmonyOS')
    7.         .fontSize(30)
    8.         .shaderStyle({
    9.           direction: GradientDirection.Right,
    10.           colors: [['#FF0253EB', 0.0], ['#00ff00', 0.5], ['#0000ff', 1.0]]
    11.         })
    12.     }
    13.     .width('100%')
    14.     .height('100%')
    15.     .justifyContent(FlexAlign.Center)
    16.   }
    17. }

    运行效果：

  • 方案三：拓展功能实现。为背景渐变色添加动画，实现动态流光效果。
    收起
    自动换行
    深色代码主题
    复制
    1. @Entry
    2. @Component
    3. struct ExampleThree {
    4.   message: string = 'Hello World';
    5.   @State gradientPosition: number = 0;
    6.   COLOR_START: string = '#FF26ECFF';
    7.   COLOR_END: string = '#FF0253EB';
    8. 

    9.   build() {
    10.     Row() {
    11.       Column() {
    12.         Row() {
    13.           Text(this.message)
    14.             .fontSize(50)
    15.             .fontWeight(FontWeight.Bold)
    16.             .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
    17.         }
    18.         .linearGradient({
    19.           direction: GradientDirection.Right,
    20.           colors: [[this.COLOR_START, 0], [this.COLOR_END, this.gradientPosition], [this.COLOR_START, 1]]
    21.         })
    22.         .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
    23.       }
    24.       .width('100%')
    25.       .height('100%')
    26.       .justifyContent(FlexAlign.Center)
    27.     }
    28.     .onAppear(() => {
    29.       this.animateStart();
    30.     })
    31.   }
    32. 

    33.   private animateStart() {
    34.     this.getUIContext().animateTo({
    35.       duration: 2000,
    36.       curve: Curve.Linear,
    37.       iterations: 1,
    38.       onFinish: () => {
    39.         this.gradientPosition = 0;
    40.         const COLOR_START = this.COLOR_START;
    41.         const COLOR_END = this.COLOR_END;
    42.         this.COLOR_START = COLOR_END;
    43.         this.COLOR_END = COLOR_START;
    44.         this.animateStart();
    45.       }
    46.     },
    47.       () => {
    48.         // 启动动画：修改gradientPosition触发渐变移动
    49.         this.gradientPosition = 1;
    50.       });
    51.   }
    52. }

    运行效果：

常见FAQ

Q：如何使用linearGradient实现颜色在透明度上的渐变效果？

A：使用rgba格式的颜色来设置透明渐变的效果。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct FAQ_1 {
  4.   build() {
  5.     Column() {
  6.     }
  7.     .height('10%')
  8.     .width('100%')
  9.     .linearGradient(
  10.       {
  11.         angle: 180,
  12.         colors: [['rgba(128,128,128,0.5)', 0.1], ['rgba(128,128,128,0.3)', 0.6], ['rgba(128,128,128,0.0)', 1]]
  13.       })
  14.   }
  15. }

Q：设置linearGradient后，再设置backgroundColor，为何无效？

A：颜色渐变属于组件内容，绘制在背景上方，背景颜色是被覆盖了。设置了linearGradient渐变色，需要修改背景色为纯色，可以设置linearGradient的options的值为undefined，恢复为无线性渐变的效果。

收起
自动换行
深色代码主题
复制
  1. import { FrameNode, NodeController } from '@kit.ArkUI';
  2. 

  3. class MyNodeController extends NodeController {
  4.   makeNode(uiContext: UIContext): FrameNode | null {
  5.     let box = new FrameNode(uiContext);
  6.     box.commonAttribute.width(100).height(100).backgroundColor('#d1d3d5');
  7.     let isBackgroundColor = false;
  8.     box.commonAttribute.onClick(() => {
  9.       isBackgroundColor = !isBackgroundColor;
  10.       if (isBackgroundColor) {
  11.         box.commonAttribute.backgroundColor('#d1d3d5');
  12.         box.commonAttribute.linearGradient(undefined);
  13.       } else {
  14.         box.commonAttribute.linearGradient({ angle: 90, colors: [['#FF0253EB', 0], ['#FF26ECFF', 1]] });
  15.       }
  16.     });
  17.     return box;
  18.   }
  19. }
  20. 

  21. @Entry
  22. @Component
  23. struct FrameNodeTypeTest {
  24.   private myNodeController: MyNodeController = new MyNodeController();
  25. 

  26.   build() {
  27.     Row() {
  28.       NodeContainer(this.myNodeController);
  29.     }
  30.   }
  31. }
实现HSL颜色模型与HEX颜色模型互相转换
PersistenceV2如何实现数据持久化存储和修改
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明