OpenHarmony短信倒計(jì)時(shí)
??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??
??51CTO 開(kāi)源基礎(chǔ)軟件社區(qū)??
1、背景
倒計(jì)時(shí)的效果在網(wǎng)站或其他平臺(tái)看到的很多了吧,今天就讓我們來(lái)看看在OpenHarmony中如何實(shí)現(xiàn)它吧!
2、效果預(yù)覽
視頻效果演示:
https://www.bilibili.com/video/BV1184y1z7SU/。
開(kāi)發(fā)板:DAYU200
IDE:DevEco Studio 3.0 Release Build Version: 3.0.0.993。
API:9
3、思路:
1.獲取Input框輸入值,判斷手機(jī)號(hào)碼是否正確,不正確的話,彈窗提示。
2.設(shè)置按鈕倒計(jì)時(shí),設(shè)置默認(rèn)sec=60,點(diǎn)擊后開(kāi)始計(jì)數(shù),每秒減1。
3.封裝倒計(jì)時(shí)函數(shù),獲取數(shù)字,設(shè)置定時(shí)器,如果倒計(jì)時(shí)為0,就停止計(jì)時(shí)。
好的,接下來(lái)我們看一下代碼實(shí)現(xiàn)。
4、創(chuàng)建應(yīng)用
5、刪除原有代碼
刪除原有代碼,導(dǎo)入圖片資源,做好準(zhǔn)備工作。
6、編寫(xiě)代碼,實(shí)現(xiàn)功能
(1)布局拆分
首先我們來(lái)看一下布局,然后將布局分解成它的各個(gè)基礎(chǔ)元素:
- 識(shí)別出它的行和列。
- 這個(gè)布局是否包含網(wǎng)格布局?
- 是否有重疊的元素?
- 界面是否需要選項(xiàng)卡?
- 留意需要對(duì)齊、內(nèi)間距、或者邊界的區(qū)域。
首先,識(shí)別出稍大的元素。在這個(gè)例子中,一個(gè)重疊圖像,兩個(gè)行區(qū)域,和一個(gè)文本區(qū)域。
2、實(shí)現(xiàn)堆疊布局
首先是背景圖片,我們采用堆疊布局,用Stack來(lái)展示背景并鋪滿(mǎn)整個(gè)頁(yè)面。
3、實(shí)現(xiàn)文本展示
第一行為一個(gè)文本展示,我們用Text來(lái)展示。
4、實(shí)現(xiàn)輸入框
5、實(shí)現(xiàn)短信驗(yàn)證碼按鈕
6、定時(shí)器的實(shí)現(xiàn)
7、簽名及真機(jī)調(diào)試
將搭載OpenHarmony標(biāo)準(zhǔn)系統(tǒng)的開(kāi)發(fā)板與電腦連接。
點(diǎn)擊File> Project Structure… > Project>SigningConfigs界面勾選“Automatically generate signing”,等待自動(dòng)簽名完成即可,點(diǎn)擊“OK”。如下圖所示:
在編輯窗口右上角的工具欄,點(diǎn)擊
按鈕運(yùn)行。效果如下所示:
??想了解更多關(guān)于開(kāi)源的內(nèi)容,請(qǐng)?jiān)L問(wèn):??