鸿蒙每日知识分享 - 组件添加渐变背景色

今天是 2025 年 2 月 17 日，今天要分享的鸿蒙知识点是如何给组件添加渐变的背景色。

在 Harmony OS 中，一共支持下面的三种类型的渐变色方式：

• 线性渐变：linearGradient。
• 角度渐变：sweepGradient。
• 径向渐变：radialGradient。

代码示例及展示效果如下：

Column() {
  Text('线性红色到绿色渐变')
  Row()
    .width('100%')
    .height('20%')
    .linearGradient({
      colors: [[Color.Red, 0.0], [Color.Green, 1.0]]
    })
  Text('旋转360°红色到绿色渐变')
  Row()
    .width(100)
    .height(100)
    .sweepGradient({
      center: [50, 50],
      start: 0,
      end: 360,
      colors: [[Color.Red, 0.0], [Color.Green, 1.0]]
    })
  Text('半径为60的红色到绿色渐变')
  Row()
    .width(100)
    .height(100)
    .radialGradient({
      center: [50, 50],
      radius: 60,
      colors: [[Color.Red, 0.0],  [Color.Green, 1.0]]
    })
}
.height('100%')
.width('100%')

效果图：