1# QRCode 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @liyujie43--> 5<!--Designer: @weixin_52725220--> 6<!--Tester: @xiong0104--> 7<!--Adviser: @HelloCrease--> 8 9用于显示单个二维码的组件。 10 11> **说明：** 12> 13> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> 二维码组件的像素点数量与内容有关，组件尺寸过小可能导致内容无法展示，此时需要适当调整组件尺寸。 16 17 18## 子组件 19 20无 21 22 23## 接口 24 25QRCode(value: ResourceStr) 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33**参数：** 34 35| 参数名 | 类型 | 必填 | 说明 | 36| -------- | -------- | -------- | -------- | 37| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 二维码内容字符串。最大支持512个字符，若超出，则截取前512个字符。 <br>从API version 20开始，支持Resource类型。 <br/>**说明：** <br/>该字符串内容必须有效，不支持null、undefined以及空内容，当传入上述内容时，将生成无效二维码。 | 38 39## 属性 40 41除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 42 43### color 44 45color(value: ResourceColor) 46 47设置二维码颜色。 48 49**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 50 51**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 52 53**系统能力：** SystemCapability.ArkUI.ArkUI.Full 54 55**参数：** 56 57| 参数名 | 类型 | 必填 | 说明 | 58| ------ | ------------------------------------------ | ---- | ------------ | 59| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 二维码颜色。默认值：'#ff000000'，且不跟随系统深浅色模式切换而修改。<br/> | 60 61### backgroundColor 62 63backgroundColor(value: ResourceColor) 64 65设置二维码背景颜色。 66 67**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 68 69**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73**参数：** 74 75| 参数名 | 类型 | 必填 | 说明 | 76| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 77| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 二维码背景颜色。<br/>默认值：Color.White <br/>从API version 11开始，默认值改为'#ffffffff'，且不跟随系统深浅色模式切换而修改。 | 78 79### contentOpacity<sup>11+</sup> 80 81contentOpacity(value: number | Resource) 82 83设置二维码内容颜色的不透明度。不透明度最小值为0，最大值为1。 84 85**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 86 87**系统能力：** SystemCapability.ArkUI.ArkUI.Full 88 89**参数：** 90 91| 参数名 | 类型 | 必填 | 说明 | 92| ------ | ---------------------------------------------------- | ---- | ---------------------------------------- | 93| value | number \| [Resource](ts-types.md#resource) | 是 | 二维码内容颜色的不透明度。<br/>默认值：1<br/>取值范围：[0, 1]，超出取值范围按默认值处理。 | 94 95 96## 事件 97 98通用事件支持[点击事件](ts-universal-events-click.md)、[触摸事件](ts-universal-events-touch.md)和[挂载卸载事件](ts-universal-events-show-hide.md)。 99 100## 示例 101 102### 示例1（设置颜色、背景颜色、不透明度） 103 104该示例展示了QRCode组件的基本使用方法，通过[color](#color)属性设置二维码颜色、[backgroundColor](#backgroundcolor)属性设置二维码背景颜色、[contentOpacity](#contentopacity11)属性设置二维码不透明度。 105 106```ts 107// xxx.ets 108@Entry 109@Component 110struct QRCodeExample { 111 private value: string = 'hello world'; 112 113 build() { 114 Column({ space: 5 }) { 115 Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 116 QRCode(this.value).width(140).height(140) 117 118 // 设置二维码颜色 119 Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 120 QRCode(this.value).color(0xF7CE00).width(140).height(140) 121 122 // 设置二维码背景色 123 Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 124 QRCode(this.value).width(140).height(140).backgroundColor(Color.Orange) 125 126 // 设置二维码不透明度 127 Text('contentOpacity').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) 128 QRCode(this.value).width(140).height(140).color(Color.Black).contentOpacity(0.1) 129 }.width('100%').margin({ top: 5 }) 130 } 131} 132``` 133 134 135 136### 示例2（设置背景颜色为透明） 137 138该示例通过[backgroundColor](#backgroundcolor)属性设置二维码背景颜色为透明，从而实现二维码内容与背景融合。 139 140```ts 141// xxx.ets 142@Entry 143@Component 144struct QRCodeExample { 145 private value: string = 'hello world'; 146 147 build() { 148 Column({ space: 5 }) { 149 RelativeContainer() { 150 // $r('app.media.ocean')需要替换为开发者所需的图像资源文件。 151 Image($r('app.media.ocean')) 152 // 设置二维码背景色为透明 153 QRCode(this.value).width(200).height(200).backgroundColor("#00ffffff") 154 }.width(200).height(200) 155 }.width('100%').margin({ top: 5 }) 156 } 157} 158``` 159 160
