1# 颜色渐变 2 3设置组件的颜色渐变效果。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 属性 11 12 13| 名称 | 参数类型 | 描述 | 14| -------------- | -------------------------------------------- | ----------------------------------- | 15| linearGradient | {<br/>angle?: number \| string,<br/>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br/>colors: Array<[[ResourceColor](ts-types.md#resourcecolor), number]>,<br/>repeating?: boolean<br/>} | 线性渐变。<br/>- angle: 线性渐变的起始角度。0点方向顺时针旋转为正向角度。<br/> 默认值：180<br/>- direction: 线性渐变的方向，设置angle后不生效。<br/> 默认值：GradientDirection.Bottom <br/>- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。<br/>- repeating: 为渐变的颜色重复着色。 <br/> 默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 16| sweepGradient | {<br/>center: [Point](./ts-drawing-components-polygon.md#point),<br/>start?: number \| string,<br/>end?: number \| string,<br/>rotation?: number\|string,<br/>colors: Array<[[ResourceColor](ts-types.md#resourcecolor), number]>,<br/>repeating?: boolean<br/>} | 角度渐变，仅绘制0-360度范围内的角度，超出时不绘制渐变色，只绘制纯色。<br/>- center：为角度渐变的中心点，即相对于当前组件左上角的坐标。<br/>- start：角度渐变的起点。<br/> 默认值：0<br/>- end：角度渐变的终点。<br/> 默认值：0<br/>- rotation: 角度渐变的旋转角度。<br/> 默认值：0<br/>- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。<br/>- repeating: 为渐变的颜色重复着色。<br/> 默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按值为0处理，设置为大于360的值时，按值为360处理。<br/>当start、end、rotation的数据类型为string，值为"90"或"90%"，与90效果一致 | 17| radialGradient | {<br/>center: [Point](./ts-drawing-components-polygon.md#point),<br/> radius: number \| string,<br/>colors: Array<[[ResourceColor](ts-types.md#resourcecolor), number]>,<br/>repeating?: boolean<br/>} | 径向渐变。<br/>- center：径向渐变的中心点，即相对于当前组件左上角的坐标。<br/>- radius：径向渐变的半径。<br/> 取值范围：[0,+∞)<br>**说明：** <br/>设置为小于的0值时，按值为0处理。<br/>- colors: 指定某百分比位置处的渐变色颜色，设置非法颜色直接跳过。<br/>- repeating: 为渐变的颜色重复着色。<br/> 默认值：false<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 18 19> **说明：** 20> 21> colors参数的约束： 22> 23> [ResourceColor](ts-types.md#resourcecolor)表示填充的颜色，number表示指定颜色所处的位置，取值范围为[0,1.0]，0表示需要设置渐变色的容器的开始处，1.0表示容器的结尾处。想要实现多个颜色渐变效果时，多个数组中number参数建议递增设置，如后一个数组number参数比前一个数组number小的话，按照等于前一个数组number的值处理。 24 25 26## 示例 27 28```ts 29// xxx.ets 30@Entry 31@Component 32struct ColorGradientExample { 33 build() { 34 Column({ space: 5 }) { 35 Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 36 Row() 37 .width('90%') 38 .height(50) 39 .linearGradient({ 40 angle: 90, 41 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 42 }) 43 Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 44 Row() 45 .width('90%') 46 .height(50) 47 .linearGradient({ 48 direction: GradientDirection.Left, // 渐变方向 49 repeating: true, // 渐变颜色是否重复 50 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 51 }) 52 } 53 .width('100%') 54 .padding({ top: 5 }) 55 } 56} 57``` 58 59 60 61```ts 62@Entry 63@Component 64struct ColorGradientExample { 65 build() { 66 Column({ space: 5 }) { 67 Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 68 Row() 69 .width(100) 70 .height(100) 71 .sweepGradient({ 72 center: [50, 50], 73 start: 0, 74 end: 359, 75 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 76 }) 77 78 Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 79 Row() 80 .width(100) 81 .height(100) 82 .sweepGradient({ 83 center: [50, 50], 84 start: 0, 85 end: 359, 86 rotation: 45, // 旋转角度 87 repeating: true, // 渐变颜色是否重复 88 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 89 }) 90 } 91 .width('100%') 92 .padding({ top: 5 }) 93 } 94} 95``` 96 97 98 99```ts 100// xxx.ets 101@Entry 102@Component 103struct ColorGradientExample { 104 build() { 105 Column({ space: 5 }) { 106 Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 107 Row() 108 .width(100) 109 .height(100) 110 .radialGradient({ 111 center: [50, 50], 112 radius: 60, 113 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 114 }) 115 Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 116 Row() 117 .width(100) 118 .height(100) 119 .radialGradient({ 120 center: [50, 50], 121 radius: 60, 122 repeating: true, 123 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 124 }) 125 } 126 .width('100%') 127 .padding({ top: 5 }) 128 } 129} 130``` 131 132 133
