介紹

本篇Codelab是基于ArkTS語言的低代碼開發(fā)方式實(shí)現(xiàn)的一個(gè)簡(jiǎn)單實(shí)例。具體實(shí)現(xiàn)功能如下：

1. 創(chuàng)建一個(gè)低代碼工程。
2. 通過拖拽的方式實(shí)現(xiàn)任務(wù)列表和任務(wù)信息界面的界面布局。
3. 在UI編輯界面實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)渲染和事件的綁定。

最終實(shí)現(xiàn)效果如下：

相關(guān)概念

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

• [List]：List 是很常用的滾動(dòng)類容器組件之一，它按照水平或者豎直方向線性排列子組件， List 的子組件必須是 ListItem ，它的寬度默認(rèn)充滿 List 的寬度。
• [循環(huán)渲染]：開發(fā)框架提供循環(huán)渲染（ForEach組件）來迭代數(shù)組，并為每個(gè)數(shù)組項(xiàng)創(chuàng)建相應(yīng)的組件。
• [警告彈窗]：顯示警告彈窗組件，可設(shè)置文本內(nèi)容與響應(yīng)回調(diào)。

環(huán)境搭建

軟件要求

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

硬件要求

• 開發(fā)板類型：[潤(rùn)和RK3568開發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 鴻蒙Harmony&OpenHarmony開發(fā)指導(dǎo)：gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md點(diǎn)擊或者復(fù)制轉(zhuǎn)到。

代碼結(jié)構(gòu)解讀

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

創(chuàng)建低代碼工程

首先需要先創(chuàng)建一個(gè)低代碼的工程，創(chuàng)建工程時(shí)，在配置工程界面打開“Enable Super Visual”開關(guān)，點(diǎn)擊“Finish”。工程創(chuàng)建完成后，在src/main目錄下會(huì)生成一個(gè)supervisual目錄，supervisual/pages目錄下的.visual文件，可以通過組件拖拽實(shí)現(xiàn)的頁面數(shù)據(jù)模型文件。ets/pages下的.ets文件是跟supervisual/pages中的文件一一對(duì)應(yīng)的，是對(duì)應(yīng)界面的邏輯描述文件。

低代碼設(shè)計(jì)界面布局

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

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

左側(cè)上部的“UI Control”模塊是我們可以進(jìn)行拖拽的組件。

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

右側(cè)的“Attributes&Styles”模塊是當(dāng)前選中的界面元素的屬性和樣式的詳細(xì)信息，通過修改這個(gè)模塊的內(nèi)容來改變界面上元素的樣式屬性等信息。

任務(wù)列表頁面分了上下兩部分，上邊拖進(jìn)來了一個(gè)Row組件來展示界面標(biāo)題，下邊用一個(gè)List組件來實(shí)現(xiàn)任務(wù)列表的數(shù)據(jù)展示，每個(gè)Item子組件用的橫向布局，里邊拖進(jìn)去了一個(gè)Image組件和兩個(gè)Text組件。

實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)渲染

頁面布局完成后，需要給ListItem 組件綁定一個(gè)ForEach的數(shù)據(jù)源。如圖：

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

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

同時(shí)給ListItem綁定一個(gè)點(diǎn)擊事件來實(shí)現(xiàn)界面的跳轉(zhuǎn)功能。

手動(dòng)創(chuàng)建低代碼頁面

在pages下新建一個(gè)visual文件（右鍵->New->Visual），IDE會(huì)在ets/pages和supervisual/pages下同時(shí)創(chuàng)建一個(gè)名字相同后綴分別是.ets和.visual的文件，同樣通過組件拖拽的方式去實(shí)現(xiàn)任務(wù)信息界面的布局，給界面綁定數(shù)據(jù)源和點(diǎn)擊事件。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();
}

審核編輯 黃宇