1# QRCode
2
3The **QRCode** component is used to display a QR code.
4
5>  **NOTE**
6>
7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8>
9> 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.
10
11
12## Child Components
13
14Not supported
15
16
17## APIs
18
19QRCode(value: string)
20
21**Widget capability**: This API can be used in ArkTS widgets since API version 9.
22
23**Atomic service API**: This API can be used in atomic services since API version 11.
24
25**System capability**: SystemCapability.ArkUI.ArkUI.Full
26
27**Parameters**
28
29| Name| Type| Mandatory| Description|
30| -------- | -------- | -------- | -------- |
31| value | string | Yes| Content of the QR code. A maximum of 512 characters are supported. If this limit is exceeded, the first 512 characters are used.<br>**NOTE**<br>The value must be valid. It cannot be **null**, **undefined**, or empty content, as otherwise the QR code generated will be invalid.|
32
33## Attributes
34
35In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
36
37### color
38
39color(value: ResourceColor)
40
41Sets the color of the QR code.
42
43**Widget capability**: This API can be used in ArkTS widgets since API version 9.
44
45**Atomic service API**: This API can be used in atomic services since API version 11.
46
47**System capability**: SystemCapability.ArkUI.ArkUI.Full
48
49**Parameters**
50
51| Name| Type                                      | Mandatory| Description        |
52| ------ | ------------------------------------------ | ---- | ------------ |
53| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | QR code color. The default value is **'#ff000000'** and does not change with the system color mode.<br>|
54
55### backgroundColor
56
57backgroundColor(value: ResourceColor)
58
59Sets the background color of the QR code.
60
61**Widget capability**: This API can be used in ArkTS widgets since API version 9.
62
63**Atomic service API**: This API can be used in atomic services since API version 11.
64
65**System capability**: SystemCapability.ArkUI.ArkUI.Full
66
67**Parameters**
68
69| Name| Type                                      | Mandatory| Description                                                        |
70| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
71| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Background color of the QR code.<br>Default value: **Color.White**<br>Since API version 11, the default value is **'#ffffffff'** and does not change with the system color mode.|
72
73### contentOpacity<sup>11+</sup>
74
75contentOpacity(value: number | Resource)
76
77Sets the opacity of the QR code content. The minimum value is 0, and the maximum value is 1.
78
79**Atomic service API**: This API can be used in atomic services since API version 12.
80
81**System capability**: SystemCapability.ArkUI.ArkUI.Full
82
83**Parameters**
84
85| Name| Type                                                | Mandatory| Description                                    |
86| ------ | ---------------------------------------------------- | ---- | ---------------------------------------- |
87| value  | number \| [Resource](ts-types.md#resource) | Yes  | Opacity of the QR code content.<br>Default value: **1**|
88
89
90## Events
91
92Among the universal events, the [click event](ts-universal-events-click.md), [touch event](ts-universal-events-touch.md), and [show/hide event](ts-universal-events-show-hide.md) are supported.
93
94
95## Example
96
97This example demonstrates the basic usage of the **QRCode** component. It shows how to set the QR code color using the **color** attribute, the background color using the **backgroundColor** attribute, and the opacity using the **contentOpacity** attribute.
98
99```ts
100// xxx.ets
101@Entry
102@Component
103struct QRCodeExample {
104  private value: string = 'hello world'
105  build() {
106    Column({ space: 5 }) {
107      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
108      QRCode(this.value).width(140).height(140)
109
110      // Set the color of the QR code.
111      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
112      QRCode(this.value).color(0xF7CE00).width(140).height(140)
113
114      // Set the background color of the QR code.
115      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
116      QRCode(this.value).width(140).height(140).backgroundColor(Color.Orange)
117
118      // Set the opacity of QR code content.
119      Text('contentOpacity').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
120      QRCode(this.value).width(140).height(140).color(Color.Black).contentOpacity(0.1)
121    }.width('100%').margin({ top: 5 })
122  }
123}
124```
125
126![qrcode](figures/qrcode.png)
127