HarmonyOS4.0系统性深入开发26方舟开发框架(ArkUI)概述

方舟开发框架(ArkUI)概述

方舟开发框架(简称ArkUI)为HarmonyOS应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。

基本概念

  • **UI:**即用户界面。开发者可以将应用的用户界面设计为多个功能页面,每个页面进行单独的文件管理,并通过页面路由API完成页面间的调度管理如跳转、回退等操作,以实现应用内的功能解耦。
  • **组件:**UI构建与显示的最小单位,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。

两种开发范式

针对不同的应用场景及技术背景,方舟开发框架提供了两种开发范式,分别是基于ArkTS的声明式开发范式(简称“声明式开发范式”)和兼容JS的类Web开发范式(简称“类Web开发范式”)。

  • 声明式开发范式:采用基于TypeScript声明式UI语法扩展而来的ArkTS语言,从组件、动画和状态管理三个维度提供UI绘制能力。
  • 类Web开发范式:采用经典的HML、CSS、JavaScript三段式开发方式,即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟开发框架应用。

在开发一款新应用时,推荐采用声明式开发范式来构建UI,主要基于以下几点考虑:

  • **开发效率:**声明式开发范式更接近自然语义的编程方式,开发者可以直观地描述UI,无需关心如何实现UI绘制和渲染,开发高效简洁。
  • **应用性能:**如下图所示,两种开发范式的UI后端引擎和语言运行时是共用的,但是相比类Web开发范式,声明式开发范式无需JS框架进行页面DOM管理,渲染更新链路更为精简,占用内存更少,应用性能更佳。
  • 发展趋势:声明式开发范式后续会作为主推的开发范式持续演进,为开发者提供更丰富、更强大的能力。

图1 方舟开发框架示意图
点击放大

不同应用类型支持的开发范式

根据所选用HarmonyOS应用模型(Stage模型、FA模型)和页面形态(应用或服务的普通页面、卡片)的不同,对应支持的UI开发范式也有所差异,详见下表。

应用模型页面形态支持的UI开发范式
Stage模型(推荐)应用或服务的页面声明式开发范式(推荐)
卡片声明式开发范式(推荐)类Web开发范式
FA模型应用或服务的页面声明式开发范式类Web开发范式
卡片类Web开发范式

UI开发(ArkTS声明式开发范式)概述

基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建HarmonyOS应用UI所必需的能力,主要包括:

  • ArkTS

    ArkTS是HarmonyOS优选的主力应用开发语言,围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展。扩展能力包含声明式UI描述、自定义组件、动态扩展UI元素、状态管理和渲染控制。状态管理作为基于ArkTS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考学习ArkTS语言。

  • 布局

    布局是UI的必要元素,它定义了组件在界面中的位置。ArkUI框架提供了多种布局方式,除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外,也提供了相对复杂的列表、宫格、轮播。

  • 组件

    组件是UI的必要元素,形成了在界面中的样子,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置系统内置组件的渲染效果。开发者可以将系统内置组件组合为自定义组件,通过这种方式将页面组件化为一个个独立的UI单元,实现页面不同单元的独立创建、开发和复用,具有更强的工程性。

  • 页面路由和组件导航

    应用可能包含多个页面,可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏,可通过导航组件实现组件间的导航。

  • 图形

    方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力,以满足开发者的自定义绘图需求,支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。

  • 动画

    动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验,框架提供了丰富的动画能力,除了组件内置动画效果外,还包括属性动画、显式动画、自定义转场动画以及动画API等,开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。

  • 交互事件

    交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件,除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外,还包括基于通用事件进行进一步识别的手势事件。手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势,以及通过单一手势事件进行组合的组合手势事件。

特点

  • 开发效率高,开发体验好

    • 代码简洁:通过接近自然语义的方式描述UI,不必关心框架如何实现UI绘制和渲染。
    • 数据驱动UI变化:让开发者更专注自身业务逻辑的处理。当UI发生变化时,开发者无需编写在不同的UI之间进行切换的UI代码, 开发人员仅需要编写引起界面变化的数据,具体UI如何变化交给框架。
    • 开发体验好:界面也是代码,让开发者的编程体验得到提升。
  • 性能优越

    • 声明式UI前端和UI后端分层:UI后端采用C++语言构建,提供对应前端的基础组件、布局、动效、交互事件、组件状态管理和渲染管线。
    • 语言编译器和运行时的优化:统一字节码、高效FFI-Foreign Function Interface、AOT-Ahead Of Time、引擎极小化、类型优化等。
  • 生态容易快速推进

    能够借力主流语言生态快速推进,语言相对中立友好,有相应的标准组织可以逐步演进。

整体架构

图1 整体架构图
img

  • 声明式UI前端

    提供了UI开发范式的基础语言规范,并提供内置的UI组件、布局和动画,提供了多种状态管理机制,为应用开发者提供一系列接口支持。

  • 语言运行时

    选用方舟语言运行时,提供了针对UI范式语法的解析能力、跨语言调用支持的能力和TS语言高性能运行环境。

  • 声明式UI后端引擎

    后端引擎提供了兼容不同开发范式的UI渲染管线,提供多种基础组件、布局计算、动效、交互事件,提供了状态管理和绘制能力。

  • 渲染引擎

    提供了高效的绘制能力,将渲染管线收集的渲染指令,绘制到屏幕的能力。

  • 平台适配层

    提供了对系统平台的抽象接口,具备接入不同系统的能力,如系统渲染管线、生命周期调度等。

开发流程

使用UI开发框架开发应用时,主要涉及如下开发过程。开发者可以先通过第一个入门实例了解整个应用的UI开发过程。

任务简介相关指导
学习ArkTS介绍了ArkTS的基本语法、状态管理和渲染控制的场景。基本语法状态管理渲染控制
开发布局介绍了几种常用的布局方式以及如何提升布局性能。常用布局布局性能
添加组件介绍了几种常用的内置组件、自定义组件以及通过API方式支持的界面元素。常用组件自定义组件气泡和菜单
设置页面路由和组件导航介绍了如何设置页面路由以及组件间的导航。页面路由组件导航
显示图形介绍了如何显示图片、绘制自定义几何图形以及使用画布绘制自定义图形。图片几何图形画布
使用动画介绍了组件和页面使用动画的典型场景。页面内的动画页面间的动画
绑定事件介绍了事件的基本概念和如何使用通用事件和手势事件。通用事件手势事件

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

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

相关文章

林浩然的数学奇遇记:从计算机视觉到深海中的数学宝藏

林浩然的数学奇遇记:从计算机视觉到深海中的数学宝藏 Lin Haoran’s Mathematical Odyssey: From Computer Vision to Mathematical Treasures in the Deep Sea 在那个充满像素与算法的世界里,有一位名叫林浩然的主角,他并非怀揣着成为华罗庚…

【视野提升】ChatGPT的系统是如何工作的?

类似ChatGPT的系统是如何工作的? 我们试图在下图中解释它是如何工作的。这个过程可以分为两个部分。 训练 要训练一个ChatGPT模型,有两个阶段: 预训练 在这个阶段,我们在大量互联网数据上训练一个GPT模型(仅解码器转…

【mongoDB】数据库的创建和删除

目录 1. 查看所有数据库 2.创建数据库 3.查看当前连接的数据库 4.删除数据库 1. 查看所有数据库 show dbs 2.创建数据库 use 数据库名 例如创建一个名为 aaa 的数据库 3.查看当前连接的数据库 db 4.删除数据库 use 数据库名 db.dropDataBase() 比如删除数据库 aaa

《WebKit技术内幕》学习之十三(3):移动WebKit

3 其他机制 3.1 新渲染机制 为了移动领域更好的用户体验,渲染机制所做的改进主要是提升渲染性能来增加响应的速度,甚至不惜牺牲一些跟规范定义的行为不一致的地方。在这一小节中主要介绍三个方面的技术,其一是Tiled Backing Store&#x…

vue3 组件通信 mitt

mitt 安装 pnpm add mitttypescript 在 tsconfig.json 中设置 “strict”: true {"compilerOptions": {"strict": true,} }使用 导出 emitter src/utils/mitt/index.ts import mitt from mitttype Events {get-name: string }export const emitter …

[Python] 机器学习 - 常用数据集(Dataset)之鸢尾花(Iris)数据集介绍,数据可视化和使用案例

鸢(yuān)尾花(Iris)数据集介绍 鸢【音:yuān】尾花(Iris)是单子叶百合目花卉,是一种比较常见的花,而且鸢尾花的品种较多,在某个公园里你可能不经意间就能碰见它。 鸢尾花数据集最初由Edgar Anderson 测量…

Springboot,使用sharedingjdbc 分库分表,最佳实践。

一、简介 Apache ShardingSphere 是一套开源的分布式数据库解决方案组成的生态圈,它由 JDBC、Proxy 和 Sidecar(规划中)这 3 款既能够独立部署,又支持混合部署配合使用的产品组成。 它们均提供标准化的数据水平扩展、分布式事务和…

我在代码随想录|写代码Day17之二叉树-222.完全二叉树的节点个数,110.平衡二叉树,257. 二叉树的所有路径

学习目标: 博主介绍: 27dCnc 专题 : 数据结构帮助小白快速入门 👍👍👍👍👍👍👍👍👍👍👍👍 ☆*: .。. o(≧▽≦)…

数学建模绘图

注意:本文章旨在记录观看B站UP数模加油站之后的笔记文章,无任何商业用途~~ 必备网站 以下网站我都试过,可以正常访问 配色(取色)网站: Color Palettes Generator and Color Gradient Tool Python&#x…

Pandas ------ 通过 np.array 函数去掉数据中的 index

Pandas ------ 通过 np.array 函数去掉数据中的 index 引言正文 引言 在做 pandas 数据处理的时候遇到了一个问题,获取到的数据总是会带有 dateframe 的格式,即总会有 index 显示出来。为了去掉这些显示,我们可以使用 np.array() 函数进行数…

python Django入门

1.创建Django项目 方式一:进入到指定要存放项目的目录,执行*django-admin startproject “projectname”* 来创建一个名方式二:使用Pycharm专业版创建Django项目 创建项目后,默认的目录结构: manage.py:是Django用于管理本项目的命令行工具&#xff0c…

HarmonyOS鸿蒙学习基础篇 - Text文本组件

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 Text文本组件是可以显示一段文本的组件。该组件从API Version 7开始支持,从API version 9开始,该接口支持在ArkTS卡片中使用。 子组件 可…

KG110写频 AT28C64芯片替换

上一个文章写了写频计算公式 https://blog.csdn.net/firseve/article/details/135743549 没想到就几天好多人给点赞,这个中继现在还有很多人在使用么?谁能给解个惑 今天搜了下这个中继设备,默认原机器使用的芯片是 2716 2732 (2…

php怎么输入一个变量,http常用的两种请求方式getpost(ctf基础)

php是网页脚本语言,网页一般支持两种提交变量的方式,即get和post get方式传参 直接在网页URL的后面写上【?a1027】,如果有多个参数则用&符号连接, 如【?a10&b27】 post方式传参 需要借助插件,ctfer必备插…

自学C语言-6

第6章 选择结构程序设计 顺序结构程序设计最简单,但通常无法解决生活中的选择性问题。选择结构程序设计需要用到一些条件判断语句,可实现的程序功能更加复杂,程序的逻辑性与灵活性也更加强大。 本章致力于使读者掌握使用if语句进行条件判断的…

OpenHarmony开发——GN快速上手

背景 最近在研究鸿蒙操作系统的开源项目OpenHarmony,该项目使用了GNNinja工具链进行配置,编译,于是开始研究GN如何使用。 本文的所有信息均来自GN官网和本人个人体会。 GN快速入门 使用GN GN的主要功能是根据配置文件(.gn, BU…

交换机跨VLAN交换数据ip跳转分析(不一定对)

在网上看到这样一个实验: 交换机1、交换机2分别连接到一台防火墙上,要求使VLAN 2、VLAN3、VLAN5、VLAN6中的终端可互相访问。 拓补 参考链接 【数通网络交换基础梳理2】三层设备、网关、ARP表、VLAN、路由表及跨网段路由下一跳转发原理_网管型交的机…

DC60V降压恒流 3A电流 直播美颜补光灯专用降压IC

DC60V降压恒流3A电流直播美颜补光灯专用降压IC 随着直播行业的兴起,美颜补光灯成为了直播中不可或缺的设备之一。然而,不同的直播设备和场景需要不同的灯光效果,因此需要一款能够提供稳定、高质量照明的补光灯。其中,DC60V降压恒流…

CentOS7自动备份数据库到git

虽然数据库没什么数据,但是有就是珍贵的啦,为了服务器什么的无了,所以还是要自动备份一下比较好。 Open备忘第一页 步骤 在Gitee(github)上创建一个私有仓库Gitee(github)配置好服务器的ssh在服…

论文阅读:Vary-toy论文阅读笔记

目录 引言整体结构图方法介绍训练vision vocabulary阶段PDF数据目标检测数据 训练Vary-toy阶段Vary-toy结构数据集情况 引言 论文:Small Language Model Meets with Reinforced Vision Vocabulary Paper | Github | Demo 说来也巧,之前在写论文阅读&…