#深入浅出学习eTs#（九）变红码？专属二维码生成
本项目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仓地址）或者按照流程来自己写一个绿码的内容。
2021 年新能源汽车补贴标准在 2020 年基础上退坡 20%
陈乔恩 林允 董力带来OPPO R9s清新绿时尚LOOK
张小飞博士：LED产业的确定和战略选择
工业领域：国内哪个SCADA组态软件最好用？
微型无人机如何通过将自己固定在地面或墙壁上来强力拉动40倍于自身重量的物体
#深入浅出学习eTs#（九）变红码？专属二维码生成
高交会掀绿色低碳潮,“风光”企业拼LED应用
品牌荣誉｜海伯森再度斩获恰佩克“年度创新品牌奖”
全球半导体投资规模持续攀升，探针台市场逐年增长
广西正式出台了加快5G产业发展的三年行动计划
科瑞金属单双张传感器在PCB行业中的应用解析
彩色套件创建全彩3D模型MagicSwiftPlus仅千元级
#define和typedef的真正区别
工业机器人需求旺盛 行业存在低水平竞争现象
全球值得关注AI公司榜单出炉 5家企业潜力无限
除了3D手势识别，VR交互技术还有哪些？
设计外围电路必须知道的概念
首个波士顿动力机器狗化身监工，确认路线后就能自动巡航
津南将建中国物联网产业示范核心区
可以随时监测周围环境的信息的“小瓶盖”智能传感器
通过输入框输入内容 使用按钮进行改变 使用二维码进行显示 二、控件介绍 这里我们使用的是官方提供的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仓地址）或者按照流程来自己写一个绿码的内容。
2021 年新能源汽车补贴标准在 2020 年基础上退坡 20%
陈乔恩 林允 董力带来OPPO R9s清新绿时尚LOOK
张小飞博士：LED产业的确定和战略选择
工业领域：国内哪个SCADA组态软件最好用？
微型无人机如何通过将自己固定在地面或墙壁上来强力拉动40倍于自身重量的物体
#深入浅出学习eTs#（九）变红码？专属二维码生成
高交会掀绿色低碳潮,“风光”企业拼LED应用
品牌荣誉｜海伯森再度斩获恰佩克“年度创新品牌奖”
全球半导体投资规模持续攀升，探针台市场逐年增长
广西正式出台了加快5G产业发展的三年行动计划
科瑞金属单双张传感器在PCB行业中的应用解析
彩色套件创建全彩3D模型MagicSwiftPlus仅千元级
#define和typedef的真正区别
工业机器人需求旺盛 行业存在低水平竞争现象
全球值得关注AI公司榜单出炉 5家企业潜力无限
除了3D手势识别，VR交互技术还有哪些？
设计外围电路必须知道的概念
首个波士顿动力机器狗化身监工，确认路线后就能自动巡航
津南将建中国物联网产业示范核心区
可以随时监测周围环境的信息的“小瓶盖”智能传感器