鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之QRCode组件

news2024/11/19 13:19:27

一、操作环境

操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1+

二、QRCode组件

用于显示单个二维码的组件。

子组件

无。

接口

QRCode(value: string)

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

构造参数

参数名	参数类型	必填	参数描述
value	string	是	二维码内容字符串。最大支持256个字符，若超出，则截取前256个字符。说明：该字符串内容确保有效，不支持null、undefined以及空内容。

参数名

参数类型

必填

参数描述

value

string

是

二维码内容字符串。最大支持256个字符，若超出，则截取前256个字符。

说明：

该字符串内容确保有效，不支持null、undefined以及空内容。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
color	ResourceColor	设置二维码颜色。默认值：Color.Black 从API version 9开始，该接口支持在ArkTS卡片中使用。
backgroundColor	ResourceColor	设置二维码背景颜色。默认值：Color.White 从API version 9开始，该接口支持在ArkTS卡片中使用。

名称

参数类型

描述

color

ResourceColor

设置二维码颜色。

默认值：Color.Black

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

backgroundColor

ResourceColor

设置二维码背景颜色。

默认值：Color.White

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

三、示例

代码

// 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(200).height(200)

      // 设置二维码颜色
      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).color(0xF7CE00).width(200).height(200)

      // 设置二维码背景色
      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
    }.width('100%').margin({ top: 5 })
  }
}