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.mzph.cn/news/814267.shtml

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

相关文章

Tuxera Ntfs for mac 2023中文解锁版安装、密钥下载与激活教程 Tuxera激活码 tuxera破解

Tuxera Ntfs for mac2023是Mac中专用于读写外置存储的工具&#xff0c;具有强大的磁盘管理和修复功能&#xff0c;它在Mac上完全读写NTFS格式硬盘&#xff0c;快捷的访问、编辑、存储和传输文件。能够在 Mac 上读写 Windows NTFS 文件系统。Tuxera NTFS 实现在Mac OS X系统读写…

2024妈妈杯数学建模A 题思路分析-移动通信网络中 PCI 规划问题

# 1 赛题 A 题 移动通信网络中 PCI 规划问题 物理小区识别码(PCI)规划是移动通信网络中下行链路层上&#xff0c;对各覆盖 小区编号进行合理配置&#xff0c;以避免 PCI 冲突、 PCI 混淆以及 PCI 模 3 干扰等 现象。 PCI 规划对于减少物理层的小区间互相干扰(ICI)&#xff0c;增…

mysql搭建主从

mysql搭建主从: 1:拉取mysql镜像 docker pull mysql2:创建主从对应目录 3:建立一个简易的mysql docker run -it --name mytest -e MYSQL_ROOT_PASSWORD123 -d mysql4:进入这个简易的mysql;从中获取my.cnf文件 docker exec -it mytest bash5:从容器中将my.cnf拷贝到 /3306/c…

rspack 使用构建vue3脚手架

基于 Rust 的高性能 Web 构建工具。rspack 主要适配 webpack 生态&#xff0c;对于绝大多数 webpack 工具库都是支持的。 启动速度快&#xff1b;增量热更新快。兼容 webpack 生态&#xff1b;内置了 ts、jsx、css、css modules 等开箱即用。生产优化&#xff0c;tree shaking…

树莓派驱动开发--搭建环境篇(保姆级)

前言&#xff1a;树莓派的环境搭建关系到之后的驱动开发&#xff0c;故一个好的环境能让你顺手完成驱动开发&#xff01;我使用的是64位树莓派4b&#xff01;有显示屏的前提&#xff01;&#xff01;&#xff01;&#xff08;因为wifi连接太刁钻了&#xff09; 一、ubantu相关 …

Linux如何安装kernel-debuginfo包以支持获取未压缩内核映像vmlinux?(yum | wget、rpm -ivh)

基础信息 本文以AnolisOS为例子&#xff0c;Centos和Ubuntu类似&#xff0c;核心都是安装kernel-debuginfo和kernel-debuginfo-common的rpm包 并且需要和内核版本子版本完全一致&#xff08;本质是使用同一份代码编译的&#xff09;假设系统安装的是8.6版本&#xff1a;比如ht…

【软件设计师】计算机软考下午题试题六,Java设计模式之简单工厂模式。

【软件设计师】计算机软考下午题试题六&#xff0c;Java设计模式之简单工厂模式。 代码如下&#xff1a; //简单工厂模式 public class SimpleFactory {public static void main(String[] args) {Product ProductAFactory.createProduct("A");ProductA.info();Produc…

C++11 数据结构2 线性表的链式存储,实现,测试

线性表的链式存储 --单链表 前面我们写的线性表的顺序存储(动态数组)的案例&#xff0c;最大的缺点是插入和删除时需要移动大量元素&#xff0c;这显然需要耗费时间&#xff0c;能不能想办法解决呢&#xff1f;链表。 链表为了表示每个数据元素与其直接后继元素之间的逻辑关系…

-bash:./app:没有那个文件或目录(已解决)

目录下有文件&#xff0c;并且权限也是够的&#xff0c;都是就是是没有。 解决方法&#xff1a; 进入/bin&#xff0c;执行命令 file bash 如上图&#xff0c;可以发现&#xff0c;bash是32-bit&#xff0c; 进入app所在目录&#xff0c;执行 file app 如上图&#xff0…

Java 基于微信小程序的校园失物招领小程序,附源码

博主介绍&#xff1a;✌程序员徐师兄、8年大厂程序员经历。全网粉丝15w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

数字经济专家高泽龙担任工信部元宇宙标准化委员会委员

数字经济专家高泽龙受聘担任工信部元宇宙标准化委员会委员&#xff0c;出席工作组成立大会暨第一次全体委员会议。 第一届元宇宙国标、团标以及标委会工作组会议顺利召开&#xff01; 同时&#xff0c;正式成为工信部中国人工智能产业发展联盟科技伦理工作组成员&#xff01;

jmeter使用之生成html测试报告

测试的最终结果是需要给出一份报告&#xff0c;那么在用jmeter测试时怎么生成一份报告呢&#xff0c;以下针对jmeter如何生成html报告进行简单介绍 一、首先把测试脚本写好二、利用命令生成html报告 命令&#xff1a;jmeter -n -t 【Jmx脚本位置】-l 【结果文件result.jtl存放…

桥接模式:解耦抽象与实现的设计艺术

在软件设计中&#xff0c;桥接模式是一种结构型设计模式&#xff0c;旨在将抽象部分与其实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过提供更加灵活的代码结构帮助软件开发人员处理不断变化的需求&#xff0c;特别是在涉及多平台应用开发时。本文将详细介绍桥接…

sql注入之宽字节注入

1.1 宽字节注入原理 宽字节注入&#xff0c;在 SQL 进行防注入的时候&#xff0c;一般会开启 gpc&#xff0c;过滤特殊字符。 一般情况下开启 gpc 是可以防御很多字符串型的注入&#xff0c;但是如果数据库编码不 对&#xff0c;也可以导致 SQL 防注入绕过&#xff0c;达到注入…

【网站项目】农产品自主供销小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

英特尔、联想等服务器曝出难以修复的漏洞

文章目录 前言一、漏洞潜伏六年,服务器供应链安全堪忧二、漏洞广泛存在但难以修复前言 近日,英特尔、联想等多个厂商销售的服务器硬件曝出一个难以修复的远程可利用漏洞。该漏洞属于供应链漏洞,源自一个被多家服务器厂商整合到产品中的开源软件包——Lighttpd。 Lighttpd是…

Vue3——html-doc-ja(html导出为word的js库)

一、下载 官方地址 html-doc-js - npm npm install html-doc-js 二、使用方法 // 使用页面中引入 import exportWord from html-doc-js// 配置项以及实现下载方法 const wrap document.getElementById(test)const config {document:document, //默认当前文档的document…

初识SpringMVC(SpringMVC学习笔记一)

1 、还是熟悉的配方&#xff0c;先创建一个父Maven项目&#xff08;忘记怎么创建项目了就去前面翻笔记&#xff09;&#xff0c;导入通用的配置依赖 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instan…

Vitis HLS 学习笔记--ap_int.h / ap_fixed.h(1)

目录 目录 1. 概述 2. 简要规则 3. 浮点运算的复杂性 2.1 对阶 3.2 尾数运算 3.3 规格化和舍入 3.4 特殊值的处理 4. 示例&#xff08;ap_fixed.h&#xff09; 5. 量化模式&#xff08;ap_fixed.h&#xff09; 5.1 AP_SAT* 模式会增加资源用量 1. 概述 ap_int.h 和…

如何将三方库集成到hap包中——通过IDE集成cmak构建方式的C/C++三方库

简介 cmake构建方式是开源三方库的主流构建方式。DevEco Studio目前以支持cmake的构建方式。本文将通过在IDE上适配cJSON三方库为例讲来解如何在IDE上集成cmake构建方式得三方库。 创建工程 在开发进行三方库适配以及napi接口开发前&#xff0c;我们需要创建一个三方库对应的…