鸿蒙HarmonyOS NEXT开辟：颜色渐变（ArkTS通用属性）

颜色渐变

设置组件的颜色渐变结果。
   说明：
  从API Version 7开始支持。后续版本如有新增内容，则接纳上角标单独标志该内容的起始版本。
  linearGradient

linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array<[ResourceColor, number]>; repeating?: boolean;})
线性渐变。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名范例必填说明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

sweepGradient(value: {center: [Length, Length]; start?: number | string; end?: number | string; rotation?: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean;})
角度渐变。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
参数：
参数名范例必填说明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

radialGradient(value: { center: [Length, Length]; radius: number | string; colors: Array<[ResourceColor, number]>; repeating?: boolean })
径向渐变。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
参数：
参数名范例必填说明value{
center: [Length, Length],
radius: number | string,
colors: Array<[ResourceColor, number]>,
repeating?: boolean
}是径向渐变。
- center：径向渐变的中心点，即相对于当前组件左上角的坐标。
- radius：径向渐变的半径。
 取值范围：[0,+∞)
说明：
设置为小于的0值时，按值为0处理。
- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。
- repeating: 为渐变的颜色重复着色。
默认值：false   说明：
  colors参数的束缚：
  ResourceColor表现添补的颜色，number表现指定颜色所处的位置，取值范围为[0,1.0]，0表现必要设置渐变色的容器的开始处，1.0表现容器的末端处。想要实现多个颜色渐变结果时，多个数组中number参数发起递增设置，如后一个数组number参数比前一个数组number小的话，按照即是前一个数组number的值处理。
  示例

1. // xxx.ets
2. @Entry
3. @Component
4. struct ColorGradientExample {
5.   build() {
6.     Column({ space: 5 }) {
7.       Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
8.       Row()
9.         .width('90%')
10.         .height(50)
11.         .linearGradient({
12.           angle: 90,
13.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
14.         })
15.       Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
16.       Row()
17.         .width('90%')
18.         .height(50)
19.         .linearGradient({
20.           direction: GradientDirection.Left, // 渐变方向
21.           repeating: true, // 渐变颜色是否重复
22.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
23.         })
24.     }
25.     .width('100%')
26.     .padding({ top: 5 })
27.   }
28. }
29. <strong>ts</strong>

复制代码

1. @Entry
2. @Component
3. struct ColorGradientExample {
4.   build() {
5.     Column({ space: 5 }) {
6.       Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
7.       Row()
8.         .width(100)
9.         .height(100)
10.         .sweepGradient({
11.           center: [50, 50],
12.           start: 0,
13.           end: 359,
14.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
15.         })
16.       
17.       Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
18.       Row()
19.         .width(100)
20.         .height(100)
21.         .sweepGradient({
22.           center: [50, 50],
23.           start: 0,
24.           end: 359,
25.           rotation: 45, // 旋转角度
26.           repeating: true, // 渐变颜色是否重复
27.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
28.         })
29.     }
30.     .width('100%')
31.     .padding({ top: 5 })
32.   }
33. }
34. <strong>ts</strong>

复制代码

1. // xxx.ets
2. @Entry
3. @Component
4. struct ColorGradientExample {
5.   build() {
6.     Column({ space: 5 }) {
7.       Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
8.       Row()
9.         .width(100)
10.         .height(100)
11.         .radialGradient({
12.           center: [50, 50],
13.           radius: 60,
14.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
15.         })
16.       Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
17.       Row()
18.         .width(100)
19.         .height(100)
20.         .radialGradient({
21.           center: [50, 50],
22.           radius: 60,
23.           repeating: true,
24.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果
25.         })
26.     }
27.     .width('100%')
28.     .padding({ top: 5 })
29.   }
30. }
31. <strong>ts</strong>

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。