#跟着若城学鸿蒙# UI组件篇-QRCode及其属性

最新推荐文章于 2025-05-20 23:40:55 发布

Huang兄

最新推荐文章于 2025-05-20 23:40:55 发布

阅读量854

点赞数 29

文章标签： harmonyos

本文链接：https://blog.csdn.net/huangyuan_xuan/article/details/148070525

版权

QRCode（二维码）组件是ArkUI框架中用于显示单个二维码的基础组件，它提供了丰富的属性配置能力，可以满足不同场景下的二维码展示需求。本文将全面介绍QRCode组件的功能特性、使用方法以及实际应用示例。

QRCode组件概述

QRCode组件从API Version 7开始支持，可以在ArkTS卡片和原子化服务中使用。它的主要功能是根据输入的字符串内容生成并显示对应的二维码图像。

基本特性

QRCode组件具有以下核心特性：

支持设置二维码颜色和背景颜色
支持调整不透明度
支持设置二维码内容字符串
自动处理超长内容（截取前512个字符）
支持自适应尺寸调整

说明：

二维码组件的像素点数量与内容有关，当组件尺寸过小时，可能出现无法展示内容的情况，此时需要适当调整组件尺寸。

组件接口

QRCode组件通过以下接口创建：

QRCode(value: string)

参数说明：

参数名	类型	必填	说明
value	string	是	二维码内容字符串。最大支持512个字符，若超出则截取前512个字符。不支持null、undefined以及空内容，传入这些值将生成无效二维码。

卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API：从API version 11开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

组件属性

QRCode组件除支持通用属性外，还支持以下特有属性：

color

设置二维码颜色。

color(value: ResourceColor)

参数说明：

参数名	类型	必填	说明
value	ResourceColor	是	二维码颜色。默认值：'#ff000000'，且不跟随系统深浅色模式切换而修改。

卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API：从API version 11开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

backgroundColor

设置二维码背景颜色。

backgroundColor(value: ResourceColor)

参数说明：

参数名	类型	必填	说明
value	ResourceColor	是	二维码背景颜色。默认值：Color.White 从API version 11开始，默认值改为'#ffffffff'，且不跟随系统深浅色模式切换而修改。

卡片能力：从API version 9开始，该接口支持在ArkTS卡片中使用。

原子化服务API：从API version 11开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

contentOpacity11+

设置二维码内容颜色的不透明度。

contentOpacity(value: number | Resource)

参数说明：

参数名	类型	必填	说明
value	number	Resource	是

原子化服务API：从API version 12开始，该接口支持在原子化服务中使用。

系统能力：SystemCapability.ArkUI.ArkUI.Full

组件事件

QRCode组件支持通用事件，包括：

点击事件
触摸事件
挂载卸载事件

基本使用示例

以下示例展示了QRCode组件的基本使用方法，通过color属性设置二维码颜色、backgroundColor属性设置二维码背景颜色、contentOpacity属性设置二维码不透明度。

@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
}