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<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<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<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<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<[ColorStop](ts-basic-components-gauge.md#colorstop)>,<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 22```ts 23// xxx.ets 24@Entry 25@Component 26struct ColorGradientExample { 27 build() { 28 Column({ space: 5 }) { 29 Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 30 Row() 31 .width('90%') 32 .height(50) 33 .linearGradient({ 34 angle: 90, 35 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 36 }) 37 Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 38 Row() 39 .width('90%') 40 .height(50) 41 .linearGradient({ 42 direction: GradientDirection.Left, // 渐变方向 43 repeating: true, // 渐变颜色是否重复 44 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 45 }) 46 } 47 .width('100%') 48 .padding({ top: 5 }) 49 } 50} 51``` 52 53 54 55```ts 56@Entry 57@Component 58struct ColorGradientExample { 59 build() { 60 Column({ space: 5 }) { 61 Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 62 Row() 63 .width(100) 64 .height(100) 65 .sweepGradient({ 66 center: [50, 50], 67 start: 0, 68 end: 359, 69 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 70 }) 71 72 Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 73 Row() 74 .width(100) 75 .height(100) 76 .sweepGradient({ 77 center: [50, 50], 78 start: 0, 79 end: 359, 80 rotation: 45, // 旋转角度 81 repeating: true, // 渐变颜色是否重复 82 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 83 }) 84 } 85 .width('100%') 86 .padding({ top: 5 }) 87 } 88} 89``` 90 91 92 93```ts 94// xxx.ets 95@Entry 96@Component 97struct ColorGradientExample { 98 build() { 99 Column({ space: 5 }) { 100 Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) 101 Row() 102 .width(100) 103 .height(100) 104 .radialGradient({ 105 center: [50, 50], 106 radius: 60, 107 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]] 108 }) 109 Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC) 110 Row() 111 .width(100) 112 .height(100) 113 .radialGradient({ 114 center: [50, 50], 115 radius: 60, 116 repeating: true, 117 colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 数组末尾元素占比小于1时满足重复着色效果 118 }) 119 } 120 .width('100%') 121 .padding({ top: 5 }) 122 } 123} 124``` 125 126 127
