【Harmony OS】【ArkUI】ets開發基礎頁面佈局與數據連接

前言本篇是以 HarmonyOS 官網的基於 TS 擴展的聲明式開發範式文檔，頁面佈局與連接為基礎進行編寫。儘管原篇已非常精簡，但是作為初學者想要快速入門，使用 ets 方式實現出 List 佈局、Grid 佈局、數據連接及頁面跳轉功能，還是稍顯晦澀。所以筆者將原文進行整合，提取出其中的要點，以便 ...

前言

本篇是以 HarmonyOS 官網的基於 TS 擴展的聲明式開發範式文檔，頁面佈局與連接為基礎進行編寫。儘管原篇已非常精簡，但是作為初學者想要快速入門，使用 ets 方式實現出 List 佈局、Grid 佈局、數據連接及頁面跳轉功能，還是稍顯晦澀。所以筆者將原文進行整合，提取出其中的要點，以便通俗易懂地呈現給讀者，希望能幫助你快速瞭解 Harmony 的 ETS 開發，學會簡單的佈局與數據連接。本篇最後會貼上參考原文鏈接。

首先講一下大致的思路，我們要實現一個簡單的 List 頁面佈局、一個簡單的 Grid 頁面佈局，點擊頁面右上角的按鈕可以進行兩個佈局頁面的跳轉。List 佈局和 Grid 佈局中的每個 item 都對應著一條數據，並且也可以進行點擊跳轉到簡單的 detail 頁面。所以筆者將整個功能的實現分為了四個步驟，構建數據模型、構建列表 List 佈局、構建列表 Grid 佈局、頁面跳轉與數據傳遞，這與原篇大致相同。

1. 構建數據模型。

做菜首先需要備菜，數據模型是整個程式的內容，我們需要先準備好。但是因為我們是快速入門，就不需要細究細節，只要符合大概的邏輯即可。

這次我們需要準備的數據模型是食物數據模型，每個食物有食物名稱、卡路里、蛋白質、脂肪、碳水和維生素C的欄位。

1) 新建 model 文件夾，在 model 目錄下創建 FoodData.ets。

2) 定義食物數據的存儲模型 FoodData 和枚舉變數 Category，FoodData 類包含食物 id、名稱（name）、分類（category）、圖片（image）、熱量（calories）、蛋白質（protein）、脂肪（fat）、碳水（carbohydrates）和維生素C（vitaminC）屬性。

*eTS 語言是在ts語言的基礎上的擴展，同樣支持 ts 語法。

3) 存入食物圖片資源。在 resources > base > media 目錄下存入食物圖片資源，筆者這裡不究細節，就只用一個 icon.png 代替了。

4) 創建食物資源數據。在 model 文件夾下創建 FoodDataModels.ets，在該頁面中聲明食物成分數組 FoodComposition。

以12個食物數據為例，實際開發中，開發者可以自定義更多的數據資源，當食物資源很多時，建議使用數據懶載入LazyForEach。以下營養數據均來自網路。

創建 initializeOnStartUp 方法來初始化 FoodData 的數組。在 FoodDataModels.ets 中使用了定義在 FoodData.ets 的 FoodData 和 Category，所以要將 FoodData.ets 的 FoodData 類 export，在FoodDataModels.ets 內 import FoodData 和 Category。

2. 構建列表 List 佈局。

數據是整個程式的內容與血肉，頁面佈局則是整體的框架和骨骼。現在數據模型已經準備好，開始搭建整個程式的框架和構建整體的頁面佈局。

首先構建一個 List 列表佈局，使用 List 組件和 ForEach 迴圈渲染。這裡的 List 列表就和 Android 中的 ListView 有一點相似，大致的功能就是我們日常使用的 APP 的下拉列表。

1) 在 pages 目錄新建頁面 FoodCategoryList.ets，將 index.ets 改名為 FoodDetail.ets，並將其添加到 config.json 文件下的 pages 標簽，位於第一序位的頁面為首頁。

2) FoodCategoryList.ets 引入 FoodData 類和 initializeOnStartup 方法。

3) 新建 FoodList 組件作為頁面入口組件，FoodListItem 為其子組件。List組件是列表組件，適用於重覆同類數據的展示，其子組件為 ListItem，適用於展示列表中的單元。

4) 給 FoodListItem 添加一些細節。添加圖片和內容。

5) 給 FoodList 添加一些細節。添加標題，引入 ForEach 迴圈渲染每一條 item。

6) 打開模擬器或者預覽器，即可查看實現的 List 列表的效果。

3. 構建列表 Grid 佈局。

上面我們使用ets開發實現了 List 列表的功能，接下來我們使用ets來開發實現 Grid 列表。Grid 列表其實就是網格列表功能，和 Android 中的 GridView 有點類似。

頁面佈局上可以提供給用戶兩種顯示方式：列表顯示和網格顯示，實現通過頁簽切換不同分類的列表和網格佈局。

1) 將 Category 枚舉類型引入 FoodCategoryList 頁面，並且將原來引入 FoodData 的類註釋掉。

2) 新建 FoodGrid 組件作為頁面入口組件，FoodGridItem 為其子組件。Grid 組件是網格組件，適用於重覆同類數據的展示，其子組件為 GridItem，適用於展示列表中的單元。

3) 給 FoodGridItem 添加一些細節。展示食物圖片、名稱和卡路里，實現其UI佈局，為 GridItem 的子組件。每個 FoodGridItem 高度為184，行間距為8，設置 Grid 總高度為(184 + 8) * 6 - 8 = 1144。

4) 給 FoodGrid 添加一些細節。實現2 * 6的網格佈局（一共12個食物數據資源）。創建 Grid 組件，設置列數 columnsTemplate('1fr 1fr')，行數 rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr')，行間距和列間距 rowsGap 和 columnsGap 為8。創建 Scroll 組件，使其可以滑動。

5) 創建 FoodCategoryList 和 FoodCategory 組件，其中 FoodCategoryList 作為新的頁面入口組件，在入口組件調用 initializeOnStartup 方法。將原來的 FoodList 類的 initializeOnStartup 方法和 @Entry 去除。

6) 給 FoodCategory 添加一些細節。創建展示蔬菜（Category.Vegetable）、水果（Category.Fruit）、堅果（Category.Nut）、海鮮（Category.SeaFood）和甜品（Category.Dessert）分類的頁簽。

7) 給 FoodCategoryList 添加一些細節。在 FoodCategoryList 組件內創建 showList 成員變數，用於控制 List 佈局和 Grid 佈局的渲染切換。需要用到條件渲染語句 if...else...。在頁面右上角創建切換List/Grid 佈局的圖標。設置 Stack 對齊方式為頂部尾部對齊 TopEnd，創建 Image 組件，設置其點擊事件，即 showLis t取反。添加 @State 裝飾器。點擊右上角的 switch 標簽後，頁面沒有任何變化，這是因為 showList 不是有狀態數據，它的改變不會觸發頁面的刷新。需要為其添加 @State 裝飾器，使其成為狀態數據，它的改變會引起其所在組件的重新渲染。

8) 打開模擬器或者預覽器，即可查看實現的 List 列表的效果。點擊上面一排 tab 可以進行標簽切換，展示不同標簽對應的內容。點擊右上角可以進行 list 和 grid 的切換。

4. 頁面跳轉與數據傳遞。

上面我們已經完成了頁面佈局的搭建和讀取數據模型，接下來需要實現頁面跳轉和數據傳遞的功能。其實在上面兩個頁面佈局切換就已經用到了頁面跳轉，這次要實現的是 list 和 grid 的 item 點擊時跳轉到詳情界面，還有頁面跳轉時的數據傳遞功能。

頁面跳轉：點擊食物分類列表頁面的食物條目後，跳轉到食物詳情頁；點擊食物詳情頁的返回按鈕，返回到食物列表頁。

頁面間數據傳遞：點擊不同的食物條目後，FoodDetail 接受前一個頁面的數據，渲染對應的食物詳情頁。。

1) 點擊 FoodListItem 後跳轉到 FoodDetail 頁面。在 FoodListItem 內創建 Navigator 組件，使其子組件都具有路由功能，目標頁面 target為'pages/FoodDetail'。

點擊 FoodGridItem 後跳轉到 FoodDetail 頁面。調用頁面路由 router 模塊的 push 介面，將 FoodDetail 頁面推到路由棧中，實現頁面跳轉。使用 router 路由API介面，需要先引入 router。

這我們在上面都已添加，只需要再引入 router。

2) 在 FoodDetail 頁面增加回到食物列表頁面的圖標。在 resources > phone > media 文件夾下存入回退圖標 Back.png。新建自定義組件 PageTitle，包含後退的圖標和 Food Detail 的文本，調用路由的 router.back() 介面，彈出路由棧最上面的頁面，即返回上一級頁面。