Gradient Color

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

NOTE

The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.

linearGradient

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

Linear gradient.

Widget capability: Since API version 9, this feature is supported in ArkTS widgets.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	{ angle?: number \| string, direction?: GradientDirection, colors: Array<[ResourceColor, number]>, repeating?: boolean }	Yes	Linear gradient. - angle: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0). Default value: 180 - direction: direction of the linear gradient. It does not take effect when angle is set. Default value: GradientDirection.Bottom - colors: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped. - repeating: whether the colors are repeated. Default value: false

sweepGradient

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

Sweep gradient.

Widget capability: Since API version 9, this feature is supported in ArkTS widgets.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	{ center: Point, start?: number \| string, end?: number \| string, rotation?: number \| string, colors: Array<[ResourceColor, number]>, repeating?: boolean }	Yes	Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn. - center: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component. - start: start point of the sweep gradient. Default value: 0 - end: end point of the sweep gradient. Default value: 0 - rotation: rotation angle of the sweep gradient. Default value: 0 - colors: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped. - repeating: whether the colors are repeated. Default value: false NOTE A value less than 0 evaluates to the value 0. A value greater than 360 evaluates to the value 1. When the data type of start, end, and rotation is string, the value "90" or "90%" is equivalent to 90.

radialGradient

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

Radial gradient.

Widget capability: Since API version 9, this feature is supported in ArkTS widgets.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	{ center: Point, radius: number \| string, colors: Array<[ResourceColor, number]>, repeating?: boolean }	Yes	Radial gradient. - center: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component. - radius: radius of the radial gradient. Value range: [0, +∞) NOTE A value less than 0 evaluates to the value 0. - colors: array of color stops, each of which consists of a color and its stop position. Invalid colors are automatically skipped. - repeating: whether the colors are repeated. Default value: false

NOTE

When using the colors parameter, take note of the following:

ResourceColor indicates the color, and number indicates the color's position, which ranges from 0 to 1.0: 0 indicates the start of the container, and 1.0 indicates the end of the container. To create a gradient with multiple color stops, you are advised to set number in ascending order. If the value of number in an array is smaller than that in the previous array, it is considered as equivalent to the value in the previous array.

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: [[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, // Gradient direction.
          repeating: true, // Whether the gradient colors are repeated.
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

en-us_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, // Rotation angle.
          repeating: true, // Whether the gradient colors are repeated.
          colors: [[0xff0000, 0.0], [0x0000ff, 0.3], [0xffff00, 0.5]] // The gradient colors are repeated because the last color stop is less than 1.
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

en-us_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]] // The gradient colors are repeated because the last color stop is less than 1.
        })
    }
    .width('100%')
    .padding({ top: 5 })
  }
}

en-us_image_0000001219864149