OpenHarmony实例应用:【常用组件和容器低代码】

介绍

本篇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点击或者复制转到。

搜狗高速浏览器截图20240326151450.png

代码结构解读

鸿蒙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();
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/616206.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Normalization

Norm介绍 归一化层&#xff0c;目前主要有这几个方法&#xff0c;Batch Normalization&#xff08;2015年&#xff09;、Layer Normalization&#xff08;2016年&#xff09;、Instance Normalization&#xff08;2017年&#xff09;、Group Normalization&#xff08;2018年&…

11 Php学习:函数

PHP 内建函数Array 函数 PHP Array 函数是 PHP 核心的组成部分。无需安装即可使用这些函数。 创建 PHP 函数 当您需要在 PHP 中封装一段可重复使用的代码块时&#xff0c;可以使用函数。下面详细解释如何创建 PHP 函数并举例说明。 创建 PHP 函数的语法 PHP 函数的基…

数字化时代:IT界的致富秘籍 —— 策略×态度×机遇

&#x1f31f; 数字化时代&#xff1a;IT界的致富秘籍&#x1f680; —— 策略态度机遇 在数字化浪潮中冲浪&#x1f3c4;‍♂️&#xff0c;IT行业犹如一片无限可能的蓝海。想要在这片汹涌的海洋中捕获财富&#xff0c;不是一件轻而易举的事。让我们一起深入探索&#xff0c;如…

商标没有去注册有哪些不好的影响!

有些商家咨询普推知产老杨&#xff0c;商标没有去注册有哪些不好的影响&#xff0c;其实对企业来说还有许多实际不利的影响&#xff0c;有时代价比注册一个商标要大很多。 想的商标名称没去注册商标&#xff0c;如果别人抢注拿下商标注册证&#xff0c;那就会涉及侵权&#xf…

Cascader 级联选择器 - 选择器最后一级数据为空

原因&#xff1a;将扁平数据转化为树形数据时&#xff0c;给每个项都添加了 children export const transList2Tree (list, rootPid) > {const result []list.forEach(item > {if (item.pid rootPid) {const children transList2Tree(list, item.id)item.children …

Docker 学习笔记(八):Dockerfile实战篇,制作 Tomcat 镜像,发布镜像到 DockerHub 和阿里云

一、前言 记录时间 [2024-4-13] 系列文章简摘&#xff1a; Docker 学习笔记&#xff08;六&#xff09;&#xff1a;挑战容器数据卷技术一文通&#xff0c;实战多个 MySQL 数据同步&#xff0c;能懂会用&#xff0c;初学必备 Docker 学习笔记&#xff08;七&#xff09;&#x…

暴雨孙辉:做好服务器,但更要辟出技术落地之道

稳扎稳打一直是暴雨的风格&#xff0c;这在被访者孙辉的身上尽显。作为暴雨&#xff08;武汉暴雨信息发展有限公司&#xff09;中国区销售及市场副总裁&#xff0c;在谈及公司的技术发展与市场推广走势之时&#xff0c;孙辉沉稳、敏锐且逻辑清晰。 因在服务器领域起步很早&…

mysql中的DML、DQL、DCL常用命令

文章目录 DML语句1.添加数据(INSERT)2.修改数据(UPDATA)3.删除数据(DELETE) DQL语句1.基础查询2.条件查询3.聚合函数4.分组查询5.排序查询6.分页查询 DCL语句1.管理用户2.权限控制 DML语句 1.添加数据(INSERT) 1.给指定字段添加数据&#xff1a;INSERT INTO 表名(字段1,字段2…

C# Solidworks二次开发:控制鼠标移动相关API详解

大家好&#xff0c;今天要介绍的是关于如何solidworks中用程序API来控制鼠标移动和滚轮缩放的功能。 下面是相关API&#xff1a; &#xff08;1&#xff09;第一个为Move&#xff0c;这个API的含义为在窗口空间中移动鼠标指针&#xff0c;下面是官方的具体解释&#xff1a; 其…

【linux】网络 - 传输层 -- socket(TCP/UDP)

文章目录 socket预备知识TCP和UDP 协议网络字节序 socket接口及辅助接口sockaddrudpserver和udpclient初始化udp服务器运行udp服务器udp客户端 tcpserver和tcpclient初始化服务器运行服务器Tcp客户端 守护进程 socket Socket&#xff08;套接字&#xff09;是计算机网络编程中…

OpenCV C++学习笔记

1.图像的读取与显示 1.1 加载并显示一张图片 #include<opencv2/opencv.hpp> #include<iostream>using namespace cv; using namespace std; int main(int argc,char** argv){Mat srcimread("sonar.jpg");//读取图像if(src.empty()){printf("Could…