方舟笔记：方舟开发框架概述

方舟笔记方舟开发框架概述

1. 概述

1.1 关于方舟开发框架

方舟开发框架（简称：ArkUI），是一套构建HarmonyOS应用界面的UI开发框架。它提供了极简的UI语法与包括UI组件、动画机制、事件交互等在内的UI开发基础设施，以满足应用开发者的可视化界面开发需求。

方舟开发框架提供了丰富的UI组件、多种布局方式、动画效果、绘制能力、交互事件等。方舟开发框架还提供了API扩展机制，可以通过该机制对平台能力进行封装，提供风格统一的JS接口。

此外，方舟开发框架还提供了两种开发范式，分别是基于ArkTS的声明式开发范式和兼容JS的类Web开发范式，以满足不同的应用场景和技术背景的开发者的需求。

1.2 主要特性

方舟开发框架的主要特性包括：

• UI组件：方舟开发框架内置了丰富的多态组件，包括文本、图片、按钮等基础组件，可包含一个或多个子组件的容器组件，满足开发者自定义绘图需求的绘制组件，以及提供视频播放能力的媒体组件等。
  
• 布局：UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。
  
• 动画：方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。
  
• 交互事件：方舟开发框架提供了多种交互能力，以满足应用在不同平台通过不同输入设备进行UI交互响应的需求，默认适配了触摸手势、遥控器按键输入、键鼠输入，同时提供了相应的事件回调以便开发者添加交互逻辑。
  

1.3 两种开发范式

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

• 声明式开发范式：采用基于TypeScript进行声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供了UI绘制能力。声明式开发范式更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。
  
• 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，使用HML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发刷新。该开发方式更接近Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用。
  

2. 方舟开发框架的基本概念

2.1 组件

组件是方舟开发框架中的基础构建块，它们是用于构建用户界面的最小单位。每个组件都有自己的功能和属性，可以独立工作，也可以与其他组件一起工作以创建更复杂的用户界面。

方舟开发框架提供了丰富的内置组件，包括文本、图片、按钮等基础组件，以及可包含一个或多个子组件的容器组件，满足开发者自定义绘图需求的绘制组件，以及提供视频播放能力的媒体组件等。这些组件都经过了精心设计和优化，以确保在不同的设备和平台上都能提供一致的用户体验。

开发者可以通过组合和嵌套这些组件来创建复杂的用户界面。每个组件都可以被多次使用，并可以被配置为具有不同的属性和行为。此外，开发者还可以创建自定义组件，以满足特定的应用需求。

在方舟开发框架中，组件不仅仅是静态的UI元素，它们还可以响应用户的交互，如点击、滑动等操作。通过在组件上绑定事件处理函数，开发者可以定义当用户与组件交互时应该执行的操作。

组件是方舟开发框架中的核心概念，它们为开发者提供了一种高效、灵活的方式来构建和管理用户界面。

2.2 页面

在方舟开发框架中，页面是最小的调度分割单位，也是用户交互的基本单位。每个页面都可以包含多个组件，这些组件可以是文本、图片、按钮等基础组件，也可以是自定义的复杂组件。页面的设计和布局可以根据应用的需求进行定制，以提供最佳的用户体验。

在开发过程中，开发者可以将应用设计为多个功能页面，每个页面进行单独的文件管理。这样做的好处是，可以将应用的各个功能模块进行解耦，使得每个页面都可以独立开发和测试，提高了开发效率。

此外，方舟开发框架还提供了页面路由API，开发者可以通过这些API完成页面间的调度管理。例如，可以通过路由API实现页面的跳转，或者在不同的页面之间传递数据。这样，就可以实现复杂的页面交互和数据共享，满足更多的应用场景需求。

总的来说，页面在方舟开发框架中扮演着非常重要的角色，它是构建HarmonyOS应用的基础，也是实现用户交互和功能实现的关键。

2.3 UI组件

UI组件是方舟开发框架中的基础构建块，它们是用于构建用户界面的元素。方舟开发框架提供了丰富的内置UI组件，包括但不限于以下几种：

1. 基础组件：这些组件包括文本（Text）、图片（Image）、按钮（Button）等，它们是构建用户界面的基础元素。例如，文本组件可以用来显示一段文字，图片组件可以用来展示一张图片，按钮组件则可以用来触发某个操作。
   
2. 容器组件：容器组件可以包含一个或多个子组件，它们主要用于组织和布局其他组件。例如，Flex组件是一种弹性布局容器，它可以按照一定的方向和对齐方式排列其子组件。
   
3. 绘制组件：绘制组件提供了自定义绘图的能力，开发者可以通过它们来创建自定义的图形和效果。例如，Canvas组件提供了一套强大的绘图API，开发者可以通过它来绘制各种复杂的图形。
   
4. 媒体组件：媒体组件主要用于处理和展示媒体内容，如视频和音频。例如，Video组件可以用来播放视频内容。
   

这些组件都设计了多态性，即它们可以根据不同的设备类型和平台进行适配，提供一致的用户体验。开发者可以通过组合和嵌套这些组件，来构建出复杂的用户界面。

【注】这里说的：

• "组件"是一个广义的概念，它是界面搭建与显示的最小单位。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。这里的组件可以包括UI组件，也可以包括非UI组件，比如数据模型、服务等。
• "UI组件"则是一个狭义的概念，它是方舟开发框架内置的一种特殊类型的组件，专门用于构建用户界面。UI组件包括文本、图片、按钮等基础组件，可包含一个或多个子组件的容器组件，满足开发者自定义绘图需求的绘制组件，以及提供视频播放能力的媒体组件等。

2.4 布局

布局是UI设计中的重要环节，它决定了界面元素的排列方式和位置。在方舟开发框架中，布局主要通过各种布局组件来实现，包括弹性布局、列表布局、宫格布局、栅格布局和原子布局等。

1. 弹性布局：弹性布局是一种灵活的布局方式，它允许开发者在不同的设备和屏幕尺寸上创建动态的UI界面。弹性布局的主要特点是可以自动调整元素的大小和位置，以适应不同的屏幕尺寸和方向。在方舟开发框架中，弹性布局主要通过Flex组件来实现。
   
2. 列表布局：列表布局是一种常见的布局方式，它将界面元素按照一定的顺序排列成一个列表。在方舟开发框架中，列表布局主要通过List组件来实现。
   
3. 宫格布局：宫格布局是一种将界面元素分割成多个等大或不等大的格子的布局方式。在方舟开发框架中，宫格布局主要通过Grid组件来实现。
   
4. 栅格布局：栅格布局是一种将界面元素按照一定的比例分割成多个区域的布局方式。在方舟开发框架中，栅格布局主要通过Row和Column组件来实现。
   
5. 原子布局：原子布局是一种适应多分辨率场景开发的布局方式，它将界面元素分割成多个独立的、可重用的“原子”组件。在方舟开发框架中，原子布局主要通过使用一系列小的、功能单一的组件来实现，这些组件可以组合在一起，形成复杂的界面。
   

以上就是方舟开发框架中的布局方式，开发者可以根据实际需求，选择合适的布局方式，构建出满足自身应用诉求的完整界面。

2.5 动画

在方舟开发框架中，动画是一个重要的部分，它可以使用户界面更加生动和吸引人。动画不仅可以提高用户体验，还可以引导用户的注意力，使用户界面更易于理解和使用。方舟开发框架提供了多种动画能力，包括属性动画、转场动画和自定义动画，以满足不同的动画需求。

属性动画：属性动画是一种基于时间驱动的动画，它可以在一段时间内，按照设定的时间函数（如线性、加速、减速等）改变一个或多个组件的属性值，从而实现动画效果。例如，可以通过属性动画改变一个组件的位置、大小、颜色、透明度等属性，实现组件的移动、缩放、颜色变化、淡入淡出等动画效果。

转场动画：转场动画是一种在页面或组件之间切换时的动画效果，它可以提升用户体验，使页面切换更加流畅自然。例如，可以设置页面切换时的滑入滑出、淡入淡出、缩放等动画效果。

自定义动画：自定义动画是一种高级动画能力，它允许开发者自定义动画的行为和效果。开发者可以通过编程方式，定义动画的时间函数、插值函数、重复次数、延迟时间等参数，实现复杂的动画效果。例如，可以实现路径动画、关键帧动画、弹簧动画、物理动画等。

方舟开发框架的动画能力，不仅可以应用于单个组件，也可以应用于组件树，实现复杂的组合动画效果。同时，方舟开发框架的动画能力，支持在不同的设备和平台上运行，实现跨设备的动画效果。

2.6 绘制

在方舟开发框架中，绘制是一个核心的功能，它允许开发者创建和定制用户界面的视觉元素。这个功能提供了一系列的工具和选项，使开发者能够绘制形状、填充颜色、添加文本、进行变形和裁剪，以及嵌入图片。下面我们将详细介绍这些功能：

1. 绘制形状：方舟开发框架支持绘制各种基本形状，如矩形、圆形、椭圆形、多边形等。开发者可以通过设置形状的大小、位置、旋转角度等属性，来创建所需的形状。
   
2. 颜色填充：方舟开发框架支持对形状进行颜色填充，包括纯色填充和渐变填充。开发者可以通过设置颜色的RGB值或者使用预定义的颜色名称，来指定填充颜色。
   
3. 绘制文本：方舟开发框架支持在界面上绘制文本。开发者可以设置文本的内容、字体、大小、颜色、对齐方式等属性，来创建所需的文本效果。
   
4. 变形与裁剪：方舟开发框架支持对形状和文本进行变形和裁剪。开发者可以通过设置变形的比例、角度等参数，来实现形状和文本的缩放、旋转、倾斜等效果。同时，开发者也可以通过设置裁剪的范围，来实现形状和文本的裁剪。
   
5. 嵌入图片：方舟开发框架支持在界面上嵌入图片。开发者可以设置图片的源、大小、位置、旋转角度等属性，来创建所需的图片效果。
   

这些绘制功能为开发者提供了强大的工具，使他们能够创建出丰富多样的用户界面。

2.7 交互事件

交互事件是方舟开发框架中的一个重要概念，它是用户与应用进行交互的关键。在应用开发过程中，我们需要根据用户的操作，如点击、滑动、长按等，来触发相应的事件，从而实现应用的各种功能。

方舟开发框架提供了丰富的交互事件，包括但不限于：

1. 触摸事件：包括点击、双击、长按、滑动等常见的触摸操作。开发者可以通过在组件上绑定相应的触摸事件，来响应用户的触摸操作。
   
2. 键盘事件：包括按键按下、按键释放、按键长按等事件。这些事件主要用于响应用户通过物理键盘或虚拟键盘的操作。
   
3. 鼠标事件：包括鼠标点击、鼠标移动、鼠标滚轮滚动等事件。这些事件主要用于响应用户通过鼠标的操作。
   
4. 遥控器事件：包括遥控器按键按下、按键释放、按键长按等事件。这些事件主要用于响应用户通过遥控器的操作。
   

以上这些事件，方舟开发框架都进行了默认的适配，开发者只需要在需要的地方绑定相应的事件处理函数，就可以轻松实现对用户操作的响应。

此外，方舟开发框架还提供了事件回调机制，开发者可以通过注册事件回调函数，来监听并处理特定的事件。这种机制使得开发者可以在事件发生时，执行自定义的逻辑，从而实现更加丰富和个性化的交互效果。

例如，你可以在一个按钮组件上绑定一个点击事件，当用户点击这个按钮时，执行一个自定义的函数，这个函数可以是打开一个新的页面，也可以是修改一个状态变量，或者是调用一个API等。

这是一个简单的示例，展示了如何在一个按钮上绑定点击事件：

Button('Click me')
  .onClick(() => {
    console.log('Button clicked!');
  })

在这个示例中，当用户点击这个按钮时，会在控制台打印出：

Button clicked!

方舟开发框架提供的交互事件和事件回调机制，为开发者提供了强大的工具，使得开发者可以根据用户的操作，灵活地控制应用的行为，从而提供更好的用户体验。

2.8 平台API通道

平台API通道是方舟开发框架的一个重要特性，它允许开发者通过一种统一的方式来访问和使用平台的各种能力。这种机制极大地简化了开发者的工作，使他们可以更加专注于应用的业务逻辑，而不需要花费大量的时间和精力去理解和使用各种复杂的平台API。

平台API通道的工作原理是，方舟开发框架提供了一种API扩展机制，开发者可以通过这种机制来封装平台的各种能力，比如文件系统访问、网络通信、设备硬件访问等。这些封装后的API会以一种统一的JS接口的形式提供给开发者，开发者可以像使用普通的JS函数一样来使用这些API。

例如，如果开发者想要在应用中实现一个文件下载的功能，他们可以通过平台API通道提供的文件系统访问API来实现。这个API会提供一系列的函数，比如创建文件、写入文件、读取文件等，开发者只需要调用这些函数，就可以实现文件下载的功能。

平台API通道的优点是，它提供了一种统一的、简洁的、易于使用的API接口，使得开发者可以更加高效地开发应用。同时，由于这些API是由方舟开发框架提供和维护的，因此它们的稳定性和兼容性也得到了保证。

3. 方舟开发框架的主要特性

方舟开发框架的主要特性主要包括UI组件、布局、动画、绘制、交互事件、平台API通道和两种开发范式等。这些特性为开发者提供了全面的工具和资源，以满足各种应用开发需求。

3.1 UI组件

方舟开发框架内置了丰富的多态组件，包括文本、图片、按钮等基础组件，可包含一个或多个子组件的容器组件，满足开发者自定义绘图需求的绘制组件，以及提供视频播放能力的媒体组件等。其中“多态”是指组件针对不同类型设备进行了设计，提供了在不同平台上的样式适配能力。

3.2 布局

UI界面设计离不开布局的参与。方舟开发框架提供了多种布局方式，不仅保留了经典的弹性布局能力，也提供了列表、宫格、栅格布局和适应多分辨率场景开发的原子布局能力。

3.3 动画

方舟开发框架对于UI界面的美化，除了组件内置动画效果外，也提供了属性动画、转场动画和自定义动画能力。这些动画能力可以帮助开发者创建出更加生动、有趣的用户界面。

3.4 绘制

方舟开发框架提供了多种绘制能力，以满足开发者的自定义绘图需求，支持绘制形状、颜色填充、绘制文本、变形与裁剪、嵌入图片等。这些绘制能力可以帮助开发者创建出更加个性化、丰富的用户界面。

3.5 交互事件

方舟开发框架提供了多种交互能力，以满足应用在不同平台通过不同输入设备进行UI交互响应的需求，默认适配了触摸手势、遥控器按键输入、键鼠输入，同时提供了相应的事件回调以便开发者添加交互逻辑。

3.6 平台API通道

方舟开发框架提供了API扩展机制，可通过该机制对平台能力进行封装，提供风格统一的JS接口。这使得开发者可以更方便地使用平台的各种能力，如网络请求、设备硬件访问等。

3.7 两种开发范式

方舟开发框架针对不同的应用场景以及不同技术背景的开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。这两种开发范式各有优势，可以根据开发者的具体需求和技术背景选择适合的开发范式。

4. 方舟开发框架的开发范式

方舟开发框架提供了两种开发范式，分别是声明式开发范式和类Web开发范式。这两种开发范式针对不同的应用场景以及不同技术背景的开发者，以满足不同的开发需求。

4.1 声明式开发范式

声明式开发范式采用基于TypeScript进行声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供了UI绘制能力。声明式开发范式更接近自然语义的编程方式，让开发者直观地描述UI界面，不必关心框架如何实现UI绘制和渲染，实现极简高效开发。这种开发范式适用于复杂度较大、团队合作度较高的程序，如移动系统应用和系统应用开发。

在声明式开发范式中，开发者只需要描述界面应该是什么样子，而不需要关心如何去实现这个界面。这种方式可以让开发者更专注于应用的业务逻辑，而不是界面的实现细节。

4.2 类Web开发范式

类Web开发范式采用经典的HTML、CSS、JavaScript三段式开发方式，使用HTML标签文件进行布局搭建，使用CSS文件进行样式描述，使用JavaScript文件进行逻辑处理。UI组件与数据之间通过单向数据绑定的方式建立关联，当数据发生变化时，UI界面自动触发刷新。这种开发方式更接近Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟开发框架应用。这种开发范式适用于界面较简单的中小型应用和卡片，如Web前端开发人员。

在类Web开发范式中，开发者可以利用熟悉的HTML、CSS和JavaScript技术进行开发，这大大降低了开发者的学习成本。同时，由于方舟开发框架提供了丰富的UI组件和API，开发者可以快速地开发出高性能的应用。

5. 方舟开发框架的基础能力

方舟开发框架的基础能力主要包括组件、动效接口、状态与数据管理以及系统能力接口。这些基础能力为开发者提供了丰富的工具和接口，使得开发者能够更加高效地构建出满足需求的应用。

5.1 组件

组件是方舟开发框架中的基础构建块，它们是用于构建用户界面的最小单位。方舟开发框架提供了丰富的内置组件，如文本、图片、按钮等基础组件，以及可包含一个或多个子组件的容器组件。开发者可以通过组合这些组件，构建出满足自身应用需求的完整界面。此外，开发者还可以通过自定义组件，满足特定的业务需求。

5.2 动效接口

动效是提升用户体验的重要手段之一。方舟开发框架提供了丰富的动效接口，包括属性动画、转场动画和自定义动画等。开发者可以通过这些接口，为应用添加各种动态效果，使得应用界面更加生动和有趣。

5.3 状态与数据管理

状态与数据管理是方舟开发框架的重要特性之一。方舟开发框架提供了多种状态管理机制，包括UI组件状态和应用程序状态。通过这些机制，开发者可以更好地管理应用的状态，实现数据与UI的同步更新。此外，方舟开发框架还提供了数据绑定功能，使得数据的变化能够自动触发UI的刷新，极大地简化了开发者的工作。

5.4 系统能力接口

方舟开发框架提供了丰富的系统能力接口，包括网络、存储、设备等各种系统能力。开发者可以通过这些接口，方便地调用系统的各种能力，实现更加复杂和强大的功能。这些接口都是以JS接口的形式提供，使得开发者可以在熟悉的JS环境中，快速地开发出高效的应用。