0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙ArkTS声明式组件:QRCode

jf_46214456 来源:jf_46214456 作者:jf_46214456 2024-06-28 11:37 次阅读

QRCode

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

说明:
开发前请熟悉鸿蒙开发指导文档 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]
该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

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

子组件

接口

QRCode(value: string)

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

参数:

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

属性

除支持[通用属性]外,还支持以下属性。

新文档.png

名称参数类型HarmonyOSOpenHarmony鸿蒙文档籽料:mau123789是v直接拿描述
color[ResourceColor]设置二维码颜色。 默认值:Color.Black 从API version 9开始,该接口支持在ArkTS卡片中使用。 从API version 11开始,默认值改为'#ff182431'。
backgroundColor[ResourceColor]设置二维码背景颜色。 默认值:Color.White 从API version 9开始,该接口支持在ArkTS卡片中使用。 从API version 11开始,默认值改为'#ffffffff'。
contentOpacity11+[number][Resource]

事件

通用事件支持[点击事件]、[触摸事件]、[挂载卸载事件]。

示例

// 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)
    }.width('100%').margin({ top: 5 })
  }
}

qrcode

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • 组件
    +关注

    关注

    1

    文章

    425

    浏览量

    17661
  • 鸿蒙
    +关注

    关注

    55

    文章

    2103

    浏览量

    42272
收藏 人收藏

    评论

    相关推荐

    鸿蒙ArkTS的起源和简介

    1、引言 Mozilla创造了JS,Microsoft创建了TS,Huawei进一步推出了ArkTS。 从最初的基础的逻辑交互能力,到具备类型系统的高效工程开发能力,再到融合声明UI、多维状态管理
    发表于 01-16 16:23

    鸿蒙入门实战-ArkTS开发

    声明UI基本概念 应用界面是由一个个页面组成,ArkTS是由ArkUI框架提供,用于以声明开发范式开发界面的语言。
    发表于 01-16 17:27

    HarmonyOS/OpenHarmony应用开发-ArkTS声明开发范式

    轨迹。状态与数据管理状态数据管理作为基于ArkTS声明开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协
    发表于 01-17 15:09

    HarmonyOS/OpenHarmony应用开发-声明开发范式组件汇总

    组件是构建页面的核心,每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。组件之间相互独立,随取随用,也可以在需求相同的地方重复使用。声明
    发表于 01-19 11:14

    鸿蒙开发之ArkTS基础知识

    一、ArkTS简介 ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript(简称TS)的基础上,匹配了鸿蒙的ArkUI框架,扩展了声明式UI、状态管理等相应的能
    的头像 发表于 01-24 16:44 1185次阅读
    <b class='flag-5'>鸿蒙</b>开发之<b class='flag-5'>ArkTS</b>基础知识

    鸿蒙ArkTS声明组件:Blank

    空白填充组件,在容器主轴方向上,空白填充组件具有自动填充容器空余部分的能力。仅当父组件为Row/Column/Flex时生效。
    的头像 发表于 06-19 16:21 219次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:Blank

    鸿蒙ArkTS声明组件:Checkbox

    提供多选框组件,通常用于某选项的打开或关闭。
    的头像 发表于 06-20 15:36 180次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:Checkbox

    鸿蒙ArkTS声明组件:DataPanel

    数据面板组件,用于将多个数据占比情况使用占比图进行展示。
    的头像 发表于 06-21 09:42 134次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:DataPanel

    鸿蒙ArkTS声明组件:DatePicker

    日期选择器组件,用于根据指定日期范围创建日期滑动选择器。
    的头像 发表于 06-21 16:46 134次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:DatePicker

    鸿蒙ArkTS声明组件:【Divider】

    提供分隔器组件,分隔不同内容块/内容元素。
    的头像 发表于 06-22 10:06 170次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:【Divider】

    鸿蒙ArkTS声明组件:【Gauge】

    数据量规图表组件,用于将数据展示为环形图表。
    的头像 发表于 06-22 10:10 137次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:【Gauge】

    鸿蒙ArkTS声明组件:LoadingProgress

    用于显示加载动效的组件
    的头像 发表于 06-24 16:53 188次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:LoadingProgress

    鸿蒙ArkTS声明组件:Marquee

    跑马灯组件,用于滚动展示一段单行文本。仅当文本内容宽度超过跑马灯组件宽度时滚动,不超过时不滚动。
    的头像 发表于 06-25 15:52 154次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:Marquee

    鸿蒙ArkTS声明组件:PatternLock

    图案密码锁组件,以九宫格图案的方式输入密码,用于密码验证场景。手指在PatternLock组件区域按下时开始进入输入状态,手指离开屏幕时结束输入状态完成密码输入。
    的头像 发表于 06-27 09:59 119次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:PatternLock

    鸿蒙ArkTS声明组件:【RichText】

    富文本组件,解析并显示HTML格式文本。
    的头像 发表于 06-29 09:35 93次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>ArkTS</b><b class='flag-5'>声明</b>式<b class='flag-5'>组件</b>:【RichText】