《HarmonyOS應用開發(fā)基礎(chǔ)》 課件 實操 項目2-任務(wù)3 開發(fā)設(shè)備控制頁

任務(wù)3開發(fā)設(shè)備控制頁項目2走進ArkTS聲明式開發(fā)任務(wù)3

開發(fā)設(shè)備控制頁本任務(wù)使用線性布局、文字顯示組件和圖片組件，并配合組件的屬性和樣式，完成物聯(lián)網(wǎng)App常見的設(shè)備控制頁面的開發(fā)。任務(wù)描述任務(wù)效果圖預覽任務(wù)實施0102030504整理工程資源設(shè)備控制頁的UI結(jié)構(gòu)分析最外層的Column布局設(shè)計設(shè)備位置區(qū)的Row布局設(shè)計設(shè)備控制區(qū)外框的Column布局設(shè)計06設(shè)備狀態(tài)信息區(qū)的設(shè)計與開發(fā)07設(shè)備控制區(qū)的設(shè)計與開發(fā)08使用Blank和Divider組件01整理工程資源

02設(shè)備控制頁的UI結(jié)構(gòu)分析03最外層的Column布局設(shè)計最外層用Column，寬高占滿屏幕，設(shè)置背景為灰色。04設(shè)備控制區(qū)外框的Column布局設(shè)計

內(nèi)層用于顯示設(shè)備相關(guān)信息的區(qū)域，是一個Column，限定了寬高和邊框。邊框使用.border設(shè)置樣式，支持設(shè)置邊框顏色、邊框粗細、邊框圓角以及邊框的展示樣式。05設(shè)備位置區(qū)的Row布局設(shè)計設(shè)備位置用Row布局，內(nèi)嵌一個Text組件，在主軸方向上靠起始端對齊，設(shè)置內(nèi)邊距為10。06設(shè)備狀態(tài)信息區(qū)的設(shè)計與開發(fā)

設(shè)備狀態(tài)信息用Text組件顯示文字，對齊方式為左對齊，最多顯示一行，當超出一行時進行截斷。07設(shè)備控制區(qū)的設(shè)計與開發(fā)

設(shè)備控制區(qū)用Row布局，內(nèi)嵌兩個Image圖片組件，圖片組件的權(quán)重點比為2:1；給設(shè)備控制的圖片組件添加事件處理，當被點擊時，反轉(zhuǎn)標志位openFlag；兩個圖片組件顯示的圖片根據(jù)標志位openFlag進行圖片切換。08使用Blank和Divider組件

將設(shè)備位置區(qū)的Row布局設(shè)計，由使用Row的對齊方式修改為使用Blank組件，讓“客廳空調(diào)”的文字顯示實現(xiàn)居左擺放，同時增加一個下劃線，突出位置的顯示。任務(wù)3開發(fā)設(shè)備控制頁本任務(wù)綜合利用線性布局的不同屬性進行設(shè)備控制頁的布局設(shè)計，并使用Text組件和Image組件進行了信息的顯示。在開發(fā)過程中，用到的組件的公共屬性時，讀者可自行查閱