顏色漸變

2024-01-22 16:17 更新

設(shè)置組件的顏色漸變效果。

說明

從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

屬性

名稱

參數(shù)

描述

linearGradient

{

angle?: number | string,

direction?: GradientDirection,

colors: Array<[ResourceColor, number]>,

repeating?: boolean

}

線性漸變。

- angle: 線性漸變的起始角度。0點方向順時針旋轉(zhuǎn)為正向角度。

默認值：180

- direction: 線性漸變的方向，設(shè)置angle后不生效。

默認值：GradientDirection.Bottom

- colors: 為漸變的顏色描述。

- repeating: 為漸變的顏色重復著色。

默認值：false

從API version 9開始，該接口支持在ArkTS卡片中使用。

sweepGradient

{

center: Point,

start?: number | string,

end?: number | string,

rotation?: number|string,

colors: Array<[ResourceColor, number]>,

repeating?: boolean

}

角度漸變。

- center：為角度漸變的中心點，即相對于當前組件左上角的坐標。

- start：角度漸變的起點。

默認值：0

- end：角度漸變的終點。

默認值：0

- rotation: 角度漸變的旋轉(zhuǎn)角度。

默認值：0

- colors: 為漸變的顏色描述。

- repeating: 為漸變的顏色重復著色。

默認值：false

從API version 9開始，該接口支持在ArkTS卡片中使用。

說明：

設(shè)置為小于0的值時，按值為0處理。設(shè)置為大于360的值時，按值為360處理。當start、end、rotation的數(shù)據(jù)類型為string，值為"90"或"90%"，與90效果一致。

radialGradient

{

center: Point,

radius: number | string,

colors: Array<[ResourceColor, number]>,

repeating?: boolean

}

徑向漸變。

- center：徑向漸變的中心點，即相對于當前組件左上角的坐標。

- radius：徑向漸變的半徑。

取值范圍 [0,+∞)

說明：

設(shè)置為小于的0值時，按值為0處理。

- colors: 為漸變的顏色描述。

- repeating: 為漸變的顏色重復著色。

默認值：false

從API version 9開始，該接口支持在ArkTS卡片中使用。

說明

colors參數(shù)的約束：

ResourceColor表示填充的顏色，number表示指定顏色所處的位置，取值范圍為[0,1.0]，0表示需要設(shè)置漸變色的容器的開始處，1.0表示容器的結(jié)尾處。想要實現(xiàn)多個顏色漸變效果時，多個數(shù)組中number參數(shù)建議遞增設(shè)置，如后一個數(shù)組number參數(shù)比前一個數(shù)組number小的話，按照等于前一個數(shù)組number的值處理。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ColorGradientExample {
  5.   build() {
  6.     Column({ space: 5 }) {
  7.       Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
  8.       Row()
  9.         .width('90%')
  10.         .height(50)
  11.         .linearGradient({
  12.           angle: 90,
  13.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
  14.         })
  15.       Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
  16.       Row()
  17.         .width('90%')
  18.         .height(50)
  19.         .linearGradient({
  20.           direction: GradientDirection.Left, // 漸變方向
  21.           repeating: true, // 漸變顏色是否重復
  22.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 數(shù)組末尾元素占比小于1時滿足重復著色效果
  23.         })
  24.     }
  25.     .width('100%')
  26.     .padding({ top: 5 })
  27.   }
  28. }

  1. @Entry
  2. @Component
  3. struct ColorGradientExample {
  4.   build() {
  5.     Column({ space: 5 }) {
  6.       Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
  7.       Row()
  8.         .width(100)
  9.         .height(100)
  10.         .sweepGradient({
  11.           center: [50, 50],
  12.           start: 0,
  13.           end: 359,
  14.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
  15.         })
  16.       
  17.       Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
  18.       Row()
  19.         .width(100)
  20.         .height(100)
  21.         .sweepGradient({
  22.           center: [50, 50],
  23.           start: 0,
  24.           end: 359,
  25.           rotation: 45, // 旋轉(zhuǎn)角度
  26.           repeating: true, // 漸變顏色是否重復
  27.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 數(shù)組末尾元素占比小于1時滿足重復著色效果
  28.         })
  29.     }
  30.     .width('100%')
  31.     .padding({ top: 5 })
  32.   }
  33. }

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct ColorGradientExample {
  5.   build() {
  6.     Column({ space: 5 }) {
  7.       Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
  8.       Row()
  9.         .width(100)
  10.         .height(100)
  11.         .radialGradient({
  12.           center: [50, 50],
  13.           radius: 60,
  14.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]
  15.         })
  16.       Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)
  17.       Row()
  18.         .width(100)
  19.         .height(100)
  20.         .radialGradient({
  21.           center: [50, 50],
  22.           radius: 60,
  23.           repeating: true,
  24.           colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 數(shù)組末尾元素占比小于1時滿足重復著色效果
  25.         })
  26.     }
  27.     .width('100%')
  28.     .padding({ top: 5 })
  29.   }
  30. }

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號