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

需求分析如下：

通過輸入框輸入內(nèi)容

使用按鈕進(jìn)行改變

使用二維碼進(jìn)行顯示

控件介紹

這里我們使用的是官方提供的 QR 控件：QRCode，這是一個(gè)用于顯示單個(gè)二維碼的組件。 說明：該組件從 API Version 7 開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

簡單樣例如下面程序：

interfaceQRCodeInterface{
(value:string):QRCodeAttribute;
}

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

UI 繪制

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

@Statemessage:string='HelloOpenHarmony'
TextInput({
placeholder:this.message,
})
.width('80%')

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

②接下來創(chuàng)建按鈕：

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

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

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

未移位的效果：

移位后的效果。

③使用 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})

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

系統(tǒng)測試

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


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

項(xiàng)目 Gitee 倉地址：

https://gitee.com/lalhan/eTs_Study