当前位置：首页 > news >正文

HarmonyOS 6 渐变颜色通用属性实战教程（linear/radial/sweep）

news 2026/5/11 20:15:02

文章目录

- 一、核心渐变属性
- 二、完整可运行实战代码
- 三、各渐变属性详细使用解析
- - 1. linearGradient 线性渐变
  - 2. radialGradient 径向渐变
  - 3. sweepGradient 角度渐变
- 四、渐变属性组合实战：渐变+阴影
- - 代码示例
  - 效果说明
- 五、运行效果与环境说明
- - 1. 运行效果
  - 2. 运行环境要求
- 总结

一、核心渐变属性

HarmonyOS6提供的三种渐变属性均为通用属性，可直接挂载在UI组件上使用，核心参数以对象形式配置，其中colors为必选参数，用于定义渐变色彩及过渡节点，各渐变类型的专属参数用于控制渐变方向、中心、范围等，具体如下：

渐变属性	渐变类型	核心特点	关键参数
linearGradient	线性渐变	沿指定角度做直线色彩过渡，最常用	colors：渐变色彩数组；angle：渐变角度（0°-360°）
radialGradient	径向渐变	从指定中心向外围做辐射状色彩过渡	colors：渐变色彩数组；center：渐变中心坐标；radius：渐变半径
sweepGradient	角度渐变	以指定中心为圆心，沿顺时针方向做环形色彩过渡	colors：渐变色彩数组；center：渐变中心坐标

通用参数说明：

colors：数组格式，每个元素为[颜色值, 位置值]，位置值为0.0-1.0的数字，代表该颜色在渐变过程中的占比节点；
坐标参数：以[0.5, 0.5]为例，为组件的相对坐标，x轴与y轴范围均为0.0-1.0，[0.5, 0.5]代表组件的正中心。

二、完整可运行实战代码

以下代码覆盖三种渐变类型的基础用法及渐变+阴影的组合实战效果，页面支持上下滑动，渐变效果直观可辨，无需额外图片资源。

@Entry @Component struct GradientDemo { build() { Scroll() { Column({ space: 25 }) { Text("HarmonyOS6 渐变颜色属性 完整演示") .fontSize(26) .fontWeight(FontWeight.Bold) .margin({ top: 15 }); // 1. 线性渐变 Text("1. 线性渐变 linearGradient") .fontSize(19) .alignSelf(ItemAlign.Start); Row() .width(300) .height(80) .borderRadius(12) .linearGradient({ colors: [ [Color.Red, 0.0], [Color.Yellow, 1.0] ], angle: 180 }); // 2. 多色线性渐变 Text("2. 多色线性渐变") .fontSize(19) .alignSelf(ItemAlign.Start); Row() .width(300) .height(80) .borderRadius(12) .linearGradient({ colors: [ [Color.Blue, 0.0], [Color.Green, 0.5], [Color.Pink, 1.0] ], angle: 45 }); // 3. 径向渐变（官方标准正确写法） Text("3. 径向渐变 radialGradient") .fontSize(19) .alignSelf(ItemAlign.Start); Row() .width(300) .height(120) .borderRadius(12) .radialGradient({ colors: [ [Color.White, 0.0], [Color.Black, 1.0] ], center: [0.5, 0.5], radius: 150.0 }); // 4. 角度渐变（官方标准正确写法） Text("4. 角度渐变 sweepGradient") .fontSize(19) .alignSelf(ItemAlign.Start); Row() .width(180) .height(180) .borderRadius(90) .sweepGradient({ colors: [ [Color.Red, 0.0], [Color.Yellow, 0.33], [Color.Blue, 0.66], [Color.Green, 1.0] ], center: [0.5, 0.5] }); // 5. 组合效果：渐变 + 阴影 Text("5. 组合效果：渐变 + 阴影") .fontSize(19) .alignSelf(ItemAlign.Start); Row() .width(300) .height(80) .borderRadius(20) .linearGradient({ colors: [ [Color.Blue, 0.0], [Color.Green, 1.0] ], angle: 0 }) .shadow({ radius: 20, color: "#50000000", offsetX: 5, offsetY: 5 }) .margin({ bottom: 50 }); } .width('100%') .padding(15); } .backgroundColor('#f8f8f8'); } }

运行效果如图：

三、各渐变属性详细使用解析

1. linearGradient 线性渐变

线性渐变是开发中最常用的渐变方式，沿指定角度实现直线方向的色彩过渡，核心参数为colors和angle。

代码示例：基础双色线性渐变，沿180°方向实现红到黄的过渡
```
linearGradient({ colors: [[Color.Red, 0.0], [Color.Yellow, 1.0]], angle: 180 })
```
参数说明：
- angle: 180：渐变角度为180°，代表从组件顶部向底部做垂直渐变；0°为从左到右水平渐变，45°为从左下到右上斜向渐变，角度值范围0°-360°；
- 多色渐变：如示例中45°斜向渐变，配置[Color.Blue, 0.0]、[Color.Green, 0.5]、[Color.Pink, 1.0]，代表0%位置为蓝色，50%位置为绿色，100%位置为粉色，实现三色自然过渡。

2. radialGradient 径向渐变

径向渐变实现从中心向外围的辐射状色彩过渡，核心参数为colors、center、radius，需严格遵循官方数组格式配置center，数值型配置radius。

代码示例：以组件中心为原点，实现白到黑的径向渐变

radialGradient({ colors: [[Color.White, 0.0], [Color.Black, 1.0]], center: [0.5, 0.5], radius: 150.0 })

参数说明：
- center: [0.5, 0.5]：渐变中心为组件正中心，若需调整可修改数值，如[0.2, 0.3]代表组件左上方位置；
- radius: 150.0：渐变半径为150px，需根据组件实际尺寸配置，保证渐变效果覆盖目标区域。

3. sweepGradient 角度渐变

角度渐变也叫环形渐变，以指定中心为圆心，沿顺时针方向做360°环形色彩过渡，常配合圆形组件（borderRadius设为宽高一半）实现彩虹环、颜色表盘等效果，核心参数为colors和center。

代码示例：圆形组件上实现红、黄、蓝、绿的环形角度渐变

sweepGradient({ colors: [[Color.Red, 0.0], [Color.Yellow, 0.33], [Color.Blue, 0.66], [Color.Green, 1.0]], center: [0.5, 0.5] })

参数说明：
- 位置值均分：示例中4种颜色对应0.0、0.33、0.66、1.0，实现环形方向上的色彩均匀过渡；
- 圆形适配：将Row组件宽高设为180px，borderRadius设为90px，形成正圆，让角度渐变效果更贴合环形视觉。

四、渐变属性组合实战：渐变+阴影

HarmonyOS的通用属性支持自由组合，将渐变属性与shadow阴影属性结合，可实现具有立体层次感的UI组件（如渐变按钮、渐变卡片），是实际开发中的高频用法。

代码示例

linearGradient({ colors: [[Color.Blue, 0.0], [Color.Green, 1.0]], angle: 0 }) .shadow({ radius: 20, color: "#50000000", offsetX: 5, offsetY: 5 })

效果说明

线性渐变：angle: 0实现从左到右的蓝到绿水平渐变，配合borderRadius: 20打造圆角按钮基础样式；
阴影效果：radius: 20设置阴影模糊半径，color: "#50000000"设置半透明黑色阴影，offsetX: 5和offsetY: 5让阴影向组件右下方偏移，模拟立体光影效果。