本项目Gitee仓地址:深入浅出eTs学习: 带大家深入浅出学习eTs (gitee.com)
一、需求分析
我们本章的内容是要制作一个可以随着自己想要内容而变化的一个二维码,通过输入框输入内容,实现二维码图形的改变
- 通过输入框输入内容
- 使用按钮进行改变
- 使用二维码进行显示
二、控件介绍
这里我们使用的是官方提供的QR控件
QRCode
用于显示单个二维码的组件。
说明: 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
interface QRCodeInterface {
(value: string): QRCodeAttribute;
}
QRCode('Hello, OpenHarmony')
.width(70)
.height(70)
复制
简单样例如上图程序
三、UI绘制
(1)我们首先需要建立一个输入框,同时绑定一下输入框的内容(因为预览器不能实现输入功能)
@State message: string = 'Hello OpenHarmony'
TextInput({
placeholder: this.message,
})
.width('80%')
复制
得到上方内容,此时我们可以通过对message变量的修改实现内容的改变
(2)接下来创建按钮
Button('点击生成二维码')
.fontSize(20)
.margin({top:20})
复制
我们这里使用到了margin参数,该参数描述如下:
名称 | 参数说明 | 默认值 | 描述 |
---|---|---|---|
margin | { top?: Length, right?: Length, bottom?: Length, left?: Length } | Length | 0 | 设置外边距属性。 参数为Length类型时,四个方向外边距同时生效。 |
因为我们只需要在上面实现一个移位效果,这样看起来更正常
未移位的效果
移位后的效果
(3)使用QRcode控件
QRCode(this.message)
.width(170)
.height(170)
.margin({bottom:20})
TextInput({
placeholder: this.message,
})
.width('80%')
Button('点击生成二维码')
.fontSize(20)
.margin({top:20})
复制
二维码的生成要在输入框的上面,所以这里将其放置在上部,内容比较简洁,同时使用了margin对底部进行了移位,更加美观
四、系统测试
如上图所示,完美实现预期,后期大家可以进行调色之类,比如说健康码变红了?
当然,还是希望大家永不变红,大家可以下载(在第一行有Gitee仓地址)或者按照流程来自己写一个绿码的内容。
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。
举报投诉
-
代码
+关注
关注
30文章
4555浏览量
66772 -
OpenHarmony
+关注
关注
23文章
3297浏览量
15159
发布评论请先 登录
相关推荐
labview生成二维码
《龙哥labview手把手视觉设计》报名链接:http://url.elecfans.com/u/6263fe4e25《双ccd+视觉通用框架-LabVIEW视觉必学高阶课程》报名链接:http://url.elecfans.com/u/78643b3008labview生成二维
发表于 05-15 09:42
如何通过机智云接口生成设备对应的二维码
摘要:机智云APP SDK中预留了一个扫描二维码绑定接口,APP可以通过扫描GPRS设备(WiFi设备也可)二位码直接绑定设备。本文主要介绍如何通过机智云接口生成设备对应的二维码。步骤
发表于 09-20 08:19
二维码软件中制作Dot Code二维码的步骤
,手动输入要编辑的信息,点击编辑-确定,Dot Code二维码就生成了。 Dot Code二维码支持多种格式、方向、模式、大小、掩码等,如有需求可以根据自己的需求在图形属性-条码-Dot
发表于 12-02 15:45
HarmonyOS教程—基于AI的码生成能力,实现二维码生成与扫码功能
= imageSource.createPixelmap(null);7. 恭喜你 通过本教程的学习,你已学会了如何生成常用二维码、识别二维码、实现
发表于 08-30 14:01
OpenHarmony应用开发之二维码生成器
OpenHarmony应用开发之二维码生成器作者:坚果公众号:"大前端之旅"OpenHarmony布道师,InfoQ签约作者,CSDN博客专家,华为云享专家,阿里云专家博主
发表于 07-01 18:02
OpenHarmony应用实现二维码扫码识别
应用的扫描二维码的页面。
本文就以橘子购物示例应用为例,来讲解OpenHarmony应用二维码开发相关的技术点。
我们先看下二维码相关的几个概念。
● 二维码
发表于 08-23 17:00
评论