介紹

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

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

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

HarmonyOS如何使用低代碼實(shí)現(xiàn)界面布局（簡單的界面代碼）

環(huán)境搭建

軟件要求

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

硬件要求

開發(fā)板類型：潤和RK3568開發(fā)板。
OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

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

獲取OpenHarmony系統(tǒng)版本：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：

HarmonyOS如何使用低代碼實(shí)現(xiàn)界面布局（簡單的界面代碼）

2.搭建燒錄環(huán)境。

完成DevEco Device Tool的安裝
完成RK3568開發(fā)板的燒錄

3.搭建開發(fā)環(huán)境。

開始前請參考工具準(zhǔn)備，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
開發(fā)環(huán)境配置完成后，請參考使用工程向?qū)?chuàng)建工程（模板選擇“Empty Ability”）。
工程創(chuàng)建完成后，選擇使用真機(jī)進(jìn)行調(diào)測。

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

└──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目錄下會生成一個(gè)supervisual目錄，supervisual/pages目錄下的.visual文件，可以通過組件拖拽實(shí)現(xiàn)的頁面數(shù)據(jù)模型文件。ets/pages下的.ets文件是跟supervisual/pages中的文件一一對應(yīng)的，是對應(yīng)界面的邏輯描述文件。

HarmonyOS如何使用低代碼實(shí)現(xiàn)界面布局（簡單的界面代碼）

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

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

HarmonyOS如何使用低代碼實(shí)現(xiàn)界面布局（簡單的界面代碼）

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

左側(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ù)動態(tài)渲染

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

HarmonyOS如何使用低代碼實(shí)現(xiàn)界面布局（簡單的界面代碼）

// TaskPage.ets@State taskList: Array<TaskInfo> = TASK_LIST;taskClickAction() { router.push({ url: 'pages/TaskDetailPage' });}

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

HarmonyOS如何使用低代碼實(shí)現(xiàn)界面布局（簡單的界面代碼）

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

在pages下新建一個(gè)visual文件（右鍵->New->Visual），IDE會在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();}