1# Gradient Color 2 3Create a more gorgeous look for a component by applying a gradient color effect to it. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9## linearGradient 10 11linearGradient(value: {angle?: number | string; direction?: GradientDirection; colors: Array\<any>; repeating?: boolean;}) 12 13Linear gradient. 14 15**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 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>} | Yes | Linear gradient.<br>- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).<br> Default value: **180**<br>- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.<br> Default value: **GradientDirection.Bottom**<br>- **colors**: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped.<br>- **repeating**: whether the colors are repeated.<br> Default value: **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 29Sweep gradient. 30 31**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 32 33**System capability**: SystemCapability.ArkUI.ArkUI.Full 34 35**Parameters** 36 37| Name| Type | Mandatory| Description | 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>} | Yes | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.<br>- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **start**: start point of the sweep gradient.<br> Default value: **0**<br>- **end**: end point of the sweep gradient.<br> Default value: **0**<br>- **rotation**: rotation angle of the sweep gradient.<br> Default value: **0**<br>- **colors**: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**<br>**NOTE**<br>A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.<br>When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.| 40 41## radialGradient 42 43radialGradient(value: { center: Array\<any>; radius: number | string; colors: Array\<any>; repeating?: boolean }) 44 45Radial gradient. 46 47**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 48 49**System capability**: SystemCapability.ArkUI.ArkUI.Full 50 51**Parameters** 52 53 54| Name | Type | Mandatory | Description | 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>} | Yes| Radial gradient.<br>- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.<br>- **radius**: radius of the radial gradient.<br> Value range: [0, +∞)<br>**NOTE**<br>A value less than 0 evaluates to the value **0**.<br>- **colors**: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped.<br>- **repeating**: whether the colors are repeated.<br> Default value: **false**| 57 58> **NOTE** 59> 60> When using the **colors** parameter, take note of the following: 61> 62> [ResourceColor](ts-types.md#resourcecolor) indicates the color, and **number** indicates the color's position, which ranges from 0 to 1.0: **0** indicates the start of the container, and **1.0** indicates the end of the container. To create a gradient with multiple color stops, you are advised to set **number** in ascending order. If the value of **number** in an array is smaller than that in the previous array, it is considered as equivalent to the value in the previous array. 63 64 65## Example 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, // Gradient direction. 88 repeating: true, // Whether the gradient colors are repeated. 89 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 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, // Rotation angle. 126 repeating: true, // Whether the gradient colors are repeated. 127 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 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]] // The gradient colors are repeated because the last color stop is less than 1. 163 }) 164 } 165 .width('100%') 166 .padding({ top: 5 }) 167 } 168} 169``` 170 171 172
