一区二区三区三上|欧美在线视频五区|国产午夜无码在线观看视频|亚洲国产裸体网站|无码成年人影视|亚洲AV亚洲AV|成人开心激情五月|欧美性爱内射视频|超碰人人干人人上|一区二区无码三区亚洲人区久久精品

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

OpenHarmony實例應(yīng)用:【常用組件和容器低代碼】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-14 09:27 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

介紹

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

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

最終實現(xiàn)效果如下:

相關(guān)概念

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

  • [List]:List 是很常用的滾動類容器組件之一,它按照水平或者豎直方向線性排列子組件, List 的子組件必須是 ListItem ,它的寬度默認充滿 List 的寬度。
  • [循環(huán)渲染]:開發(fā)框架提供循環(huán)渲染(ForEach組件)來迭代數(shù)組,并為每個數(shù)組項創(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ā)板類型:[潤和RK3568開發(fā)板]。
  • OpenHarmony系統(tǒng):3.2 Release。

環(huán)境搭建

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

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

搜狗高速瀏覽器截圖20240326151450.png

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

鴻蒙next文檔學(xué)習(xí)
+mau123789v直接拿取
└──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)建一個低代碼的工程,創(chuàng)建工程時,在配置工程界面打開“Enable Super Visual”開關(guān),點擊“Finish”。工程創(chuàng)建完成后,在src/main目錄下會生成一個supervisual目錄,supervisual/pages目錄下的.visual文件,可以通過組件拖拽實現(xiàn)的頁面數(shù)據(jù)模型文件。ets/pages下的.ets文件是跟supervisual/pages中的文件一一對應(yīng)的,是對應(yīng)界面的邏輯描述文件。

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

打開TaskPage.visual文件,界面如圖所示:

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

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

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

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

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

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

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

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

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

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

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

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

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • 代碼
    +關(guān)注

    關(guān)注

    30

    文章

    4900

    瀏覽量

    70797
  • 鴻蒙
    +關(guān)注

    關(guān)注

    60

    文章

    2623

    瀏覽量

    44076
  • OpenHarmony
    +關(guān)注

    關(guān)注

    29

    文章

    3856

    瀏覽量

    18653
收藏 人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評論

    相關(guān)推薦
    熱點推薦

    鴻蒙開發(fā)OpenHarmony組件復(fù)用案例

    和響應(yīng)速度。 在OpenHarmony應(yīng)用開發(fā)時,自定義組件被@Reusable裝飾器修飾時表示該自定義組件可以復(fù)用。在父自定義組件下創(chuàng)建的可復(fù)用
    發(fā)表于 01-15 17:37

    小白福利!教你用代碼實現(xiàn)一個簡單的頁面跳轉(zhuǎn)功能

    。 3. 開發(fā)第一個頁面 我們先開發(fā)第一個頁面,如圖4所示,第一個頁面是在容器中展示“代碼入門”文本和“一鍵入門”按鈕,它們分別可以通過Div、Text、和Button組件來實現(xiàn)。下
    發(fā)表于 05-16 17:22

    【PIMF】代碼(可視化界面)入門OpenHarmony3.1 Release應(yīng)用開發(fā)

    文件夾及對應(yīng)的visual文件。編寫第一個頁面工程同步完成后,第個頁面已有一個容器、文本(Hello World)顯示。為了更詳細地了解代碼開發(fā),我們刪除畫布原有模板組件,從零開始完
    發(fā)表于 05-20 11:54

    HarmonyOS/OpenHarmony應(yīng)用開發(fā)-ArkTSAPI組件總體分類與說明(上)

    一、行列與分欄 Column 沿垂直方向布局的容器組件。 ColumnSplit 垂直方向分隔布局容器組件,將子組件縱向布局,并在每個子
    發(fā)表于 08-15 11:14

    OpenHarmony組件復(fù)用示例

    組件復(fù)用。 總結(jié) 本文介紹了開發(fā)OpenHarmony應(yīng)用時如何使用組件復(fù)用能力,提供代碼示例,期望幫助關(guān)注組件復(fù)用的開發(fā)者朋友們。 如有任
    發(fā)表于 08-29 14:40

    OpenHarmony應(yīng)用開發(fā)—ArkUI組件集合

    |||||---GridItemControlPanel.ets |||||---GridItemSample.ets // 網(wǎng)格容器組件 ||||---gridSample |||||---GridControlPanel.ets
    發(fā)表于 09-22 14:56

    openharmony代碼質(zhì)量如何 openharmony代碼下載地址

    概念定義的新型應(yīng)用,不支持基于安卓 API/SDK 開發(fā)的用戶應(yīng)用程序運行。 ? 源碼獲取方式 ? ? ? ?openharmony代碼下載地址:https://hmxt.org
    的頭像 發(fā)表于 06-22 17:18 ?2424次閱讀

    JavaScript常用檢測腳本實例代碼免費下載

    本文檔的主要內(nèi)容詳細介紹的是JavaScript常用檢測腳本實例代碼免費下載。
    發(fā)表于 02-03 17:02 ?6次下載

    openharmony 運行代碼操作

    openharmony 運行代碼操作 openharmony 運行代碼,本文主要介紹windows環(huán)境下OpenHarmony社區(qū)
    的頭像 發(fā)表于 06-21 19:46 ?2527次閱讀

    openharmony代碼獲取分析

    本文檔將介紹如何獲取OpenHarmony源碼并說明OpenHarmony的源碼目錄結(jié)構(gòu)。OpenHarmony代碼組件的形式開放,開發(fā)
    的頭像 發(fā)表于 06-23 16:30 ?3127次閱讀
    <b class='flag-5'>openharmony</b><b class='flag-5'>代碼</b>獲取分析

    如何對OpenHarmony貢獻代碼

    互聯(lián)產(chǎn)業(yè)的繁榮發(fā)展。 目前代碼倉托管在 gitee 上,官方地址: https://gitee.com/openharmony 下面主要來講講如何對 OpenHarmony 貢獻代碼。
    的頭像 發(fā)表于 09-28 09:58 ?1658次閱讀
    如何對<b class='flag-5'>OpenHarmony</b>貢獻<b class='flag-5'>代碼</b>

    2022 OpenHarmony組件大賽,共建開源組件

    原標(biāo)題:共建開源組件生態(tài) 2022 OpenHarmony組件大賽等你來 2022年4月15日,2022 OpenHarmony組件大賽(下
    的頭像 發(fā)表于 04-26 17:31 ?1765次閱讀
    2022 <b class='flag-5'>OpenHarmony</b><b class='flag-5'>組件</b>大賽,共建開源<b class='flag-5'>組件</b>

    OpenHarmony PhotoView組件的介紹

    PhotoView是OpenAtom OpenHarmony(簡稱“OpenHarmony”)系統(tǒng)的一款圖片縮放及瀏覽的三方組件,用于聲明式應(yīng)用開發(fā),支持圖片縮放、平移、旋轉(zhuǎn)等功能。
    的頭像 發(fā)表于 09-09 10:04 ?1458次閱讀

    關(guān)于OpenHarmony Jchardet組件介紹

    Jchardet是OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)系統(tǒng)的一款檢測文本編碼的組件。當(dāng)上傳一個文件時,組件可以檢測并輸出該文件中文本使用的編碼
    的頭像 發(fā)表于 10-12 10:08 ?1379次閱讀

    OpenHarmony Jchardet組件簡介及使用方法

    Jchardet是OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)系統(tǒng)的一款檢測文本編碼的組件。當(dāng)上傳一個文件時,組件可以檢測并輸出該文件中文本使用的編碼
    的頭像 發(fā)表于 10-14 10:17 ?1110次閱讀