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 21Since API version 9, this API is supported in ArkTS widgets. 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| 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.| 28 29## Attributes 30 31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 32 33| Name| Type| Description| 34| -------- | -------- | -------- | 35| color | [ResourceColor](ts-types.md#resourcecolor) | Color of the QR code.<br>Default value: **Color.Black**<br>Since API version 9, this API is supported in ArkTS widgets.| 36| backgroundColor | [ResourceColor](ts-types.md#resourcecolor) | Background color of the QR code.<br>Default value: **Color.White**<br>Since API version 9, this API is supported in ArkTS widgets.| 37 38 39## Events 40 41Among 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. 42 43 44## Example 45 46```ts 47// xxx.ets 48@Entry 49@Component 50struct QRCodeExample { 51 private value: string = 'hello world' 52 build() { 53 Column({ space: 5 }) { 54 Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 55 QRCode(this.value).width(200).height(200) 56 57 // Set the color for the QR code. 58 Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 59 QRCode(this.value).color(0xF7CE00).width(200).height(200) 60 61 // Set the background color for the QR code. 62 Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 63 QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange) 64 }.width('100%').margin({ top: 5 }) 65 } 66} 67``` 68 69 70
