1# 颜色渐变 2 3设置组件的颜色渐变效果。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9## linearGradient 10 11linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array\<any>; repeating?: boolean;}) 12 13线性渐变。 14 15**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 16 17**系统能力：** SystemCapability.ArkUI.ArkUI.Full 18 19**参数：** 20 21| 参数名 | 类型 | 必填 | 说明 | 22| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 23| value | {<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 | 24 25## sweepGradient 26 27sweepGradient(value: {center: Arra\<any>; start?: number | string; end?: number | string; rotation?: number | string; colors: Array\<any>; repeating?: boolean;}) 28 29角度渐变。 30 31**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 32 33**系统能力：** SystemCapability.ArkUI.ArkUI.Full 34 35**参数：** 36 37| 参数名 | 类型 | 必填 | 说明 | 38| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 39| value | {<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/>**说明：** <br/>设置为小于0的值时，按值为0处理，设置为大于360的值时，按值为360处理。<br/>当start、end、rotation的数据类型为string，值为"90"或"90%"，与90效果一致 | 40 41## radialGradient 42 43radialGradient(value: { center: Array\<any>; radius: number | string; colors: Array\<any>; repeating?: boolean }) 44 45径向渐变。 46 47**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53 54| 参数名 | 类型 | 必填 | 说明 | 55| -------------- | -------------------------------------------- | ----------------------------------- | ----------------------------------- | 56| value | {<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 | 57 58> **说明：** 59> 60> colors参数的约束： 61> 62> [ResourceColor](ts-types.md#resourcecolor)表示填充的颜色，number表示指定颜色所处的位置，取值范围为[0,1.0]，0表示需要设置渐变色的容器的开始处，1.0表示容器的结尾处。想要实现多个颜色渐变效果时，多个数组中number参数建议递增设置，如后一个数组number参数比前一个数组number小的话，按照等于前一个数组number的值处理。 63 64 65## 示例 66 67```ts 68// xxx.ets 69@Entry 70@Component 71struct ColorGradientExample { 72 build() { 73 Column({ space: 5 }) { 74 Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 75 Row() 76 .width('90%') 77 .height(50) 78 .linearGradient({ 79 angle: 90, 80 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 81 }) 82 Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 83 Row() 84 .width('90%') 85 .height(50) 86 .linearGradient({ 87 direction: GradientDirection.Left, // 渐变方向 88 repeating: true, // 渐变颜色是否重复 89 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 90 }) 91 } 92 .width('100%') 93 .padding({ top: 5 }) 94 } 95} 96``` 97 98 99 100```ts 101@Entry 102@Component 103struct ColorGradientExample { 104 build() { 105 Column({ space: 5 }) { 106 Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 107 Row() 108 .width(100) 109 .height(100) 110 .sweepGradient({ 111 center: [50, 50], 112 start: 0, 113 end: 359, 114 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 115 }) 116 117 Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 118 Row() 119 .width(100) 120 .height(100) 121 .sweepGradient({ 122 center: [50, 50], 123 start: 0, 124 end: 359, 125 rotation: 45, // 旋转角度 126 repeating: true, // 渐变颜色是否重复 127 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 128 }) 129 } 130 .width('100%') 131 .padding({ top: 5 }) 132 } 133} 134``` 135 136 137 138```ts 139// xxx.ets 140@Entry 141@Component 142struct ColorGradientExample { 143 build() { 144 Column({ space: 5 }) { 145 Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 146 Row() 147 .width(100) 148 .height(100) 149 .radialGradient({ 150 center: [50, 50], 151 radius: 60, 152 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 153 }) 154 Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 155 Row() 156 .width(100) 157 .height(100) 158 .radialGradient({ 159 center: [50, 50], 160 radius: 60, 161 repeating: true, 162 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 163 }) 164 } 165 .width('100%') 166 .padding({ top: 5 }) 167 } 168} 169``` 170 171 172
