本項(xiàng)目Gitee倉(cāng)地址：深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)

一、需求分析

我們本章的內(nèi)容是要制作一個(gè)可以隨著自己想要內(nèi)容而變化的一個(gè)二維碼，通過(guò)輸入框輸入內(nèi)容，實(shí)現(xiàn)二維碼圖形的改變

• 通過(guò)輸入框輸入內(nèi)容
• 使用按鈕進(jìn)行改變
• 使用二維碼進(jìn)行顯示

二、控件介紹

這里我們使用的是官方提供的QR控件

QRCode

用于顯示單個(gè)二維碼的組件。

說(shuō)明： 該組件從API Version 7開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

interface QRCodeInterface {
  (value: string): QRCodeAttribute;
}

QRCode('Hello, OpenHarmony')
  .width(70)
  .height(70)

復(fù)制

簡(jiǎn)單樣例如上圖程序

三、UI繪制

（1）我們首先需要建立一個(gè)輸入框，同時(shí)綁定一下輸入框的內(nèi)容（因?yàn)轭A(yù)覽器不能實(shí)現(xiàn)輸入功能）

          @State message: string = 'Hello OpenHarmony'
		  TextInput({
          placeholder: this.message,
        })
          .width('80%')
            

復(fù)制

得到上方內(nèi)容，此時(shí)我們可以通過(guò)對(duì)message變量的修改實(shí)現(xiàn)內(nèi)容的改變

（2）接下來(lái)創(chuàng)建按鈕

        Button('點(diǎn)擊生成二維碼')
          .fontSize(20)
          .margin({top:20})

復(fù)制

我們這里使用到了margin參數(shù)，該參數(shù)描述如下：

因?yàn)槲覀冎恍枰谏厦鎸?shí)現(xiàn)一個(gè)移位效果，這樣看起來(lái)更正常

未移位的效果

移位后的效果

（3）使用QRcode控件

        QRCode(this.message)
          .width(170)
          .height(170)
          .margin({bottom:20})
        TextInput({
          placeholder: this.message,
        })
          .width('80%')
        Button('點(diǎn)擊生成二維碼')
          .fontSize(20)
          .margin({top:20})

復(fù)制

二維碼的生成要在輸入框的上面，所以這里將其放置在上部，內(nèi)容比較簡(jiǎn)潔，同時(shí)使用了margin對(duì)底部進(jìn)行了移位，更加美觀

四、系統(tǒng)測(cè)試

如上圖所示，完美實(shí)現(xiàn)預(yù)期，后期大家可以進(jìn)行調(diào)色之類，比如說(shuō)健康碼變紅了？

當(dāng)然，還是希望大家永不變紅，大家可以下載（在第一行有Gitee倉(cāng)地址）或者按照流程來(lái)自己寫(xiě)一個(gè)綠碼的內(nèi)容。