介紹

本篇Codelab是基于ArkTS語言的低代碼開發方式實現的一個簡單實例。具體實現功能如下：

1. 創建一個低代碼工程。
2. 通過拖拽的方式實現任務列表和任務信息界面的界面布局。
3. 在UI編輯界面實現數據動態渲染和事件的綁定。

最終實現效果如下：

相關概念

低代碼開發方式具有豐富的UI界面編輯功能，通過可視化界面開發方式快速構建布局，可有效降低開發者的上手成本并提升開發者構建UI界面的效率。

• [List]：List 是很常用的滾動類容器組件之一，它按照水平或者豎直方向線性排列子組件， List 的子組件必須是 ListItem ，它的寬度默認充滿 List 的寬度。
• [循環渲染]：開發框架提供循環渲染（ForEach組件）來迭代數組，并為每個數組項創建相應的組件。
• [警告彈窗]：顯示警告彈窗組件，可設置文本內容與響應回調。

環境搭建

軟件要求

• [DevEco Studio]版本：DevEco Studio 3.1 Release。
• OpenHarmony SDK版本：API version 9。

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙Harmony&OpenHarmony開發指導：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md點擊或者復制轉到。

代碼結構解讀

鴻蒙next文檔學習
+mau123789是v直接拿取
└──entry/src/main/ets           // 代碼區
│  ├──common                    
│  │  ├──images                 // 圖片
│  │  └──Const.ets              // 常量類
│  ├──entryability              
│  │  └──EntryAbility.ets       // 程序入口類
│  └──pages
│     ├──TaskDetailPage.ets     // 詳情頁的邏輯描述文件
│     └──TaskPage.ets           // 首頁的邏輯描述文件
├──entry/src/main/resources     // 資源文件
└──entry/src/main/supervisual
   └──pages
      ├──TaskDetailPage.visual  // 詳情頁面的數據模型
      └──TaskPage.visual        // 首頁頁面的數據模型

創建低代碼工程

首先需要先創建一個低代碼的工程，創建工程時，在配置工程界面打開“Enable Super Visual”開關，點擊“Finish”。工程創建完成后，在src/main目錄下會生成一個supervisual目錄，supervisual/pages目錄下的.visual文件，可以通過組件拖拽實現的頁面數據模型文件。ets/pages下的.ets文件是跟supervisual/pages中的文件一一對應的，是對應界面的邏輯描述文件。

低代碼設計界面布局

打開TaskPage.visual文件，界面如圖所示：

中間部分是界面布局后的整體效果。

左側上部的“UI Control”模塊是我們可以進行拖拽的組件。

左側下部的“Component Tree”模塊是我們界面上所有的元素樹。

右側的“Attributes&Styles”模塊是當前選中的界面元素的屬性和樣式的詳細信息，通過修改這個模塊的內容來改變界面上元素的樣式屬性等信息。

任務列表頁面分了上下兩部分，上邊拖進來了一個Row組件來展示界面標題，下邊用一個List組件來實現任務列表的數據展示，每個Item子組件用的橫向布局，里邊拖進去了一個Image組件和兩個Text組件。

實現數據動態渲染

頁面布局完成后，需要給ListItem 組件綁定一個ForEach的數據源。如圖：

// TaskPage.ets
@State taskList: Array< TaskInfo > = TASK_LIST;

taskClickAction() {
  router.push({
    url: 'pages/TaskDetailPage'
  });
}

同時給ListItem綁定一個點擊事件來實現界面的跳轉功能。

手動創建低代碼頁面

在pages下新建一個visual文件（右鍵->New->Visual），IDE會在ets/pages和supervisual/pages下同時創建一個名字相同后綴分別是.ets和.visual的文件，同樣通過組件拖拽的方式去實現任務信息界面的布局，給界面綁定數據源和點擊事件。detail.ets文件中代碼如下：

@State detailList: Array< DetailModel > = DETAILS;

showDialog() {
  AlertDialog.show({
    title: $r('app.string.task_clock'),
    message: $r('app.string.task_done'),
    autoCancel: true,
    confirm: {
      value: $r('app.string.clock'),
      action: () = > {
      }
    }
  });
}

backAction() {
  router.back();
}

審核編輯 黃宇