• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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
10## Attributes
11
12
13| Name             | Type                                        | Description                              |
14| -------------- | -------------------------------------------- | ----------------------------------- |
15| linearGradient | {<br>angle?: number \| string,<br>direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),<br>colors: Array&lt;[[ResourceColor](ts-types.md#resourcecolor), number]&gt;,<br>repeating?: boolean<br>} | 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.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
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&lt;[[ResourceColor](ts-types.md#resourcecolor), number]&gt;,<br>repeating?: boolean<br>} | 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.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.<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**.|
17| radialGradient | {<br>center: [Point](./ts-drawing-components-polygon.md#point),<br> radius: number \| string,<br>colors: Array&lt;[[ResourceColor](ts-types.md#resourcecolor), number]&gt;,<br>repeating?: boolean<br>} | 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.<br>- **repeating**: whether the colors are repeated.<br>  Default value: **false**<br>Since API version 9, this API is supported in ArkTS widgets.|
18
19>  **NOTE**
20>
21>  When using the **colors** parameter, take note of the following:
22>
23>  [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.
24
25
26## Example
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, // Gradient direction.
49          repeating: true, // Whether the gradient colors are repeated.
50          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
51        })
52    }
53    .width('100%')
54    .padding({ top: 5 })
55  }
56}
57```
58
59![en-us_image_0000001219864149](figures/gradientColor1.png)
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, // Rotation angle.
87          repeating: true, // Whether the gradient colors are repeated.
88          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
89        })
90    }
91    .width('100%')
92    .padding({ top: 5 })
93  }
94}
95```
96
97![en-us_image_0000001219864149](figures/gradientColor2.png)
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]] // The gradient colors are repeated because the last color stop is less than 1.
124        })
125    }
126    .width('100%')
127    .padding({ top: 5 })
128  }
129}
130```
131
132![en-us_image_0000001219864149](figures/gradientColor3.png)
133