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

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

開發者Mack基于HarmonyOS的ArkUI框架開發的IQ- EQ測試應用。此應用采用eTS語言開發，包含啟動頁面、測試入口頁面、答題頁面和得分頁面等多個頁面，功能非常完善。

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

一、代碼結構介紹

我們先來看看IQ- EQ測試應用的文件目錄結構，相關文件說明如圖1所示。

• ets/default/module目錄下的eTS文件，用于定義IQ和EQ測試題目數據。
• ets/default/pages目錄下的eTS文件，用于定義應用的UI界面。

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

二、關鍵代碼及知識點

在開發IQ- EQ測試應用的過程中，主要運用了容器組件、裝飾器、頁面路由和AppStorage等。下面，我們就結合IQ- EQ測試應用的關鍵代碼，一起來學習這些知識點。

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

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

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

開發者可以組合系統組件為自定義組件，通過這種方式將頁面組件化為一個個獨立的UI單元，實現頁面不同單元的獨立創建、開發和復用。

@Component是組件化的標志。@Component裝飾的struct，表示該結構體具有組件化能力，能夠成為一個獨立的組件，稱為自定義組件。自定義組件必須定義build方法，在build方法里描述UI結構。

(2) @Entry

@Entry裝飾的自定義組件，表示該組件是頁面的總入口，也可以理解為頁面的根節點。加載頁面時，將首先創建并呈現@Entry裝飾的自定義組件。值得注意的是，一個頁面有且僅能有一個@Entry，只有被@Entry修飾的組件或者其子組件，才會在頁面上顯示。

(3) @State

@State裝飾的變量是組件內部的狀態數據，當這些狀態數據被修改時，將會調用所在組件的build方法進行UI刷新。

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

import router from '@system.router';

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

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

AppStorage是整個UI應用程序狀態的中心“數據庫”，包含整個應用程序需要訪問的所有狀態屬性。AppStorage提供了相應的裝飾器和接口供應用程序使用。應用程序的UI組件可以通過裝飾器將應用程序狀態數據與AppStorage進行同步。此外，應用程序還可以通過AppStorage提供的接口添加、讀取、修改和刪除AppStorage中保存的應用程序狀態屬性。API所做更改引起的狀態數據變更會被同步到UI組件上，應用程序將會調用所在組件的build方法進行UI更新。

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

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

三、結束語

上面介紹的eTS開發知識，你已經學會了嗎？感興趣的小伙伴，可以獲取IQ- EQ測試應用的完整代碼，繼續學習哦~