鴻蒙系統(tǒng)應用開發(fā)項目化教程 課件 項目3 創(chuàng)建通訊錄

長沙民政職業(yè)技術學院鴻蒙應用開發(fā)

本任務需要實現(xiàn)一個聯(lián)系人的應用。1.主界面能顯示目前用戶保存的所有聯(lián)系人信息（性別圖標、姓名、電話）2.在通訊錄主界面點擊新增圖標時，進入新增聯(lián)系人界面。如果用戶按界面要求填入電話、聯(lián)系人名稱、性別等信息，點擊保存圖標，則將在系統(tǒng)中保存聯(lián)系人信息，并自動追加到主界面已有聯(lián)系人的最后；如果用戶點擊了對話框的取消圖標，則不會保存新建聯(lián)系人對話框輸入的信息且自動回到主界面。項目三創(chuàng)建通訊錄主界面新建聯(lián)系人界面聯(lián)系人詳情界面主界面學習目標知識目標能力目標素養(yǎng)目標教學目標掌握常用UI組件TextInput、Search的常見方法。掌握線性界面布局。掌握關系型數(shù)據(jù)庫的使用方法。掌握使用列表List及ListItem顯示條目數(shù)據(jù)的方法。掌握頁面路由以及參數(shù)傳遞方法。熟練掌握鴻蒙移動應用開發(fā)的基本流程。能熟練應用線性布局編寫界面。能熟練利用List及ListItem顯示列表。能熟練使用關系數(shù)據(jù)庫進行插入、修改、刪除、查詢數(shù)據(jù)。能熟練掌握頁面路由及參數(shù)傳遞。培養(yǎng)并踐行編碼規(guī)范意識，變量命名可讀、格式規(guī)范，注釋清晰易讀。培養(yǎng)自主學習能力，通過閱讀文檔，學習新知并能在實際項目中運用、解決問題。任務一實現(xiàn)主界面和新增聯(lián)系人界面任務二向通訊錄增加聯(lián)系人任務三顯示通訊錄聯(lián)系人列表任務四查看聯(lián)系人詳情目錄CONTENTS實現(xiàn)主界面和新增聯(lián)系人界面任務描述

通訊錄的主界面需求如下面左圖所示，請實現(xiàn)主界面。當用戶點擊了新增圖標時，界面跳轉到新增界面，新增界面如右圖所示。在新增界面，點擊標題欄的回退圖標，將回到主界面。主界面聯(lián)系人詳情界面任務重點及難點任務目的1．知識目標：（1）掌握常用UI組件Search、TextInput的常見方法；（2）掌握使用router進行頁面跳轉的方法；2．能力目標：（1）熟練掌握鴻蒙移動開發(fā)的基本流程中的創(chuàng)建項目、創(chuàng)建界面布局的過程；（2）能熟練應用線性布局和層疊布局編寫界面；（3）能熟練使用router實現(xiàn)頁面跳轉3．素質目標：（1）通過界面布局培養(yǎng)從整體到局部的思維；（2）學習讀API文檔；重難點重點：（1）能熟練使用router實現(xiàn)頁面跳轉（2）能熟練應用線性布局和層疊布局編寫界面；難點：（1）能熟練應用線性布局和層疊布局編寫界面；1.1完成任務所需知識清單1Search2TextInput3router1.1完成任務所需知識清單-Search組件當需要對所瀏覽內容根據(jù)關鍵字搜索特定條目時就可以用到搜索框組件。接口定義如下：Search(options?:{value?:string;placeholder?:string;icon?:string;controller?:SearchController})1、Search組件--實現(xiàn)搜索框的組件接口參數(shù)說明表參數(shù)名參數(shù)類型必填參數(shù)描述valuestring否設置當前顯示的搜索文本內容placeholderstring否設置無輸入時的提示文本iconstring否設置搜索圖標路徑，默認使用系統(tǒng)搜索圖標，圖標支持的圖源格式:svg、jpg和pngcontrollerSearchController否設置Search組件控制器1.1完成任務所需知識清單-Search組件除支持UI組件的通用屬性（比如Width，Height等），還支持其余屬性1、Search組件實現(xiàn)搜索框的組件名稱參數(shù)類型描述searchButtonstring搜索框末尾搜索按鈕文本內容，默認無搜索按鈕placeholderColorResourceColor設置placeholder文本顏色placeholderFontFont設置placeholder文本樣式textFontFont設置搜索框內輸入文本樣式textAlignTextAlign設置文本在搜索框中的對齊方式。默認值：TextAlign.StartcopyOption9+CopyOptions設置輸入的文本是否可復制1.1完成任務所需知識清單-Search組件除支持通用事件外，還支持其余事件1.Search組件實現(xiàn)搜索框的組件名稱功能描述onSubmit(callback:(value:string)=>void)點擊搜索圖標、搜索按鈕或者按下軟鍵盤搜索按鈕時觸發(fā)該回調。-value:當前搜索框中輸入的文本內容onChange(callback:(value:string)=>void)輸入內容發(fā)生變化時，觸發(fā)該回調。-value:當前搜索框中輸入的文本內容1.1完成任務所需知識清單-Search組件1、Search組件實現(xiàn)搜索框的組件示例：實現(xiàn)一個如圖的搜索框。1.1完成任務所需知識清單-Search組件1

@Entry2

@Component3

structSearchExample{4

@StatechangeValue:string=''5

@StatesubmitValue:string=''6

controller:SearchController=newSearchController()78

build(){9

Column(){10

Text('onSubmit:'+this.submitValue).fontSize(18).margin(15)11

Text('onChange:'+this.changeValue).fontSize(18).margin(15)12

Search({value:this.changeValue,placeholder:'Typetosearch...',controller:this.controller})13

.searchButton('SEARCH')14

.width(400)15

.height(40)1.1完成任務所需知識清單-Search組件16

.placeholderColor(Color.Grey)17

.placeholderFont({size:14,weight:400})18

.textFont({size:14,weight:400})19

.onSubmit((value:string)=>{20

this.submitValue=value21

})22

.onChange((value:string)=>{23

this.changeValue=value24

})25

.margin(20)26

Button('SetcaretPosition1')27

.onClick(()=>{28

//設置光標位置到輸入的第一個字符后29

this.controller.caretPosition(1)30

})31

}.width('100%')32

}33

}1.1完成任務所需知識清單-TextInput組件接口參數(shù)說明表TextInput是單行文本輸入框組件，可以設置輸入文本的數(shù)據(jù)類型為字符或者數(shù)字或者密碼，可以設置輸入框的默認輸入內容等屬性。接口定義如下：TextInput(value?:{placeholder?:ResourceStr,text?:ResourceStr,controller?:TextInputController})參數(shù)名參數(shù)類型必填參數(shù)描述placeholderResourceStr否設置無輸入時的提示文本textResourceStr否設置輸入框當前的文本內容controller8+TextInputController否設置TextInput控制器1.1完成任務所需知識清單-TextInput組件

TextInput組件文本輸入框除支持通用屬性外，還支持其余屬性名稱參數(shù)類型描述typeInputType設置輸入框類型。默認值：InputType.Normal；枚舉值可以選擇Normal,Password,Email,Number,PhoneNumberplaceholderColorResourceColor設置placeholder文本顏色placeholderFontFont設置placeholder文本樣式enterKeyTypeEnterKeyType設置輸入法回車鍵類型，目前僅支持默認類型顯示。默認值：EnterKeyType.DonemaxLengthnumber設置文本的最大輸入字符數(shù)copyOptionCopyOptions設置輸入的文本是否可復制。設置CopyOptions.None時，當前TextArea中的文字無法被復制或剪切，僅支持粘貼showPasswordIconboolean密碼輸入模式時，輸入框末尾的圖標是否顯示。默認值：truestyleTextInputStyle設置輸入框為默認風格或內聯(lián)輸入風格。默認值：TextInputStyle.DefaulttextAlignTextAlign設置輸入文本在輸入框中的對齊方式。默認值：TextAlign.Start

事件接口名稱功能描述onChange(callback:(value:string)=>void)輸入內容發(fā)生變化時，觸發(fā)該回調。value：輸入的文本內容。onSubmit(callback:(enterKey:EnterKeyType)=>void)按下輸入法回車鍵觸發(fā)該回調，返回值為當前輸入法回車鍵的類型。enterKeyType：輸入法回車鍵類型。具體類型見EnterKeyType枚舉說明。onEditChanged(callback:(isEditing:boolean)=>void)(deprecated)輸入狀態(tài)變化時，觸發(fā)該回調。從API8開始，建議使用onEditChange。onEditChange(callback:(isEditing:boolean)=>void)8+輸入狀態(tài)變化時，觸發(fā)該回調。isEditing為true表示正在輸入。1.1完成任務所需知識清單-TextInput組件

TextInput樣例1.1完成任務所需知識清單-TextInput組件1@Entry2@Component3structTextInputExample{4@Statetext:string=''5controller:TextInputController=newTextInputController()67build(){8Column(){9TextInput({placeholder:'inputyourword...',controller:this.controller})10.placeholderColor(Color.Grey)11.placeholderFont({size:14,weight:400})12.caretColor(Color.Blue)13.width(400)14.height(40)15.margin(20)16.fontSize(14)17.fontColor(Color.Black)18.onChange((value:string)=>{19this.text=value20})

TextInput樣例1.1完成任務所需知識清單-TextInput組件21Text(this.text)22Button('SetcaretPosition1')23.margin(15)24.onClick(()=>{25//將光標移動至第一個字符后26this.controller.caretPosition(1)27})28//密碼輸入框29TextInput({placeholder:'inputyourpassword...'})30.width(400)31.height(40)32.margin(20)33.type(InputType.Password)34.maxLength(9)35.showPasswordIcon(true)36//內聯(lián)風格輸入框37TextInput({placeholder:'inlinestyle'})38.width(400)39.height(50)40.margin(20)41.borderRadius(0)42.style(TextInputStyle.Inline)43}.width('100%')44}

頁面路由指在應用程序中實現(xiàn)不同頁面之間的跳轉和數(shù)據(jù)傳遞。HarmonyOS提供了Router模塊，通過不同的url地址，可以方便地進行頁面路由，訪問不同的頁面。兩種跳轉模式，決定了目標頁是否會替換當前頁：●

router.pushUrl()：目標頁不會替換當前頁，而是壓入頁面棧。這樣可以保留當前頁的狀態(tài)，并且可以通過返回鍵或者調用router.back()方法返回到當前頁?！?/p>

router.replaceUrl()：目標頁會替換當前頁，并銷毀當前頁。這樣可以釋放當前頁的資源，并且無法返回到當前頁。1.1完成任務所需知識清單-router頁面路由

兩種實例模式，分別是Standard和Single。這兩種模式?jīng)Q定了目標url是否會對應多個實例。●

Standard：標準實例模式，也是默認情況下的實例模式。每次調用該方法都會新建一個目標頁，并壓入棧頂?！?/p>

Single：單實例模式。即如果目標頁的url在頁面棧中已經(jīng)存在同url頁面，則離棧頂最近的同url頁面會被移動到棧頂，并重新加載；如果目標頁的url在頁面棧中不存在同url頁面，則按照標準模式跳轉。1.1完成任務所需知識清單-router頁面路由

場景一：有一個主頁（Home）和一個詳情頁（Detail），希望從主頁點擊一個商品，跳轉到詳情頁。同時，需要保留主頁在頁面棧中，以便返回時恢復狀態(tài)。這種場景下，可以使用pushUrl()方法，并且使用Standard實例模式（標準實例模式下，router.RouterMode.Standard參數(shù)可以省略）。1//在Home頁面中2functiononJumpClick():void{3router.pushUrl({4url:'pages/Detail'//目標url5},router.RouterMode.Standard,(err)=>{6if(err){7console.error(`InvokepushUrlfailed,codeis${err.code},messageis${err.message}`);8return;9}10('InvokepushUrlsucceeded.');11});12}1.1完成任務所需知識清單-router頁面路由

場景二：有一個登錄頁（Login）和一個個人中心頁（Profile），希望從登錄頁成功登錄后，跳轉到個人中心頁。同時，銷毀登錄頁，在返回時直接退出應用。這種場景下，可以使用replaceUrl()方法，并且使用Standard實例模式（或者省略）。場景三：有一個設置頁（Setting）和一個主題切換頁（Theme），希望從設置頁點擊主題選項，跳轉到主題切換頁。同時，需要保證每次只有一個主題切換頁存在于頁面棧中，在返回時直接回到設置頁。這種場景下，可以使用pushUrl()方法，并且使用Single實例模式。1.1完成任務所需知識清單-router頁面路由

場景四：有一個搜索結果列表頁（SearchResult）和一個搜索結果詳情頁（SearchDetail），希望從搜索結果列表頁點擊某一項結果，跳轉到搜索結果詳情頁。同時，如果該結果已經(jīng)被查看過，則不需要再新建一個詳情頁，而是直接跳轉到已經(jīng)存在的詳情頁。這種場景下，可以使用replaceUrl()方法，并且使用Single實例模式。1.3完成任務所需知識清單-router頁面路由

當用戶在一個頁面完成操作后，通常需要返回到上一個頁面或者指定頁面，這就需要用到頁面返回功能。方式一：返回到上一個頁面。1router.back();方式二：返回到指定頁面。1router.back({2url:'pages/Home'3});1.3完成任務所需知識清單-router頁面路由輸入主題完成應用的主界面UI框架設計1.2任務1的實施任務目標創(chuàng)建主界面

（1）創(chuàng)建項目啟動開發(fā)工具DevEcoStudio，創(chuàng)建一個新項目，選擇“EmptyAbility”。在項目配置對話框中設置項目名為MyContacts，項目類型為Application，其他相關設置參見下圖中的設置。完成這些選項設置后按“Finish”按鈕創(chuàng)建項目。1.2任務1的實施

（2）主界面UI設計實現(xiàn)主界面頁面效果，頁面的最外層用Stack布局，里面包裹一個Column(其中一行包含一個文本，另一行包含一個搜索框)和一個新增按鈕。新增按鈕位置用絕對定位；聯(lián)系人文本處于本行的正中間，可以用到行的justifyContent(FlexAlign.Center)屬性。1.2任務1的實施

（3）新建聯(lián)系人界面UI設計新建聯(lián)系人界面由5行垂直排列組成，在最外層用一個Column，包裹5行Row,每行Row內部呈橫排線性排列。標題欄要求取消和保存圖標在兩邊，標題“新建聯(lián)系人”居中。1.2任務1的實施

（4）頁面路由設置當用戶點擊新增按鈕后，跳轉到新增頁面；在新增頁面點擊左上角的取消圖標后跳回到主界面；1.2任務1的實施完成了項目主要的界面設計和新建聯(lián)系人界面及兩個頁面之間的相互跳轉完成的編碼Search組件TextInput組件router頁面跳轉學到的知識任務小結任務小結任務2向通訊錄增加聯(lián)系人02任務目標及重點難點任務描述在本任務中，要求當用戶用戶輸入聯(lián)系人信息以后，將聯(lián)系人信息保存到數(shù)據(jù)庫，并在后臺打印輸出數(shù)據(jù)庫中所有用戶信息。如果用戶選擇不保存，即取消，則新錄入的聯(lián)系人信息不會保存到數(shù)據(jù)庫。任務目的1、知識目標：掌握關系型數(shù)據(jù)庫的使用方法；2、能力目標：能熟練使用關系數(shù)據(jù)庫進行插入、修改、刪除、查詢數(shù)據(jù)；3、素質目標：（1）培養(yǎng)良好的編程習慣重難點1、重點：關系數(shù)據(jù)庫操作2、難點：關系數(shù)據(jù)庫操作0201關系型數(shù)據(jù)庫數(shù)據(jù)庫接口2.1完成任務所需知識清單

關系型數(shù)據(jù)庫對應用提供通用的操作接口，底層使用SQLite作為持久化存儲引擎，支持SQLite具有的數(shù)據(jù)庫特性，包括但不限于事務、索引、視圖、觸發(fā)器、外鍵、參數(shù)化查詢和預編譯SQL語句。2.1完成任務所需知識清單——關系型數(shù)據(jù)庫

接口名稱描述getRdbStore(context:Context,config:StoreConfig,callback:AsyncCallback<RdbStore>):void獲得一個相關的RdbStore，操作關系型數(shù)據(jù)庫，用戶可以根據(jù)自己的需求配置RdbStore的參數(shù)，然后通過RdbStore調用相關接口可以執(zhí)行相關的數(shù)據(jù)操作。executeSql(sql:string,bindArgs:Array<ValueType>,callback:AsyncCallback<void>):void執(zhí)行包含指定參數(shù)但不返回值的SQL語句。insert(table:string,values:ValuesBucket,callback:AsyncCallback<number>):void向目標表中插入一行數(shù)據(jù)。update(values:ValuesBucket,predicates:RdbPredicates,callback:AsyncCallback<number>):void根據(jù)RdbPredicates的指定實例對象更新數(shù)據(jù)庫中的數(shù)據(jù)。delete(predicates:RdbPredicates,callback:AsyncCallback<number>):void根據(jù)RdbPredicates的指定實例對象從數(shù)據(jù)庫中刪除數(shù)據(jù)。query(predicates:RdbPredicates,columns:Array<string>,callback:AsyncCallback<ResultSet>):void根據(jù)指定條件查詢數(shù)據(jù)庫中的數(shù)據(jù)。deleteRdbStore(context:Context,name:string,callback:AsyncCallback<void>):void刪除數(shù)據(jù)庫。2.1完成任務所需知識清單——數(shù)據(jù)庫接口數(shù)據(jù)庫使用示例

letcontext=featureAbility.getContext();constSTORE_CONFIG={name:'RdbTest.db',//數(shù)據(jù)庫文件名//@ts-ignoresecurityLevel:relationalStore.SecurityLevel.S1//數(shù)據(jù)庫安全級別};exportdefaultclassApplicationdbAbilityextendsUIAbility{onCreate(want,launchParam){(0x0000,'testTag','%{public}s','AbilityonCreate');}

onWindowStageCreate(windowStage:window.WindowStage){2.1完成任務所需知識清單——數(shù)據(jù)庫接口數(shù)據(jù)庫使用示例

2.1完成任務所需知識清單——數(shù)據(jù)庫接口relationalStore.getRdbStore(this.context,STORE_CONFIG,(err,store)=>{if(err){console.error(`FailedtogetRdbStore.Code:${err.code},message:${err.message}`);return;}(`SucceededingettingRdbStore.`);store.executeSql(SQL_CREATE_TABLE);//創(chuàng)建數(shù)據(jù)表//這里執(zhí)行數(shù)據(jù)庫的增、刪、改、查等操作constvalueBucket={'NAME':'Lisa','AGE':18,'SALARY':100.5,'CODES':newUint8Array([1,2,3,4,5])};數(shù)據(jù)庫使用示例

2.1完成任務所需知識清單——數(shù)據(jù)庫接口letpredicates=newrelationalStore.RdbPredicates("EMPLOYEE");//@ts-ignorepredicates.equalTo('NAME','Rose');store.query(predicates,['ID','NAME','AGE','SALARY','CODES'],(err,resultSet)=>{if(err){console.error(`Failedtoquerydata.Code:${err.code},message:${err.message}`);return;}(`ResultSetcolumnnames:${resultSet.columnNames}`);(`ResultSetcolumncount:${resultSet.columnCount}`);})

數(shù)據(jù)庫使用示例

2.1完成任務所需知識清單——數(shù)據(jù)庫接口store.insert('EMPLOYEE',valueBucket,(err,rowId)=>{if(err){console.error(`Failedtoinsertdata.Code:${err.code},message:${err.message}`);return;}(`Succeededininsertingdata.rowId:${rowId}`);})});}}}第一步：搭建聯(lián)系人模型第二步：初始化數(shù)據(jù)庫，創(chuàng)建聯(lián)系人表第三步：編寫數(shù)據(jù)庫的新增、查詢接口第四步：在新增界面為確認圖標添加單擊事件響應任務1實現(xiàn)了主界面和新建聯(lián)系人見面；該任務需完成：在新增聯(lián)系人界面，當用戶點擊確認圖標時，保存用戶輸入的聯(lián)系人信息。任務目標實施步驟2.2任務2的實施

(1)搭建聯(lián)系人模型在src->main->ets->common下新建文件夾bean，創(chuàng)建ets文件ContactData.ets，文件結構如圖所示1exportdefaultclassContactData{2id:number;3accountType:number;4name:string;5phoneNumber:string;6beizhu:string;78constructor(id:number,accountType:number,name:string,phoneNumber:string,beizhu:string){9this.id=id;10this.accountType=accountType;11=name;12this.phoneNumber=phoneNumber;13this.beizhu=beizhu;14}16}2.2任務2的實施

1.初始化數(shù)據(jù)庫，創(chuàng)建聯(lián)系人表1exportdefaultclassCommonConstants{2staticreadonlySEARCH_TEXT='搜索';3staticreadonlyFULL_WIDTH='100%';4staticreadonlyFULL_HEIGHT='100%';5staticreadonlyFULL_SIZE=1;6staticreadonlyPOSITION_X='80%';7staticreadonlyPOSITION_Y='85%';89staticreadonlySTORE_CONFIG={10name:'database.db',11//@ts-ignore12securityLevel:relationalStore.SecurityLevel.S113};14/**15*Accounttableconfig.16*/17staticreadonlyCONTACT_TABLE={18tableName:'accountTable',sqlCreate:'CREATETABLEIFNOTEXISTSaccountTable(idINTEGERPRIMARYKEYAUTOINCREMENT,accountTypeINTEGER,'+'nameTEXT,phoneNumber1TEXT,beizhuTEXT)',columns:['id','accountType','name','phoneNumber1','beizhu']20};19}20exportconstImageList={21222.2任務2的實施

(2)創(chuàng)建Rdb.ets文件，實現(xiàn)數(shù)據(jù)庫創(chuàng)建、查詢、插入等最基本的操作2.2任務2的實施

2.創(chuàng)建Rdb.ets文件，實現(xiàn)數(shù)據(jù)庫創(chuàng)建、查詢、插入等最基本的操作2.2任務2的實施

(2)創(chuàng)建Rdb.ets文件，實現(xiàn)數(shù)據(jù)庫創(chuàng)建、查詢、插入等最基本的操作2.2任務2的實施

(3)創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實現(xiàn)業(yè)務數(shù)據(jù)的增、刪、改、查操作。2.2任務2的實施

(3)創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實現(xiàn)業(yè)務數(shù)據(jù)的查詢操作。2.2任務2的實施

（3）創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實現(xiàn)業(yè)務數(shù)據(jù)的增、刪、改、查操作。2.2任務2的實施

(3)創(chuàng)建ContactTable.ets文件，基于Rdb中提供的方法實現(xiàn)業(yè)務數(shù)據(jù)的查詢操作。2.2任務2的實施

（4）在新增界面為確認圖標添加單擊事件響應當用戶在新增界面中輸入姓名、電話等信息時，需要將用戶輸入的值保存到一個ContactData類型的變量（此處命名為newAccount）對應字段中，在用戶點擊確認按鈕時，將這個newAccount插入到數(shù)據(jù)庫中。1

TextInput({placeholder:'姓名'})2.width(380)3.height(40)4.margin($r('app.float.edge_size_MM'))5.fontSize($r('app.float.font_size_M'))6.fontColor(Color.Black)7.onChange((value:string)=>{8this.newA=value9})獲取輸入文本值的方法如表所示，為TextInput增加onChange()方法的調用，將value的值賦值給對應字段。2.2任務2的實施

在新增界面為確認圖標添加單擊事件響應當用戶在新增界面中輸入姓名、電話等信息時，需要將用戶輸入的值保存到一個ContactData類型的變量（此處命名為newAccount）對應字段中，在用戶點擊確認按鈕時，將這個newAccount插入到數(shù)據(jù)庫中。使用onClick()方法為確認圖標增加單擊事件響應，在響應中，調用ContactTable的insertData()方法，將這個ContactData類型的數(shù)據(jù)插入到數(shù)據(jù)庫29Image($r('app.media.ok'))30.width($r('ponent_size_M'))31.aspectRatio(CommonConstants.FULL_SIZE)32.margin({right:$r('app.float.font_size_L')})33.onClick(()=>{34this.ContactTable.insertData(this.newAccount,(id)=>{35this.newAccount.id=id;36this.accounts.push(this.newAccount);3738router.back();39this.ContactTable.query(0,(result)=>{40this.accounts=result;41for(leti=0;i<(this.accounts.length);i++){42console.log('querysucess:'+this.accounts[i].name);43console.log('querysucess:'+this.accounts[i].phoneNumber);44}4546},true)47})2.2任務2的實施通過本任務，完成了數(shù)據(jù)模型的創(chuàng)建、數(shù)據(jù)庫的搭建以及查詢、新增方法的封裝。完成的編碼數(shù)據(jù)庫創(chuàng)建數(shù)據(jù)查詢數(shù)據(jù)新增學到的知識任務小結任務小結任務3顯示通訊錄聯(lián)系人列表03任務描述在本任務中，通訊錄聯(lián)系人主界面需要展示已經(jīng)保存的聯(lián)系人列表信息（性別圖標、姓名、電話）。當用戶在新建聯(lián)系人界面輸入新的聯(lián)系人信息，確認保存以后，能將新聯(lián)系人追加到主頁聯(lián)系人列表的最后面。任務目的知識目標：（1）熟悉UI組件列表的使用（2）掌握列表條目布局以及數(shù)據(jù)渲染的方法能力目標：（1）能熟練運用列表和列表條目展示列表素質目標：（1）培養(yǎng)并踐行編碼規(guī)范意識，變量命名可讀、格式規(guī)范，注釋清晰易讀。（2）培養(yǎng)自主學習能力，通過閱讀文檔，學習新知并能在實際項目中運用、解決問題。重難點重點：（1）列表與列表條目布局（2）行項目數(shù)據(jù)渲染的方法難點：列表行項目數(shù)據(jù)渲染的方法任務目標及重點難點1、列表組件

List是用來呈現(xiàn)連續(xù)、多行相同類型的數(shù)據(jù)項。多行數(shù)據(jù)的樣式往往相同（也可以不同），每一行稱為一個條目。3.1完成任務所需知識清單——列表2、列表布局

（1）設置主軸方向List組件主軸默認是垂直方向，即默認情況下不需要手動設置List方向，就可以構建一個垂直滾動列表。若是水平滾動列表場景，將List的listDirection屬性設置為Axis.Horizontal即可實現(xiàn)。listDirection默認為Axis.Vertical，即主軸默認是垂直方向。List(){...}.listDirection(Axis.Horizontal)3.1完成任務所需知識清單——列表

（2）設置交叉軸布局List組件的交叉軸布局可以通過lanes和alignListItem屬性進行設置，lanes屬性用于確定交叉軸排列的列表項數(shù)量，alignListItem用于設置子組件在交叉軸方向的對齊方式。List(){...}.lanes(2)以垂直列表為例，如果將lanes屬性設為2，表示構建的是一個兩列的垂直列表。lanes的默認值為1，即默認情況下，垂直列表的列數(shù)是1。3.1完成任務所需知識清單——列表2、列表布局3、在列表中顯示數(shù)據(jù)

最簡單的列表形式中，List靜態(tài)地創(chuàng)建其列表項ListItem的內容。若列表項是由多個組件元素組成的，則需要將這多個元素組合到一個容器組件內或組成一個自定義組件。1List(){2ListItem(){3Row(){4Image($r('app.media.iconE'))5.width(40)6.height(40)7.margin(10)89Text('小明')10.fontSize(20)11}12}1314ListItem(){15Row(){16Image($r('app.media.iconF'))17.width(40)18.height(40)19.margin(10)2021Text('小紅')22.fontSize(20)23}24}25}3.1完成任務所需知識清單——列表迭代列表內容

應用通過數(shù)據(jù)集合動態(tài)地創(chuàng)建列表，使用循環(huán)渲染可從數(shù)據(jù)源中迭代獲取數(shù)據(jù)，并在每次迭代過程中創(chuàng)建相應的組件，降低代碼復雜度。1importutilfrom'@ohos.util';23classContact{4key:string=util.generateRandomUUID(true);5name:string;6icon:Resource;78constructor(name:string,icon:Resource){9=name;10this.icon=icon;11}12}3.1完成任務所需知識清單——列表迭代列表內容

ArkTS通過ForEach提供了組件的循環(huán)渲染能力。以簡單形式的聯(lián)系人列表為例，將聯(lián)系人名稱和頭像數(shù)據(jù)以Contact類結構存儲到contacts數(shù)組，使用ForEach中嵌套ListItem的形式來代替多個平鋪的、內容相似的ListItem，從而減少重復代碼。15@Component16structSimpleContacts{17privatecontacts=[18newContact('小明',$r("app.media.iconA")),19newContact('小紅',$r("app.media.iconB")),20...21]2223build(){24List(){25ForEach(this.contacts,(item:Contact)=>{26ListItem(){27Row(){28Image(item.icon)29.width(40)30.height(40)31.margin(10)32Text().fontSize(20)33}34.width('100%')35.justifyContent(FlexAlign.Start)36}37},item=>item.key)38}39.width('100%')40}3.1完成任務所需知識清單——列表

3.1完成任務所需知識清單——狀態(tài)存儲1、狀態(tài)管理機制當參數(shù)改變時，UI作為返回結果，也將進行對應的改變。這些運行時的狀態(tài)變化所帶來的UI的重新渲染，在ArkUI中統(tǒng)稱為狀態(tài)管理機制例如，一段文本默認顯示為“HelloWorld”，當用戶點擊按鈕文本變?yōu)椤癏elloArkUI”，也即當用戶與應用程序的交互觸發(fā)了文本狀態(tài)變更，狀態(tài)變更引起了UI渲染，UI從“HelloWorld”變更為“HelloArkUI”。

變量必須被裝飾器裝飾才可以成為狀態(tài)變量，狀態(tài)變量的改變會引起UI的渲染刷新。如果不使用狀態(tài)變量，UI只能在初始化時渲染，后續(xù)將不會再刷新。

3.1完成任務所需知識清單——狀態(tài)存儲2、裝飾器的兩種分類根據(jù)狀態(tài)變量的影響范圍，將裝飾器可以大致分為：●管理組件擁有狀態(tài)的裝飾器：組件級別的狀態(tài)管理，可以觀察組件內變化，和不同組件層級的變化，但需要唯一觀察同一個組件樹上，即同一個頁面內?！窆芾響脫碛袪顟B(tài)的裝飾器：應用級別的狀態(tài)管理，可以觀察不同頁面，甚至不同UIAbility的狀態(tài)變化，是應用內全局的狀態(tài)管理。從數(shù)據(jù)的傳遞形式和同步類型層面看，裝飾器也可分為：●只讀的單向傳遞●可變更的雙向傳遞

3.1完成任務所需知識清單——狀態(tài)存儲3、管理應用擁有狀態(tài)的裝飾器

AppStorage由UI框架在應用程序啟動時創(chuàng)建，為應用程序UI狀態(tài)屬性提供中央存儲，是應用級的全局狀態(tài)共享。當要在頁面之間共享數(shù)據(jù)時，也即當A頁面顯示的數(shù)據(jù)，在B面修改后，A頁面能自動更新修改后的數(shù)據(jù)的場景下就可以采用這種解決方案。（1）觀察變化當裝飾的數(shù)據(jù)類型為boolean、string、number類型時，可以觀察到數(shù)值的變化。當裝飾的數(shù)據(jù)類型為class或者Object時，可以觀察到賦值和屬性賦值的變化，即Object.keys(observedObject)返回的所有屬性。當裝飾的對象是array時，可以觀察到數(shù)組添加、刪除、更新數(shù)組單元的變化。

3.1完成任務所需知識清單——狀態(tài)存儲3、管理應用擁有狀態(tài)的裝飾器

（2）框架行為

當@StorageLink(key)裝飾的數(shù)值改變被觀察到時，修改將被同步回AppStorage對應屬性鍵值key的屬性中。

AppStorage中屬性鍵值key對應的數(shù)據(jù)一旦改變，屬性鍵值key綁定的所有的數(shù)據(jù)（包括雙向@StorageLink和單向@StorageProp）都將同步修改；

當@StorageLink(key)裝飾的數(shù)據(jù)本身是狀態(tài)變量，它的改變不僅僅會同步回AppStorage中，還會引起所屬的自定義組件的重新渲染。

3.1完成任務所需知識清單——狀態(tài)存儲3、管理應用擁有狀態(tài)的裝飾器

3、管理應用擁有狀態(tài)的裝飾器

第一步：新增聯(lián)系人列表第二步：列表展示第三步：新建頁面數(shù)據(jù)通步到主頁面本任務要在主界面實現(xiàn)聯(lián)系人列表展示,在新建聯(lián)系人界面新增的數(shù)據(jù)在返回主界面時主動追加到列表最后面任務目標實施步驟3.2任務3的實施

1、主頁新增聯(lián)系人列表增加主頁面頁需要顯示的聯(lián)系人列表accounts，類型為Array<ContactData>；新增ContactTable，以使用其對數(shù)據(jù)庫進行查詢操作。在頁面顯示前，即在aboutToAppear()方法中，從數(shù)據(jù)庫查詢所有聯(lián)系人信息保存到accounts中1import{ImageList}from'../common/CommonConstants';2importContactTablefrom'../common/bean/ContactTable';3importContactDatafrom'../common/bean/ContactData';4importrouterfrom'@ohos.router';5importCommonConstantsfrom'../common/CommonConstants';6@Entry7@Component8structIndex{9@StatesearchText:string='';10@Stateaccounts:Array<ContactData>=[];11privateContactTable=newContactTable();1213searchController:SearchController=newSearchController();1415aboutToAppear(){16this.ContactTable.getRdbStore(()=>{17this.ContactTable.query(0,(result)=>{18this.accounts=result;19},true);20});21}2223build(){24Stack(){25

26

}27}28}3.2任務3的實施

2.列表展示12@Entry3@Component4structIndex{567build(){8Stack(){9Column(){1011

Search({value:this.searchText,placeholder:'要查詢的姓名',controller:this.searchController})12.searchButton(CommonConstants.SEARCH_TEXT)13.width('90%')14.borderRadius($r('app.float.radius_size_M'))15.borderWidth($r('app.float.border_size_S'))16.borderColor('#33182431')17.placeholderFont({size:$r('app.float.font_size_M')})18.textFont({size:$r('app.float.font_size_M')})19.backgroundColor(Color.White)20.onChange((searchValue:string)=>{21this.searchText=searchValue;22})23.onSubmit((searchValue:string)=>{24})25}3.2任務3的實施

2、主頁顯示聯(lián)系人列表

2.列表展示26Row(){27List({space:CommonConstants.FULL_SIZE}){28ForEach(this.accounts,(item:ContactData)=>{29ListItem(){30Row(){31Image(ImageList[item.accountType])32.width($r('ponent_size_M'))33.aspectRatio(CommonConstants.FULL_SIZE)34.margin({right:$r('app.float.edge_size_MP')})35Text()36.height($r('ponent_size_SM'))37.fontSize($r('app.float.font_size_M'))38.margin({right:$r('app.float.edge_size_MP')})39.width('20%')40Text(item.phoneNumber)41.height($r('ponent_size_SM'))42.fontSize($r('app.float.font_size_M'))43.margin({left:'50'})44}45.width(CommonConstants.FULL_WIDTH)46.padding({left:$r('app.float.edge_size_M'),right:$r('app.float.edge_size_M')})47}3.2任務3的實施

2.列表展示48.width(CommonConstants.FULL_WIDTH)49.height($r('ponent_size_LM'))50.onClick(()=>{5152})53})54}55.width(CommonConstants.FULL_WIDTH)56.borderRadius($r('app.float.radius_size_L'))57.backgroundColor(Color.White)58}59.width(CommonConstants.FULL_WIDTH)60.padding({left:$r('app.float.edge_size_M'),right:$r('app.float.edge_size_M')})61.margin({top:$r('app.float.edge_size_SM')})3.2任務3的實施

3、修改Accounts數(shù)據(jù)狀態(tài)類型

（1）

在新建頁面新增了一條記錄以后，不僅要把新聯(lián)系人插入到數(shù)據(jù)庫，也需要將這條聯(lián)系人信息增加到主頁的accounts；

（2）

在頁面第一次讀取數(shù)據(jù)庫所有聯(lián)系人信息時，將這個結果accounts保存為應用級數(shù)據(jù)共享，這樣從新增頁面保存完回到主頁面時，主頁面就能實時顯示最新加入的聯(lián)系人了。12structIndex{3@StorageLink('varA')accounts:Array<AccountData>=[];4修改Index.ets修改AddPage.ets1structAddPage{2@StorageLink('varA')accounts:Array<AccountData>=[];34build(){5Column(){6Row(){7Image($r('app.media.cancel'))3.2任務3的實施修改Index.ets通過本任務，完成了從數(shù)據(jù)庫讀取聯(lián)系人信息，再主頁面數(shù)據(jù)列表的展示。完成的編碼List布局循環(huán)渲染學到的知識任務小結任務小結任務4查看聯(lián)系人詳情04任務描述當用戶在在聯(lián)系人主界面的列表中點擊任意一聯(lián)系人條目，將跳轉到聯(lián)系人詳情界面。當點擊詳情界面的返回箭頭圖標時，將返回到聯(lián)系人主頁面。任務目的知識目標：（1）掌握跳轉時參數(shù)的傳遞與解析能力目標：（1）能熟練傳遞參數(shù)與解析參數(shù)素質目標：（1）培養(yǎng)并踐行編碼規(guī)范意識，變量命名可讀、格式規(guī)范，注釋清晰易讀。（2）培養(yǎng)自主學習能力，通過閱讀文檔，學習新知并能在實際項目中運用、解決問題。重難點重點：掌握頁面跳轉時參數(shù)的傳遞與解析難點：掌握頁面跳轉時參數(shù)的傳遞與解析

任務目標及重點難點任務目標及重點難點路由參數(shù)的傳遞與解析4.1知識清單

如果在跳轉時需要傳遞一些數(shù)據(jù)給目標頁，則可以在調用Router模塊的方法時，添加一個params屬性，并指定一個對象