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**Parameters** 
26
27| Name | Type | Mandatory | Description |
28| -------- | -------- | -------- | -------- |
29| value | string | Yes | Content of the QR code. A maximum of 256 characters are supported. If this limit is exceeded, the first 256 characters are used.<br>**NOTE**<br>The string cannot be **null**, **undefined**, or empty. |
30
31## Attributes
32
33In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
34
35### color
36
37color(value: ResourceColor)
38
39Sets the color of the QR code.
40
41**Widget capability**: This API can be used in ArkTS widgets since API version 9.
42
43**Atomic service API**: This API can be used in atomic services since API version 11.
44
45**System capability**: SystemCapability.ArkUI.ArkUI.Full
46
47**Parameters** 
48
49| Name | Type                                      | Mandatory | Description        |
50| ------ | ------------------------------------------ | ---- | ------------ |
51| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | QR code color. Default value: **'#ff182431'**<br> |
52
53### backgroundColor
54
55backgroundColor(value: ResourceColor)
56
57Sets the background color of the QR code.
58
59**Widget capability**: This API can be used in ArkTS widgets since API version 9.
60
61**Atomic service API**: This API can be used in atomic services since API version 11.
62
63**System capability**: SystemCapability.ArkUI.ArkUI.Full
64
65**Parameters** 
66
67| Name | Type                                      | Mandatory | Description                                                        |
68| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ |
69| 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 changed to **'#ffffffff'**. |
70
71### contentOpacity<sup>11+</sup>
72
73contentOpacity(value: number | Resource)
74
75Sets the opacity of the QR code content. The minimum value is 0, and the maximum value is 1.
76
77**Atomic service API**: This API can be used in atomic services since API version 12.
78
79**System capability**: SystemCapability.ArkUI.ArkUI.Full
80
81**Parameters** 
82
83| Name | Type                                                | Mandatory | Description                                    |
84| ------ | ---------------------------------------------------- | ---- | ---------------------------------------- |
85| value  | number \| [Resource](ts-types.md#resource) | Yes  | Opacity of the QR code content.<br>Default value: **1** |
86
87
88## Events
89
90Among 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.
91
92
93## Example
94
95```ts
96// xxx.ets
97@Entry
98@Component
99struct QRCodeExample {
100  private value: string = 'hello world'
101  build() {
102    Column({ space: 5 }) {
103      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
104      QRCode(this.value).width(140).height(140)
105
106      // Set the color for the QR code.
107      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
108      QRCode(this.value).color(0xF7CE00).width(140).height(140)
109
110      // Set the background color for the QR code.
111      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
112      QRCode(this.value).width(140).height(140).backgroundColor(Color.Orange)
113
114      // Set the opacity of QR code content.
115      Text('contentOpacity').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
116      QRCode(this.value).width(140).height(140).color(Color.Black).contentOpacity(0.1)
117    }.width('100%').margin({ top: 5 })
118  }
119}
120```
121
122![qrcode](figures/qrcode.png)
123