《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件 實操 項目2-任務(wù)5 開發(fā)登錄頁

任務(wù)5開發(fā)登錄頁項目2走進ArkTS聲明式開發(fā)任務(wù)5

開發(fā)登錄頁本任務(wù)使用輸入組件、按鈕組件、開關(guān)組件和提示框模塊，完成登錄頁的開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源最外層布局設(shè)計Logo區(qū)設(shè)計用戶名/密碼區(qū)設(shè)計添加狀態(tài)變量06記住密碼區(qū)設(shè)計07登錄按鈕區(qū)設(shè)計08封裝消息提示函數(shù)01整理工程資源

02最外層布局設(shè)計

登錄頁面最外層用垂直方向的Cloumn布局，內(nèi)嵌Logo區(qū)域、用戶名和密碼輸入?yún)^(qū)域、記住密碼區(qū)域和登錄按鈕區(qū)域，內(nèi)嵌的組件居中對齊。03Logo區(qū)設(shè)計

Logo區(qū)是一個Image組件，使用應(yīng)用的資源圖片logo.png，設(shè)置寬度200，寬高比為1，底部距離下一個組件80。04添加狀態(tài)變量

輸入的用戶名和密碼，以及記住密碼的開關(guān)狀態(tài)，需要使用狀態(tài)變量進行記錄。05用戶名/密碼區(qū)設(shè)計

用戶名/密碼區(qū)外層是一個Column，里面用兩個Row，分別是用戶名和密碼所在的行；用戶名區(qū)域用了權(quán)重設(shè)置，密碼區(qū)用了寬度設(shè)置，用來比較設(shè)置寬度和權(quán)重的效果；輸入的用戶名和密碼選擇了不同的輸入類型；輸入框都處理了事件，獲取了對應(yīng)的輸入值。06記住密碼區(qū)設(shè)計

記住密碼區(qū)由Text組件和Toggle組件組成，用Row包裹住，并設(shè)置Row的對齊方式為End對齊；設(shè)置Toggle為打開的狀態(tài)，處理Toggle狀態(tài)改變的事件。07登錄按鈕區(qū)設(shè)計登錄按鈕放在Column中，利用Column默認的對齊方式實現(xiàn)居中對齊；按鈕的類型為Normal，設(shè)置了圓角；處理按鈕的點擊事件，點擊按鈕時，將獲取到的用戶名和密碼信息用console.log()進行日志輸出。08封裝消息提示函數(shù)

導(dǎo)入消息提示模塊，封裝消息提示函數(shù)showMsg()。importpromptActionfrom'@mptAction'showMsg(msg:string){

promptAction.showToast({

message:"選中的值是："+msg,

duration:2000,//顯示時長2秒

bottom:100//顯示位置距離底部100

})

}把開關(guān)的日志和登錄按鈕的日志輸出，修改為使用消息提示。任務(wù)5開發(fā)登錄頁本任務(wù)主要講解