鸿蒙UI开发——渐变色效果

1、概 述

ArkTs可以通过颜色渐变接口，设置组件的背景颜色渐变效果，实现在两个或多个指定的颜色之间进行平稳的过渡。

目前提供三种渐变类型：线性渐变、角度渐变、径向渐变。

我们在鸿蒙UI布局实战 —— 个人中心页面开发中，默认头像部分，使用到了线性渐变，效果如下：

在项目中合理的使用渐变色，有助于让我们的APP更加灵动，下面对三种渐变效果做讨论。

2、接口定义

三种渐变方式对应的接口如下：

• 线性渐变

linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array<[ResourceColor, number]>; repeating?: boolean;})

参数说明如下：

• • angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。默认值：180，角度为字符串时仅支持类型deg，grad，rad，trun。

  • direction: 线性渐变的方向，设置angle后不生效。默认值：GradientDirection.Bottom

  • colors: 指定某百分比位置处的渐变色颜色,设置非法颜色直接跳过。

  • repeating: 为渐变的颜色重复着色。默认值：false

线性渐变的示例效果如下：

• 角度渐变

sweepGradient(value: {center: [Length, Length]; start?: number | string; end?: number | string; rotation?: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean;})

仅绘制0-360度范围内的角度，超出时不绘制渐变色，只绘制纯色。参数说明如下：

• • center：为角度渐变的中心点，即相对于当前组件左上角的坐标。

  • start：角度渐变的起点。默认值：0，角度为字符串时仅支持类型deg，grad，rad，trun。

  • end：角度渐变的终点。默认值：0，角度为字符串时仅支持类型deg，grad，rad，trun。

  • rotation: 角度渐变的旋转角度。默认值：0，角度为字符串时仅支持类型deg，grad，rad，trun。

  • colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。

  • repeating: 为渐变的颜色重复着色。默认值：false

说明：

设置为小于0的值时，按值为0处理，设置为大于360的值时，按值为360处理。

当start、end、rotation的数据类型为string，合法的取值为纯数字或纯数字后带"deg"(度)、"rad"(弧度)、"grad"(梯度)、"turn"(圈)单位，例如："90"、 "90deg"、"1.57rad"。

角度渐变的示例效果如下：

• 径向渐变

radialGradient(value: { center: [Length, Length]; radius: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean })

参数说明如下：

• • center：径向渐变的中