HarmonyOS 6 QRCode 组件使用文档

QRCode 组件基础说明

QRCode是HarmonyOS 6 内置的二维码生成组件，可快速将字符串内容生成标准二维码，支持自定义二维码颜色、背景颜色、内容不透明度、尺寸等样式，无需第三方依赖，直接在.ets文件中调用。

核心特性

1. 自动生成标准二维码，支持文本、链接等字符串内容；
2. 支持自定义二维码前景色、背景色、内容不透明度；
3. 可通过width/height设置二维码尺寸，适配不同布局场景；
4. 属于基础UI组件，无额外权限要求，全设备兼容。

完整示例代码

// 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) // 设置二维码颜色 Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) QRCode(this.value).color(0xF7CE00).width(140).height(140) // 设置二维码背景色 Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30) QRCode(this.value).width(140).height(140).backgroundColor(Color.Orange) // 设置二维码不透明度 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 }) } }

整体运行效果如图：

组件基础用法

1. 组件初始化

QRCode组件必须传入字符串类型的参数作为二维码的解析内容，扫码后可读取该文本。

语法：

QRCode(content: string)

示例：

// 定义二维码内容 private value: string = 'hello world'; // 创建二维码 QRCode(this.value)

2. 尺寸设置

通过.width()和.height()设置二维码的宽度和高度，单位默认vp（HarmonyOS标准自适应单位）。

// 固定二维码尺寸为 140vp × 140vp QRCode(this.value).width(140).height(140)

核心样式属性详解

围绕颜色、背景色、不透明度三个核心属性展开，对应示例中4种展示效果：默认样式、自定义颜色、自定义背景色、自定义不透明度。

1. 默认样式（normal）

不配置任何颜色/不透明度属性，使用系统默认样式：

• 二维码颜色：黑色（系统默认）
• 背景颜色：白色（系统默认）
• 不透明度：1.0（完全不透明）

代码：

QRCode(this.value).width(140).height(140)

2. color()：设置二维码前景色

用于设置二维码图案本身的颜色，支持：

• 十六进制色值（如0xF7CE00）
• 系统内置颜色常量（如Color.Black）

语法：

.color(color: Color | number | string)

示例代码：

// 将二维码颜色设置为金色 QRCode(this.value).color(0xF7CE00).width(140).height(140)

3. backgroundColor()：设置二维码背景色

用于设置二维码的背景填充颜色，支持系统Color枚举、十六进制、字符串色值。

语法：

.backgroundColor(color: Color | number | string)

示例代码：

// 将背景色设置为橙色 QRCode(this.value).width(140).height(140).backgroundColor(Color.Orange)

4. contentOpacity()：设置二维码内容不透明度

用于设置二维码图案的透明度，不影响背景色。

• 取值范围：0.0 ~ 1.0
• 0.0：完全透明
• 1.0：完全不透明（默认值）

语法：

.contentOpacity(value: number)

示例代码：

// 设置二维码为半透明效果（透明度0.1） QRCode(this.value).width(140).height(140).color(Color.Black).contentOpacity(0.1)

属性参数对照表

运行效果说明

基于示例代码，运行后界面会垂直展示4组二维码：

1. normal：默认黑白色二维码，完全不透明，尺寸140vp×140vp；
2. color：金色二维码，白色背景，完全不透明；
3. backgroundColor：黑色二维码，橙色背景，完全不透明；
4. contentOpacity：黑色二维码，白色背景，极低透明度（几乎透明）。

总结

1. HarmonyOS 6QRCode组件可快速生成二维码，核心样式属性为color（前景色）、backgroundColor（背景色）、contentOpacity（不透明度）；
2. 组件使用极简，仅需传入文本内容+配置样式，无需复杂逻辑；
3. 示例代码覆盖了默认样式、自定义颜色、背景色、透明度四大常用场景，可直接复用。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力