UI开发概述

news/2024/10/18 22:53:40/文章来源:https://www.cnblogs.com/strengthen/p/18475186

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号:山青咏芝(MaoistLearning)
➤博客园地址:为敢技术(https://www.cnblogs.com/strengthen/ )
➤GitHub地址:https://github.com/strengthen
➤原文地址:https://www.cnblogs.com/strengthen/p/18475186
➤如果链接不是为敢技术的博客园地址,则可能是爬取作者的文章。
➤原文已修改更新!强烈建议点击原文地址阅读!支持作者!支持原创!
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

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

  • ArkTS

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

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

整体架构

图1 整体架构图

  • 声明式UI前端

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

  • 语言运行时

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

  • 声明式UI后端引擎

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

  • 渲染引擎

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

  • 平台适配层

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

开发流程

使用UI开发框架开发应用时,主要涉及如下开发过程。

任务简介相关指导
学习ArkTS 介绍了ArkTS的基本语法、状态管理和渲染控制的场景。

- 基本语法

- 状态管理

- 渲染控制

开发布局 介绍了几种常用的布局方式。

- 常用布局

添加组件 介绍了几种常用的系统组件、以及通过API方式支持的界面元素。

- 常用组件

- 自定义组件

- 气泡和菜单

设置组件导航和页面路由 介绍了如何设置组件间的导航以及页面路由。

- 组件导航(推荐)

- 页面路由

使用文本 介绍了输入框、富文本和属性字符串等文本组件的使用方法。

- 文本显示

- 文本输入

- 富文本

- 图标小符号

- 属性字符串

使用弹窗 介绍了模态弹窗和自定义弹窗的使用方法。

- 模态弹窗

- 自定义弹窗

显示图形 介绍了如何显示图片、绘制自定义几何图形以及使用画布绘制自定义图形。

- 几何图形

- 画布

使用动画 介绍了组件和页面使用动画的典型场景。

- 属性动画

- 转场动画

-粒子动画

- 组件动画

- 动画曲线

- 动画衔接

- 动画效果

- 帧动画

绑定事件 介绍了事件的基本概念和如何使用通用事件和手势事件。

- 通用事件

- 手势事件

使用自定义能力 介绍了自定义能力的基本概念和如何使用自定义能力。

- 自定义节点

- 自定义扩展

使用镜像能力 介绍了镜像能力的基本概念和如何使用镜像能力。 - 使用镜像能力
支持适老化 介绍了适老化的使用场景和使用方法。 - 支持适老化
主题设置 介绍了应用级和页面级的主题设置能力。

- 应用深浅色适配

- 设置主题换肤

使用NDK接口构建UI 介绍了ArkUI NDK接口提供的能力,以及如何通过NDK接口创建UI界面。

- 接入ArkTS页面

- 添加交互事件

- 使用动画

- 使用懒加载开发长列表界面

- 构建弹窗

- 构建自定义组件

- 嵌入ArkTS组件

通用规则

  • 默认单位

    表示长度的入参单位默认为vp,即入参为number类型、以及Length和Dimension类型中的number单位为vp。

  • 异常值处理

    输入的参数为异常(undefined,null或无效值)时,处理规则如下:

    (1)对应参数有默认值,按默认值处理;

    (2)对应参数无默认值,该参数对应的属性或接口不生效。

 

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

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

相关文章

MiGPT让你的小爱音响更聪明

大家好,我是晓凡。 今天要给大家带来一个超级有趣的开源项目MiGPT。 这个项目,简直就是给小爱音箱装上了超级大脑,让你的小爱音箱更聪明。 想象一下,当小爱音箱接入大模型后,上知天文,下知地理,从“人工智障”秒变学霸。 一、什么是MiGPTMiGPT是一个由idootop团队开发的…

基于amis后端低代码平台

写这个平台是为了解决多年对于项目的困扰,不想碰到新项目就重新来,通过业务模块的积累,能进行模块化安装。新的项目只需要安装模块就能搭建一套完整的业务系统。amis-api 的所有基础代码都以模块的形式组合在一起。这些模块可以随时从数据库中安装或卸载。这些模块有两大目的…

数据采集与融合技术实验课程作业一

数据采集与融合技术实验课程作业一作业所属课程 https://edu.cnblogs.com/campus/fzu/2024DataCollectionandFusiontechnology作业链接 https://edu.cnblogs.com/campus/fzu/2024DataCollectionandFusiontechnology/homework/13286gitee码云代码位置 https://gitee.com/wang-qi…

C3P0 链子分析学习

C3P0 链子分析学习 概述 C3P0是一个开源的数据库连接池,它实现了数据源与JNDI绑定,支持JDBC3规范和实现了JDBC2的标准扩展说明的Connection和Statement池的DataSources对象。即将用于连接数据库的连接整合在一起形成一个随取随用的数据库连接池,使用它的开源项目有Hibernate…

20241018每日一题洛谷P2386

普及 每日一题 信息学竞赛 1206:放苹果 把M个同样的苹果放在N个同样的盘子里,允许有的盘子空着不放,问共有多少种不同的分法?(用K表示)5,1,1和1,5,1 是同一种分法。 第一行是测试数据的数目t(0<=t<=20)。以下每行均包含二个整数M和N,以空格分开。1<=M,N…

图片与向量的关系

如何从向量角度描述表示图片黑白图片黑白图片(灰度图)通过 2 维向量(矩阵)来表达。2个维度的长度分别代表了图片的高度和宽度(以像素为单位),向量元素记录着每一个像素的灰度(数值越大,颜色越浅) 例如下面右图矩阵标注了左图像素点的灰度分布:彩色图片彩色图片通过 …

数据采集与融合技术第二次作业

学号姓名 102202132 郑冰智这个作业要求在哪里 https://edu.cnblogs.com/campus/fzu/2024DataCollectionandFusiontechnology/homework/13285这个作业的目标 爬取天气网、股票相关信息、中国大学2021主榜所有院校信息,并存储在数据库中实验二仓库地址 https://gitee.com/zheng…

【LGR-203-Div.4】洛谷入门赛 #28

【LGR-203-Div.4】洛谷入门赛 #28\(A\) luogu B4042 [语言月赛 202410] 顺序结构 \(AC\)顺序结构。点击查看代码 int main() { ll a;cin>>a;cout<<3*(5+a)<<" "<<3*a+5<<endl;return 0; }\(B\) luogu B4043 [语言月赛 202410] 刻度尺…

uni-app小程序(快手、抖音)getCurrentPages使用坑位记录2

前情 uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,现公司项目就是主推uni-app,我主要负责抖音和快手端小程序。 坑位 公司历史原因项目有APP端小程序端,但并不使用uni-app的一端发布所有平台,…

二叉查找树和笛卡尔树

二叉查找树~和笛卡尔树目录二叉查找树定义作用操作查找插入删除缺点笛卡尔树定义操作构造 二叉查找树 定义 ​ 二叉查找树(Binary Search Tree,BST),又名二叉搜索树或二叉排序树。 ​ 它是一类特殊规定的二叉树,它应当满足以下条件:每个节点有唯一确定的权值 非叶子节点的…

浅谈 tarjan

就是记录两个数组:dfn[]和low[] 其中dfn[]表示访问的顺序,low[u]用来存储 \(u\) 不经过其父亲能到达的最小时间戳。。。 搬一下 wiki 的图。。。我们发现 \(low[v]\ge dfn[u]\) 可以表示不能回到祖先,则 \(u\) 点位割点。。。 直接上代码P3388------> #include <bits/…

正点原子新起点V2开发板FPGA关于SDRAM代码解读

正点原子新起点V2开发板FPGA关于SDRAM代码解读 1. SDRAM 概述 SDRAM(Synchronous Dynamic Random Access Memory)是一种同步动态随机存储器,广泛用于FPGA项目中。通过SDRAM控制模块,可以实现数据读写、刷新等操作。本文对SDRAM的控制模块进行详细解读,分析代码中的命令控制…