【開發(fā)者說】欄目是為HarmonyOS開發(fā)者提供的展示和分享平臺，在這里，大家可以發(fā)表自己的技術(shù)洞察和見解，也可以展示自己的開發(fā)心得和成果。

歡迎大家積極投稿，后臺回復(fù)【投稿】，即可獲得投稿渠道。期待你們的分享~

開發(fā)者M(jìn)ack基于HarmonyOS的ArkUI框架開發(fā)的IQ- EQ測試應(yīng)用。此應(yīng)用采用eTS語言開發(fā)，包含啟動(dòng)頁面、測試入口頁面、答題頁面和得分頁面等多個(gè)頁面，功能非常完善。

https://developer.huawei.com/consumer/cn/blog/topic/03728323510050211

一、代碼結(jié)構(gòu)介紹

我們先來看看IQ- EQ測試應(yīng)用的文件目錄結(jié)構(gòu)，相關(guān)文件說明如圖1所示。

• ets/default/module目錄下的eTS文件，用于定義IQ和EQ測試題目數(shù)據(jù)。
• ets/default/pages目錄下的eTS文件，用于定義應(yīng)用的UI界面。

"js": [  {    "mode": {      "syntax": "ets",   //表示以聲明式語法風(fēng)格進(jìn)行編程      "type": "pageAbility"    },    "pages": [      "pages/index",   //“pages”列表的第一個(gè)頁面為應(yīng)用的啟動(dòng)頁      "pages/start",      "pages/iqTest",      "pages/iqScore",      "pages/eqTest",      "pages/eqScore"    ],    "name": "default",    "window": {      "designWidth": 720,      "autoDesignWidth": false    }  }]

二、關(guān)鍵代碼及知識點(diǎn)

在開發(fā)IQ- EQ測試應(yīng)用的過程中，主要運(yùn)用了容器組件、裝飾器、頁面路由和AppStorage等。下面，我們就結(jié)合IQ- EQ測試應(yīng)用的關(guān)鍵代碼，一起來學(xué)習(xí)這些知識點(diǎn)。

  build() {    Column() {      // 頂部標(biāo)題      TopTitle()      Scroll() {        Column() {          // 顯示問題列表          List() {            ForEach(this.questionsDataArray, item => {              ListItem() {                // 循環(huán)展示問題                QuestionsListItem({ questionItem: item,  questionsId:item.id,                  btnSubmit:$btnSubmit1})              }            }, item => item.id.toString())          }          …

• Column：沿垂直方向布局的容器組件。
• Row：沿水平方向布局的容器組件。
• Scroll：可滾動(dòng)的容器組件，當(dāng)子組件的布局尺寸超過父組件的視口時(shí)，內(nèi)容可以滾動(dòng)。
• Grid：網(wǎng)格容器組件，采用二維布局，將容器劃分成“行”和“列”。
• List：列表組件，包含一系列相同寬度的列表項(xiàng)。
• Flex：彈性布局組件。
• Stack：堆疊容器組件，子組件按照順序依次入棧，后一個(gè)子組件覆蓋前一個(gè)子組件。

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-container-column-0000001111421414

@Entry@Componentstruct Index {

  @State private opacityValue: number = 0  @State private scaleValue: number = 0

  build() {…  }}

(1) @Component

開發(fā)者可以組合系統(tǒng)組件為自定義組件，通過這種方式將頁面組件化為一個(gè)個(gè)獨(dú)立的UI單元，實(shí)現(xiàn)頁面不同單元的獨(dú)立創(chuàng)建、開發(fā)和復(fù)用。

@Component是組件化的標(biāo)志。@Component裝飾的struct，表示該結(jié)構(gòu)體具有組件化能力，能夠成為一個(gè)獨(dú)立的組件，稱為自定義組件。自定義組件必須定義build方法，在build方法里描述UI結(jié)構(gòu)。

(2) @Entry

@Entry裝飾的自定義組件，表示該組件是頁面的總?cè)肟冢部梢岳斫鉃轫撁娴母?jié)點(diǎn)。加載頁面時(shí)，將首先創(chuàng)建并呈現(xiàn)@Entry裝飾的自定義組件。值得注意的是，一個(gè)頁面有且僅能有一個(gè)@Entry，只有被@Entry修飾的組件或者其子組件，才會在頁面上顯示。

(3) @State

@State裝飾的變量是組件內(nèi)部的狀態(tài)數(shù)據(jù)，當(dāng)這些狀態(tài)數(shù)據(jù)被修改時(shí)，將會調(diào)用所在組件的build方法進(jìn)行UI刷新。

除了以上三種裝飾器，方舟開發(fā)框架還提供了@Prop、@Link、@Observed、@ObjectLink、@Consume、@Provide、@StorageProp、 @StorageLink、@Watch、@Preview、@Builder、@Extend、@CustomDialog等裝飾器。裝飾器的更多詳細(xì)內(nèi)容，盡在聲明式語法中。

import router from '@system.router';

router.push({  uri: 'pages/iqTest',  params: { paramCurrentId:(this.currentId + 1)}  // 自動(dòng)跳轉(zhuǎn)下一題})

https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-apis-basic-features-routes-0000000000611824

AppStorage是整個(gè)UI應(yīng)用程序狀態(tài)的中心“數(shù)據(jù)庫”，包含整個(gè)應(yīng)用程序需要訪問的所有狀態(tài)屬性。AppStorage提供了相應(yīng)的裝飾器和接口供應(yīng)用程序使用。應(yīng)用程序的UI組件可以通過裝飾器將應(yīng)用程序狀態(tài)數(shù)據(jù)與AppStorage進(jìn)行同步。此外，應(yīng)用程序還可以通過AppStorage提供的接口添加、讀取、修改和刪除AppStorage中保存的應(yīng)用程序狀態(tài)屬性。API所做更改引起的狀態(tài)數(shù)據(jù)變更會被同步到UI組件上，應(yīng)用程序?qū){(diào)用所在組件的build方法進(jìn)行UI更新。

// 點(diǎn)擊圖片表示選擇, 保存題目的選擇結(jié)果AppStorage.SetOrCreate("question_id_"+this.currentId,item.id)

AppStorage.Delete('question_id_'+item.id)

三、結(jié)束語

上面介紹的eTS開發(fā)知識，你已經(jīng)學(xué)會了嗎？感興趣的小伙伴，可以獲取IQ- EQ測試應(yīng)用的完整代碼，繼續(xù)學(xué)習(xí)哦~