《HarmonyOS應(yīng)用開發(fā)基礎(chǔ)》 課件 實操 項目2 走進ArkTS聲明式開發(fā)

任務(wù)1認識ArkTS工程項目2走進ArkTS聲明式開發(fā)任務(wù)1

認識ArkTS工程本任務(wù)在認識了ArkTS工程的目錄結(jié)構(gòu)后，完成HarmonyOS應(yīng)用的資源訪問，設(shè)置指定的頁面成為應(yīng)用運行的首頁。任務(wù)描述任務(wù)實施0102使用字符串資源使用顏色資源03調(diào)整應(yīng)用運行的首頁直接使用字符串將字符串配置到字符串資源文件string.json中使用字符串資源01使用字符串資源直接使用顏色值使用color.json中的顏色資源02使用顏色資源03調(diào)整應(yīng)用運行的首頁查看應(yīng)用的配置文件在pages目錄下創(chuàng)建新的頁面在EntryAbility入口文件中指定應(yīng)用加載的首頁任務(wù)1認識ArkTS工程本任務(wù)主要學(xué)習(xí)了ArkTS的項目結(jié)構(gòu)、配置文件、資源管理等，并使用資源管理進行了應(yīng)用的文字和顏色適配、實現(xiàn)了應(yīng)用運行首頁的修改。任務(wù)小結(jié)任務(wù)2認識ArkTS聲明式開發(fā)項目2走進ArkTS聲明式開發(fā)任務(wù)2

認識ArkTS聲明式開發(fā)本任務(wù)完成使用ArkTS語法調(diào)用和配置組件屬性，并使用@State狀態(tài)變量感受ArkTS的狀態(tài)管理等相應(yīng)的能力。任務(wù)描述任務(wù)效果圖預(yù)覽練習(xí)ArkTS的一些公共屬性與體驗狀態(tài)變量@State的效果。任務(wù)實施0102030504用聲明式語法編寫頁面跟蹤組件的聲明文件使用@State狀態(tài)變量設(shè)置組件的常用公共屬性查閱組件的公共屬性源碼聲明式的頁面結(jié)構(gòu)語法糖鏈式調(diào)用01用聲明式語法編寫頁面鼠標停留在組件位置，

使用“CTRL+左鍵”跟蹤源碼在源碼中查看組件的用途、參數(shù)和屬性02跟蹤組件的聲明文件ArkTS的基礎(chǔ)組件直接或者間接的都繼承自CommonMethod類，CommonMethod中定義的屬性樣式屬于公共樣式。03查閱組件的公共屬性源碼declareclassCommonMethod<T>{//T是指CommonMethod的所有子類

width(value:Length):T;//寬

height(value:Length):T;//高

size(value:SizeOptions):T;//大小

layoutWeight(value:number|string):T;//權(quán)重

padding(value:Padding|Length):T;//內(nèi)邊距

margin(value:Margin|Length):T;//外邊距

backgroundColor(value:ResourceColor):T;//背景顏色

border(value:BorderOptions):T;//邊框

onClick(event:(event?:ClickEvent)=>void):T;//點擊事件//其他公共屬性略}04設(shè)置組件的常用公共屬性設(shè)置組件的寬高與背景等設(shè)置組件的內(nèi)邊距與外邊距05使用@State狀態(tài)變量使用@State修飾變量在組件的點擊事件中修改狀態(tài)變量的值任務(wù)2認識ArkTS聲明式開發(fā)本任務(wù)了解和認識了ArkUI框架、ArkTS聲明式開發(fā)范式的UI描述方式，通過查找組件源碼的方式，學(xué)習(xí)了組件的參數(shù)配置和屬性設(shè)置，并用裝飾器@State初步體驗數(shù)據(jù)驅(qū)動UI更新的響應(yīng)式編程的奇妙之處。任務(wù)小結(jié)任務(wù)3開發(fā)設(shè)備控制頁項目2走進ArkTS聲明式開發(fā)任務(wù)3

開發(fā)設(shè)備控制頁本任務(wù)使用線性布局、文字顯示組件和圖片組件，并配合組件的屬性和樣式，完成物聯(lián)網(wǎng)App常見的設(shè)備控制頁面的開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(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組件顯示文字，對齊方式為左對齊，最多顯示一行，當(dāng)超出一行時進行截斷。07設(shè)備控制區(qū)的設(shè)計與開發(fā)

設(shè)備控制區(qū)用Row布局，內(nèi)嵌兩個Image圖片組件，圖片組件的權(quán)重點比為2:1；給設(shè)備控制的圖片組件添加事件處理，當(dāng)被點擊時，反轉(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ā)過程中，用到的組件的公共屬性時，讀者可自行查閱CommonMethod的源碼，找到需要設(shè)置的樣式參數(shù)，設(shè)計出符合用戶需求的UI。任務(wù)小結(jié)任務(wù)4開發(fā)數(shù)據(jù)展示頁項目2走進ArkTS聲明式開發(fā)任務(wù)4

開發(fā)數(shù)據(jù)展示頁本任務(wù)使用Flex彈性布局、Stack層疊布局、進度條組件和滑動條組件，實現(xiàn)物聯(lián)網(wǎng)App中常見的數(shù)據(jù)展示頁的開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源數(shù)據(jù)展示區(qū)的Flex布局設(shè)計調(diào)光燈帶區(qū)設(shè)計用滑動條調(diào)節(jié)燈光亮度用Stack布局和進度條顯示數(shù)據(jù)01整理工程資源

02數(shù)據(jù)展示區(qū)的Flex布局設(shè)計

頁面最外層和數(shù)據(jù)展示區(qū)域都是用垂直方向的Flex布局，對齊方式有所不同，一個是在主軸上居中對齊，另一個是在交叉軸上起始端對齊。03調(diào)光燈帶區(qū)設(shè)計

調(diào)光燈帶的文字和分割線，直接放在數(shù)據(jù)顯示區(qū)域的Flex布局下。因為Flex布局已設(shè)置好起始端對齊，因此可以實現(xiàn)靠左放置。04用Stack布局和進度條顯示數(shù)據(jù)

數(shù)據(jù)的顯示在Stack層疊布局中進行，使用Progress組件和顯示數(shù)據(jù)的Text組件，Text疊放在Progress上面，對齊方式為居中，數(shù)據(jù)值使用滑動條的狀態(tài)變量數(shù)據(jù)。05用滑動條調(diào)節(jié)燈光亮度

滑動條區(qū)域用Flex布局，不設(shè)置參數(shù)時默認為Row水平方向，從左到右排列亮度小圖標->滑動條->亮度大圖標，并在滑動條的事件處理中獲取滑動值，記錄到狀態(tài)變量sliderVal中，從而實現(xiàn)滑動時，進度條的進度和顯示的數(shù)據(jù)跟著改變。任務(wù)4開發(fā)數(shù)據(jù)展示頁本任務(wù)使用Flex彈性布局、進度條和滑動條，實現(xiàn)了物聯(lián)網(wǎng)App中常見的數(shù)據(jù)展示頁面的開發(fā)。Flex可以彈性設(shè)置成Row與Column方向，與Row與Column在屬性方法中設(shè)置的寫法不同，F(xiàn)lex是在參數(shù)中設(shè)置的，但效果是一樣的。任務(wù)小結(jié)任務(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ù)主要講解輸入組件、按鈕組件、開關(guān)組件和消息提示函數(shù)的使用，并綜合使用布局和組件，開發(fā)了登錄頁面，處理了按鈕的事件。任務(wù)小結(jié)任務(wù)6自定義組件項目2走進ArkTS聲明式開發(fā)任務(wù)6

自定義組件本任務(wù)從自定義組件的分析和創(chuàng)建，到自定義組件的導(dǎo)出、導(dǎo)入和使用，講解自定義組件的開發(fā)過程。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源創(chuàng)建自定義組件的目錄和文件創(chuàng)建自定義組件并導(dǎo)出驗證組件和頁面的生命周期導(dǎo)入并調(diào)用自定義組件01整理工程資源

02創(chuàng)建自定義組件目錄和文件

按官方的建議，自定義的組件放在ets>view目錄下。默認創(chuàng)建的ArkTS工程是沒有這個目錄，需要手動創(chuàng)建。

在ets目錄下新建view目錄，再在view目錄下新建ArkTSFile文件。03創(chuàng)建自定義組件并導(dǎo)出分析：當(dāng)需要完成一個UI設(shè)計時，發(fā)現(xiàn)UI中有重復(fù)出現(xiàn)的元素，或者覺得這個UI以后可以重復(fù)使用的，即可把它做成一個自定義的組件。組件中左邊的圖片和文字，可以由調(diào)用者傳入，因此將圖片和文字抽取成狀態(tài)變量，并在組件中使用“this.狀態(tài)變量”進行引用；而右邊的圖片都是同一個，因此可以不抽取狀態(tài)變量。組件用@Preview裝飾，用來預(yù)覽自定義的組件；用@Component裝飾組件，用exportdefault導(dǎo)出組件。03導(dǎo)入并調(diào)用自定義組件用import導(dǎo)入組件MyItem：importMyItemfrom'../view/MyItem';

MyItem({image:$r("app.media.msg"),text:'消息中心'})調(diào)用組件MyItem：04驗證組件和頁面的生命周期任務(wù)6自定義組件本任務(wù)主要講解了ArkTS開發(fā)過程中很重要的自定義組件的相關(guān)操作，從分析需要自定義的組件開始，到學(xué)會抽取自定義組件需要的參數(shù)，再到導(dǎo)出和導(dǎo)入組件、調(diào)用自定義組件并傳遞參數(shù)，講解了自定義組件的開發(fā)流程。任務(wù)小結(jié)任務(wù)7渲染組件項目2走進ArkTS聲明式開發(fā)任務(wù)7渲染組件本任務(wù)實現(xiàn)使用條件和循環(huán)渲染控制組件的顯示。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504用條件渲染組件封裝數(shù)據(jù)實體類處理數(shù)據(jù)源用循環(huán)渲染組件導(dǎo)入數(shù)據(jù)源06在生命周期函數(shù)中初始化數(shù)據(jù)01用條件渲染組件

修改組件MyItem的代碼，在分割線組件上使用條件渲染，使用字符串的匹配函數(shù)match()，判斷傳入的文字不是“關(guān)于我們”時，組件中的分割線才渲染。02封裝數(shù)據(jù)實體類

數(shù)據(jù)需要封裝在對應(yīng)的實體類中。在ets目錄下新建model目錄，在model目錄中新建DataModel.ets文件，用于封裝對應(yīng)的實體類；在ets目錄下新建viewmodel目錄，在viewmodel目錄中新建MyDataViewModel.ets文件，用于模擬數(shù)據(jù)來源。在DataModel.ets文件中編寫DataModel類，并用exportdefault導(dǎo)出類，類內(nèi)提供構(gòu)造方法用于封裝對象。exportdefaultclassDataModel{

imageSrc:Resource;//圖片

textVal:string;//文字//構(gòu)造方法

constructor(imageSrc:Resource,textVal:string)

{

this.imageSrc=imageSrc;

this.textVal=textVal;

}}03處理數(shù)據(jù)源在MyDataViewModel.ets中，導(dǎo)入DataModel類，編寫函數(shù)initData()，并用exportdefault進行導(dǎo)出；將需要的數(shù)據(jù)用DataModel類的對象進行封裝，再放到datas數(shù)組中；在函數(shù)的最后一行將datas數(shù)組返回。importDataModel

from'../model/DataModel';exportdefaultfunctioninitData():Array<DataModel>{

letdatas:Array<DataModel>=[

newDataModel($r("app.media.msg"),'消息中心'),

newDataModel($r("blem"),'意見反饋'),

newDataModel($r("app.media.help"),'幫助中心'),

newDataModel($r("app.media.hide"),'隱藏設(shè)備'),

newDataModel($r("app.media.account"),'賬號切換'),

newDataModel($r("app.media.about"),'關(guān)于我們'),

]console.log("數(shù)據(jù)初始化完畢…")

returndatas;}04導(dǎo)入數(shù)據(jù)源在Index.ets的第一行，添加導(dǎo)入數(shù)據(jù)實體類DataModel和數(shù)據(jù)源MyDataViewModel中的初始數(shù)據(jù)的方法initData()。//導(dǎo)入數(shù)據(jù)實體類importDataModel

from'../model/DataModel';//導(dǎo)入數(shù)據(jù)源import

initData

from'../viewmodel/MyDataViewModel';05用循環(huán)渲染組件修改Index組件的代碼，定義變量datas并使用數(shù)據(jù)源進行初始化，在Column組件中使用循環(huán)渲染組件，循環(huán)中的item就是數(shù)據(jù)源中的每一個DataModel對象，通過“item.變量名”進行引用對應(yīng)的值。

ForEach(this.datas,(item)=>{

MyItem({image:item.imageSrc,text:item.textVal})

})06在生命周期函數(shù)中初始化數(shù)據(jù)-1修改Index的代碼，在組件和頁面的生命周期函數(shù)中分別進行驗證數(shù)據(jù)的初始化。//datas:Array<DataModel>=initData()//初始化數(shù)據(jù)datas:Array<DataModel>;aboutToAppear(){

this.datas=initData()//初始化數(shù)據(jù)}onPageShow(){

//this.datas=initData()//初始化數(shù)據(jù)}06在生命周期函數(shù)中初始化數(shù)據(jù)-2aboutToAppear()生命周期函數(shù)是在build()函數(shù)之前執(zhí)行；opPageShow()函數(shù)是在build()函數(shù)之后執(zhí)行。在實際開發(fā)時，opPageShow()函數(shù)可以用來在build()構(gòu)建完頁面后，再對數(shù)據(jù)進行變化，從而改變頁面的指定的數(shù)據(jù)。任務(wù)7渲染組件本任務(wù)利用條件和循環(huán)渲染語法進行了組件的渲染控制，學(xué)會了數(shù)據(jù)源的處理，同時利用組件的生命周期函數(shù)進行了數(shù)據(jù)的初始化。任務(wù)小結(jié)任務(wù)8組件間的狀態(tài)管理項目2走進ArkTS聲明式開發(fā)任務(wù)8組件間的狀態(tài)管理本任務(wù)主要講解組件級別裝飾器的使用，并在父子組件間實現(xiàn)單向或雙向傳遞數(shù)據(jù)，跨子孫組件間實現(xiàn)雙向數(shù)據(jù)傳遞。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504創(chuàng)建場景設(shè)置子組件父組件向子組件的@State變量傳值子組件用@Prop接收父組件的單向傳值跨子孫組件間雙向傳值子組件用@Link實現(xiàn)父子間雙向傳值01創(chuàng)建場景設(shè)置子組件

在ets目錄中新建目錄view，在view目錄中新建ArkTSFile文件，名為SceneInfo；在其中定義子組件SceneInfo，在子組件內(nèi)定義用@State裝飾的變量scene，用戶選擇不同的場景時，對應(yīng)的場景的背景和字體的顏色發(fā)生變化；定義子組件時用exportdefault進行導(dǎo)出。02父組件向子組件的@State變量傳值在Index.ets中導(dǎo)入子組件SceneInfo，在build()中給Text組件添加事件來實現(xiàn)父組件的場景選擇，調(diào)用子組件SceneInfo時，使用this.scene_parent傳遞參數(shù)給子組件。03子組件用@Prop接收父組件的單向傳值修改子組件SceneInfo，用@Prop裝飾變量scene，@Prop裝飾的變量在子組件內(nèi)不能自己初始化；@Prop裝飾的變量必須使用其父組件提供的@State變量通過參數(shù)進行初始化，修改父組件中調(diào)用子組件的位置，用({scene:this.scene_parent})給子組件傳值。04子組件用@Link實現(xiàn)父子間雙向傳值@Link裝飾的變量可以和父組件的@State變量建立雙向的數(shù)據(jù)綁定，@Link裝飾的變量必須使用其父組件提供的@State變量進行初始化，并且使用$符號初始化，允許組件內(nèi)部修改@Link變量值且更改會通知給父組件。05跨子孫組件間雙向傳值修改SceneInfo子組件中的狀態(tài)變量為@Consume(“scene_val”)，修改父組件Index的狀態(tài)變量為@Provide(“scene_val”),在Index組件中調(diào)用子組件Provider_sub，實現(xiàn)Index組件通過Provider_sub子組件向SceneInfo孫組件傳值。任務(wù)8組件間的狀態(tài)管理本任務(wù)主要講解了組件級別的狀態(tài)變量裝飾器的使用，進行了父子/子孫組件間的單向和雙向傳值，其中@State用在組件內(nèi)、@Prop用于父向子單向傳值、@Link用于父子間雙向傳值、@Provide用于跨子孫組件向@Consume的狀態(tài)變量雙向傳值，當(dāng)這些裝飾符裝飾的狀態(tài)變量被改變時，將會調(diào)用所在組件的build()方法進行UI刷新。任務(wù)小結(jié)任務(wù)9開發(fā)閃屏頁項目2走進ArkTS聲明式開發(fā)任務(wù)9開發(fā)閃屏頁本任務(wù)使用頁面路由router和路由容器組件Navigator，完成頁面跳轉(zhuǎn)并傳值，實現(xiàn)點擊可以跳轉(zhuǎn)并跳回，跳轉(zhuǎn)時可以同時傳遞參數(shù)，目標頁面接收參數(shù)并顯示出來。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施0102030504整理工程資源使用頁面路由實現(xiàn)跳轉(zhuǎn)并傳值使用頁面路由實現(xiàn)跳回使用Navigator實現(xiàn)頁面跳轉(zhuǎn)并傳值接收路由參數(shù)01整理工程資源

02使用頁面路由實現(xiàn)跳轉(zhuǎn)并傳值在Splash頁面文件中編寫代碼：首先在第1行，導(dǎo)入頁面路由；接著實現(xiàn)頁面效果，整體布局是在Column布局中放置一個Stack布局，在Stack中放置一個鋪滿屏幕寬高的Image組件，將Text組件疊加加Image組件上，Stack布局頂部居左對齊；最后進行事件處理，給Image組件和Text組件添加單擊事件，在事件中使用頁面路由實現(xiàn)跳轉(zhuǎn)到指定頁面并按需要傳遞參數(shù)。03使用頁面路由實現(xiàn)跳回在Index頁面文件中，導(dǎo)入路由、修改頁面代碼、實現(xiàn)跳回到Splash頁面。04接收路由參數(shù)在Message頁面文件中，導(dǎo)入路由、修改頁面代碼、接收路由參數(shù)并顯示在頁面上、使用頁面路由實現(xiàn)跳回到Splash頁面。05使用Navigator實現(xiàn)頁面跳轉(zhuǎn)并傳值改寫Splash頁面中的Image組件的代碼，用Navigator路由容器組件實現(xiàn)跳轉(zhuǎn)并傳值。任務(wù)9開發(fā)閃屏頁本任務(wù)主要實現(xiàn)了兩種方式的頁面跳轉(zhuǎn)，router頁面路由是在組件的點擊事件中完成跳轉(zhuǎn)與傳值，Navigator路由容器組件內(nèi)部包含可跳轉(zhuǎn)的組件，兩種使用方式不一樣，但結(jié)果是一樣的。使用router跳轉(zhuǎn)并傳遞參數(shù)時，發(fā)起跳轉(zhuǎn)的頁面和目標頁都需要導(dǎo)入頁面路由；使用Navigator時，發(fā)起方不需要導(dǎo)入頁面路由，目標方如果有接收參數(shù)，需要通過路由獲取傳遞的值，因此需要導(dǎo)入頁面路由。任務(wù)小結(jié)任務(wù)10開發(fā)引導(dǎo)頁項目2走進ArkTS聲明式開發(fā)任務(wù)10開發(fā)引導(dǎo)頁本任務(wù)綜合使用滑塊視圖容器組件Swiper和層疊布局，開發(fā)出App必備的引導(dǎo)頁。本任務(wù)的引導(dǎo)頁由3個輪播頁面組成，當(dāng)輪播頁面到達第3個頁面時，出現(xiàn)Button組件，用于跳轉(zhuǎn)到主頁。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源實現(xiàn)引導(dǎo)頁的輪播功能從引導(dǎo)頁跳轉(zhuǎn)到主頁01整理工程資源

02實現(xiàn)引導(dǎo)頁的輪播功能引導(dǎo)頁的布局設(shè)計，最外層用一個Column布局，內(nèi)嵌一個Stack層疊布局，Stack中放置一個Swiper組件和一個Button組件，給Swiper組件添加屬性，實現(xiàn)引導(dǎo)頁中的3個輪播頁面每隔4秒自動切換。03從引導(dǎo)頁跳轉(zhuǎn)到主頁引導(dǎo)頁有3個頁面，只有頁面切換到下標為2的第3個頁面時，Button組件才需要出現(xiàn)。要實現(xiàn)這個功能，可以給Swiper組件添加事件處理，在事件回調(diào)方法中獲取當(dāng)前頁面的下標，通過下標控制Button組件的出現(xiàn)，并且給Button組件添加單擊事件，通過頁面路由跳轉(zhuǎn)到Index主頁面。任務(wù)10開發(fā)引導(dǎo)頁本任務(wù)學(xué)習(xí)了滑塊視圖容器Swiper的使用，并進行了App常見的引導(dǎo)頁的開發(fā)。引導(dǎo)頁設(shè)計是App的設(shè)計重點之一，引導(dǎo)頁的設(shè)計對于新用戶來說是非常重要的，而功能性的升級版本中的引導(dǎo)頁也能讓老用戶快速掌握新升級功能，能起到很好的輔助作用，大大提升了用戶體驗。任務(wù)小結(jié)任務(wù)11開發(fā)主頁項目2走進ArkTS聲明式開發(fā)任務(wù)11開發(fā)主頁本任務(wù)使用Tabs組件，開發(fā)主頁面中的“主頁”、“場景”、“我的”這3個頁簽，并實現(xiàn)對應(yīng)內(nèi)容頁的頁面切換。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源tabBar的布局分析構(gòu)建自定義的tabBar04在Tabs中實現(xiàn)主頁功能01整理工程資源

選中與未選中的狀態(tài)可以用不同的圖片實現(xiàn)，將任務(wù)需要的圖片放到media目錄下。02tabBar的布局分析Tabs中的每一個tabBar，布局設(shè)計是一樣的，可以使用Column布局包裹住一個Image組件和一個Text組件實現(xiàn)。03構(gòu)建自定義的tabBar在Index.ets中編寫代碼，使用@Builder快速構(gòu)建自定義的tabBar，命名為tabBuilder。在tabBuilder中，根據(jù)Tabs的控制器返回的當(dāng)前頁簽的選中下標，更改選中與未選中時的圖標和文字顏色，添加單擊tabBar時通過控制器進行頁面切換的事件處理。04在Tabs中實現(xiàn)主頁功能在Index.ets中的build()中編寫代碼，使用Tabs組件，在Tabs組件中設(shè)置3個TabContent；給每個TabContent使用自定義的tabBar，傳入選中/未選中時使用的圖標和當(dāng)前tabBar的索引；每個TabContent中的內(nèi)容組件先用Text組件來模擬。任務(wù)11開發(fā)主頁本任務(wù)使用Tabs組件開發(fā)了App中常見的主頁頁面切換，針對每個tabBar都需要設(shè)置選中與未選中時的圖標和文字，構(gòu)建了自定義的tabBar。任務(wù)小結(jié)任務(wù)12展示列表與網(wǎng)格數(shù)據(jù)項目2走進ArkTS聲明式開發(fā)任務(wù)12展示列表與網(wǎng)格數(shù)據(jù)本任務(wù)完成List列表數(shù)據(jù)和Grid網(wǎng)格數(shù)據(jù)的展示。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源實現(xiàn)列表數(shù)據(jù)的展示自定義GridItem項布局組件04實現(xiàn)網(wǎng)格數(shù)據(jù)的展示01整理工程資源

本任務(wù)在任務(wù)7（渲染組件）的基礎(chǔ)上完成，使用到任務(wù)7定義的實體數(shù)據(jù)類和數(shù)據(jù)源。將Project2_Task7工程復(fù)制一份，并重命名為Project2_Task12。在Project2_Task12中修改代碼，完成任務(wù)要求。02實現(xiàn)列表數(shù)據(jù)的展示修改Index.ets中的代碼，整體布局的最外層一個Column，內(nèi)部用Scroll滾動組件包裹住List組件，ListItem子組件對應(yīng)的布局使用前面任務(wù)中已經(jīng)實現(xiàn)的MyItem自定義組件，使用List組件實現(xiàn)列表數(shù)據(jù)的展示。03自定義GridItem項布局組件Grid與List相似，GridItem是Grid的唯一子組件。Grid指定在行和列上的GridItem子組件的展示個數(shù)，并且可以調(diào)整每一個GridItem所占的行寬和列高。在ets>view目錄下創(chuàng)建MyGridItem.ets文件，用于定義GridItem的布局。GridItem的布局由一個Column組成，內(nèi)嵌一個圖片組件和文字顯示組件。04實現(xiàn)網(wǎng)格數(shù)據(jù)的展示在Index.ets文件中導(dǎo)入MyGridItem組件，添加用Scroll組件包裹住的Grid組件，實現(xiàn)網(wǎng)格數(shù)據(jù)的展示。任務(wù)12展示列表與網(wǎng)格數(shù)據(jù)本任務(wù)使用List組件和Grid組件開發(fā)了App中常見的列表項和網(wǎng)格項的數(shù)據(jù)展示，從類的定義、類的導(dǎo)出、數(shù)據(jù)源、展示單個數(shù)據(jù)的自定義組件、用循環(huán)進行組件的渲染，到用滾動組件包裹住List和Grid，展示了列表和網(wǎng)格的完整開發(fā)過程。任務(wù)小結(jié)任務(wù)13開發(fā)自定義的時間彈窗項目2走進ArkTS聲明式開發(fā)任務(wù)13開發(fā)自定義的時間彈窗本任務(wù)綜合使用自定義的對話框、日期選擇器、時間選擇器，以及條件渲染，進行自定義的時間彈窗開發(fā)。任務(wù)描述任務(wù)效果圖預(yù)覽任務(wù)實施010203整理工程資源實現(xiàn)自定義的對話框?qū)崿F(xiàn)時間彈窗01整理工程資源

在ets>view目錄下創(chuàng)建自定義的對話框組件MyDialog。02實現(xiàn)自定義的對話框自定義對話框MyDialog組件，標題由調(diào)用者傳入，提供“確定”和“取消”按鈕，對話框內(nèi)部的UI在使用時根據(jù)場景再進行設(shè)計。在MyDialog.ets文件中，編寫自定義的對話框組件并用exportdefault導(dǎo)出，依據(jù)傳遞過來的title的條件值，決定渲染的是日期還是時間選擇器，并處理自定義對話框的確定和取消的按鈕事件，在事件中關(guān)閉對話框。03實現(xiàn)時間彈窗在Index.ets頁面文件中，導(dǎo)入自定義的對話框組件，分別用不同的自定義對話框控制器，傳入不同的參數(shù)值，并且在日期和時間的選擇按