鴻蒙Harmony應用開發—ArkTS聲明式開發（通用屬性：顏色漸變）

設置組件的顏色漸變效果。

說明：

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

linearGradient

linearGradient(value: { angle?: number | string; direction?: GradientDirection; colors: Array; repeating?: boolean; })

線性漸變。

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

系統能力：?SystemCapability.ArkUI.ArkUI.Full

參數：

參數名	類型	必填	說明
value	{ angle?:?number?\|?string, direction?:?GradientDirection, colors:?Array<[ResourceColor,?number]>, repeating?:?boolean }	是	線性漸變。 - angle:?線性漸變的起始角度。0點方向順時針旋轉為正向角度。默認值：180 - direction:?線性漸變的方向，設置angle后不生效。默認值：GradientDirection.Bottom - colors:?指定某百分比位置處的漸變色顏色,設置非法顏色直接跳過。 - repeating:?為漸變的顏色重復著色。默認值：false

sweepGradient

sweepGradient(value: { center: Array; start?: number | string; end?: number | string; rotation?: number | string; colors: Array; repeating?: boolean; })

角度漸變。

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

系統能力：?SystemCapability.ArkUI.ArkUI.Full

參數：

參數名	類型	必填	說明
value	{ center:?Point, start?:?number?\|?string, end?:?number?\|?string, rotation?:?number?\|?string, colors:?Array<[ResourceColor,?number]>, repeating?:?boolean }	是	角度漸變，僅繪制0-360度范圍內的角度，超出時不繪制漸變色，只繪制純色。 - center：為角度漸變的中心點，即相對于當前組件左上角的坐標。 - start：角度漸變的起點。 ?默認值：0 - end：角度漸變的終點。 ?默認值：0 - rotation:?角度漸變的旋轉角度。 ?默認值：0 - colors:?指定某百分比位置處的漸變色顏色，設置非法顏色直接跳過。 - repeating:?為漸變的顏色重復著色。默認值：false 說明：設置為小于0的值時，按值為0處理，設置為大于360的值時，按值為360處理。當start、end、rotation的數據類型為string，值為"90"或"90%"，與90效果一致

radialGradient

radialGradient(value: { center: Array; radius: number | string; colors: Array; repeating?: boolean })

徑向漸變。

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

系統能力：?SystemCapability.ArkUI.ArkUI.Full

參數：

參數名	類型	必填	說明
value	{ center:?Point, radius:?number \| string, colors:?Array<[ResourceColor,?number]>, repeating?:?boolean }	是	徑向漸變。 - center：徑向漸變的中心點，即相對于當前組件左上角的坐標。 - radius：徑向漸變的半徑。 ?取值范圍：[0,+∞) 說明：設置為小于的0值時，按值為0處理。 - colors:?指定某百分比位置處的漸變色顏色，設置非法顏色直接跳過。 - repeating:?為漸變的顏色重復著色。默認值：false

說明：

colors參數的約束：

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

示例

// xxx.ets
@Entry
@Component
struct ColorGradientExample {build() {Column({ space: 5 }) {Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)Row().width('90%').height(50).linearGradient({angle: 90,colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]})Text('linearGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)Row().width('90%').height(50).linearGradient({direction: GradientDirection.Left, // 漸變方向repeating: true, // 漸變顏色是否重復colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 數組末尾元素占比小于1時滿足重復著色效果})}.width('100%').padding({ top: 5 })}
}

zh-cn_image_0000001219864149

@Entry
@Component
struct ColorGradientExample {build() {Column({ space: 5 }) {Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)Row().width(100).height(100).sweepGradient({center: [50, 50],start: 0,end: 359,colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]})Text('sweepGradient Reapeat').fontSize(12).width('90%').fontColor(0xCCCCCC)Row().width(100).height(100).sweepGradient({center: [50, 50],start: 0,end: 359,rotation: 45, // 旋轉角度repeating: true, // 漸變顏色是否重復colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 數組末尾元素占比小于1時滿足重復著色效果})}.width('100%').padding({ top: 5 })}
}

zh-cn_image_0000001219864149

// xxx.ets
@Entry
@Component
struct ColorGradientExample {build() {Column({ space: 5 }) {Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)Row().width(100).height(100).radialGradient({center: [50, 50],radius: 60,colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 1.0]]})Text('radialGradient Repeat').fontSize(12).width('90%').fontColor(0xCCCCCC)Row().width(100).height(100).radialGradient({center: [50, 50],radius: 60,repeating: true,colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // 數組末尾元素占比小于1時滿足重復著色效果})}.width('100%').padding({ top: 5 })}
}

zh-cn_image_0000001219864149

最后，有很多小伙伴不知道學習哪些鴻蒙開發技術？不知道需要重點掌握哪些鴻蒙應用開發知識點？而且學習時頻繁踩坑，最終浪費大量時間。所以有一份實用的鴻蒙（Harmony NEXT）資料用來跟著學習是非常有必要的。?

這份鴻蒙（Harmony NEXT）資料包含了鴻蒙開發必掌握的核心知識要點，內容包含了（ArkTS、ArkUI開發組件、Stage模型、多端部署、分布式應用開發、音頻、視頻、WebGL、OpenHarmony多媒體技術、Napi組件、OpenHarmony內核、Harmony南向開發、鴻蒙項目實戰等等）鴻蒙（Harmony NEXT）技術知識點。

希望這一份鴻蒙學習資料能夠給大家帶來幫助，有需要的小伙伴自行領取，限時開源，先到先得~無套路領取！！

?獲取這份完整版高清學習路線，請點擊→純血版全套鴻蒙HarmonyOS學習資料

鴻蒙（Harmony NEXT）最新學習路線

?HarmonOS基礎技能

HarmonOS就業必備技能?
?HarmonOS多媒體技術

鴻蒙NaPi組件進階

HarmonOS高級技能

初識HarmonOS內核?
實戰就業級設備開發

有了路線圖，怎么能沒有學習資料呢，小編也準備了一份聯合鴻蒙官方發布筆記整理收納的一套系統性的鴻蒙（OpenHarmony ）學習手冊（共計1236頁）與鴻蒙（OpenHarmony ）開發入門教學視頻，內容包含：ArkTS、ArkUI、Web開發、應用模型、資源分類…等知識點。

獲取以上完整版高清學習路線，請點擊→純血版全套鴻蒙HarmonyOS學習資料