QRCode

The QRCode component is used to display a QR code.

NOTE

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

The pixel count of the QRCode component is subject to the content. If the component size is not large enough, the content may fail to be displayed. In this case, you need to resize the component.

Child Components

Not supported

APIs

QRCode(value: ResourceStr)

Creates a QRCode component. The displayed QR code can be scanned to obtain the encoded string information.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceStr	Yes	Content of the QR code. A maximum of 512 characters are supported. If this limit is exceeded, the first 512 characters are used. The Resource type is supported since API version 20. NOTE If this parameter is set to null, it is equivalent to passing the string "null". If it is set to undefined, it is equivalent to passing the string "undefined". Passing an empty string will result in an invalid QR code.

Attributes

In addition to the universal attributes, the following attributes are supported.

color

color(value: ResourceColor)

Sets the color of the QR code.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	QR code color. The default value is '#ff000000' and does not change with the system color mode.

backgroundColor

backgroundColor(value: ResourceColor)

Sets the background color of the QR code.

Widget capability: This API can be used in ArkTS widgets since API version 9.

Atomic service API: This API can be used in atomic services since API version 11.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Background color of the QR code. Default value: Color.White Since API version 11, the default value is '#ffffffff' and does not change with the system color mode.

contentOpacity¹¹⁺

contentOpacity(value: number | Resource)

Sets the opacity of the QR code content. The minimum value is 0, and the maximum value is 1.

Atomic service API: This API can be used in atomic services since API version 12.

System capability: SystemCapability.ArkUI.ArkUI.Full

Parameters

Name	Type	Mandatory	Description
value	number | Resource	Yes	Opacity of the QR code content. Default value: 1 Value range: [0, 1]. If the value is out of the range, the default value is used.

Events

Among the universal events, the click event, touch event, and show/hide event are supported.

Example

Example 1: Setting the Color, Background Color, and Opacity

This example demonstrates the basic usage of the QRCode component. It sets the QR code color using the color attribute, the background color using the backgroundColor attribute, and the opacity using the contentOpacity attribute.

// xxx.ets
@Entry
@Component
struct QRCodeExample {
  private value: string = 'hello world';

  build() {
    Column({ space: 5 }) {
      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(140).height(140)

      // Set the color of the QR code.
      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).color(0xF7CE00).width(140).height(140)

      // Set the background color of the QR code.
      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(140).height(140).backgroundColor(Color.Orange)

      // Set the opacity of QR code content.
      Text('contentOpacity').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(140).height(140).color(Color.Black).contentOpacity(0.1)
    }.width('100%').margin({ top: 5 })
  }
}

Example 2: Setting the Background Color to Transparent

This example shows how to set the QR code background color to transparent using the backgroundColor attribute, allowing the QR code content to blend with the background.

// xxx.ets
@Entry
@Component
struct QRCodeExample {
  private value: string = 'hello world';

  build() {
    Column({ space: 5 }) {
      RelativeContainer() {
        // Replace $r('app.media.ocean') with the image resource file you use.
        Image($r('app.media.ocean'))
        // Set the QR code background color to transparent.
        QRCode(this.value).width(200).height(200).backgroundColor('#00ffffff')
      }.width(200).height(200)
    }.width('100%').margin({ top: 5 })
  }
}