Gradient Color

Create a more gorgeous look for a component by applying a gradient color effect to it.

NOTE

This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

Required Permissions

None

Attributes

Name Type Default Value Description
linearGradient {
angle?: number|string,
direction?: GradientDirection,
colors: Array<any>
repeating?: boolean
}		 - Linear gradient.
angle: angle of the linear gradient.
direction: direction of the linear gradient. It does not take effect when angle is set.
colors: description of the gradient colors.
repeating: whether the colors are repeated.
sweepGradient {
center: Point,
start?: angle,
end?: angle,
colors: Array<any>
repeating?: boolean
}		 - Angle gradient.
center: center point of the angle gradient.
start: start point of the angle gradient.
end: end point of the angle gradient.
colors: description of the gradient colors.
repeating: whether the colors are repeated.
radialGradient {
center: Point,
radius: Length,
colors: Array<any>
repeating: boolean
}		 - Radial gradient.
center: center point of the radial gradient.
radius: radius of the radial gradient.
colors: description of the gradient colors.
repeating: whether the colors are repeated.

Example

// 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: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
        })
      Text('sweepGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .sweepGradient({
          center: [50, 50],
          start: 0,
          end: 359,
          colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
        })
      Text('radialGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
      Row()
        .width(100)
        .height(100)
        .radialGradient({
          center: [50, 50],
          radius: 60,
          colors:[[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

en-us_image_0000001212218484