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

一、需求分析

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

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

二、控件介紹

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

QRCode

用于顯示單個二維碼的組件。

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

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

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

復(fù)制

簡單樣例如上圖程序

三、UI繪制

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

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

復(fù)制

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

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

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

復(fù)制

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

因為我們只需要在上面實現(xiàn)一個移位效果，這樣看起來更正常

未移位的效果

移位后的效果

（3）使用QRcode控件

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

復(fù)制

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

四、系統(tǒng)測試

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

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