【Harmony OS】【ArkUI】ets開發基礎頁面布局與資料連接-有解無憂

前言

本篇是以 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() 介面，彈出路由堆疊最上面的頁面，即回傳上一級頁面，