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,一经查实,立即删除!

相关文章

leetcode刷题记录 day21

每日一题 找到冠军 I 一场比赛中共有 n 支队伍&#xff0c;按从 0 到 n - 1 编号。 给你一个下标从 0 开始、大小为 n * n 的二维布尔矩阵 grid 。对于满足 0 < i, j < n - 1 且 i ! j 的所有 i, j &#xff1a;如果 grid[i][j] 1&#xff0c;那么 i 队比 j 队 强 &a…

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;增…

Java基础_19 IO流【重点】

1.File类会将此磁盘上面的文件或者文件夹抽象成为一个对象&#xff0c;可以拿对象调用方法来对咱们的文件或者文件夹操作(创建,删除&#xff0c;各种判断&#xff0c;查询)File类很多的方法createNewFilemkdirmkdirsdeleteisFileisDirectorygetNamegetPathgetParent2.递归算法【…

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…

游戏内鼠标光标样式切换

参考自 通过程序设置鼠标的样式 - CodeBus 代码生成 .cur 文件附带详细注释-CSDN博客 读取当前目录里的鼠标文件 .cur // 程序名称&#xff1a;设置鼠标样式的范例 // 编译环境&#xff1a;Visual C 6.0~2022&#xff0c;EasyX_20220116 // #include <graphics.h> #in…

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

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

java算法:反转数字

看算法描述&#xff1a; 1、给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反转后的结果。 2、如果反转后整数超过 32 位的有符号整数的范围 [−231, 231 − 1] &#xff0c;就返回 0。 3、假设环境不允许存储 64 位整数&#xff08;有符号或无符号&…

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;…

设计模式学习笔记 - 设计模式与范式 -行为型:16.解释器模式:如何设计实现一个自定义接口告警规则功能?

概述 上篇文章&#xff0c;我们学习了命令模式。本章&#xff0c;我们来学习解释器模式&#xff0c;它用来描述如何构建一个简单的 “语言” 解释器。比如命令模式&#xff0c;解释器模式更加小众&#xff0c;只在一些特定的领域内会被用到&#xff0c;比如编译器、规则引擎、…

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

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

jmeter使用之生成html测试报告

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

区块链、web3.0、元宇宙的基本概念

目录 区块链 起源 发展现状 相关技术 智能合约 加密算法 共识算法 对等网络 web3.0 应用 DeFi 去中心化金融 NFT 非同质化代币 DAO 去中心化自治组织 底层技术 元宇宙 文章部分内容来自网络及AIGC,仅供学习 区块链 起源 区块链的起源可以追溯到21世纪初,当…

C#, 查找同一个进程显示在任务栏上的多个窗口

有的程序可以打开多个窗口并显示在任务栏上。某些情况下&#xff0c;我们需要找到窗口做些事情时&#xff0c;可以参考下面的代码。 public static class Win32Api{[DllImport("user32.dll", SetLastError true)]public static extern bool EnumWindows(EnumWindows…

HTML5媒体元素

video元素 视频元素&#xff0c;可以用来插入电影片段或其他视频流。 支持的视频格式是MP4&#xff0c;WebM&#xff0c;Ogg source元素 定义媒体的资源 src属性 规定媒体资源的URL type属性 规定媒体资源的MIME类型 <video controls><source src"../v…