HarmonyOS学习日记(day5)

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

基本概念

• UI： 即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面进行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。

• 组件： UI构建与显示的最小单位，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

两种开发范式

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

• 声明式开发范式：采用基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力。

• 类Web开发范式：采用经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。

大概区别：

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

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

通用规则

• 默认单位

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

• 异常值处理

  输入的参数为异常（undefined，null或无效值）时，处理规则如下：

  （1）对应参数有默认值，按默认值处理；

  （2）对应参数无默认值，该参数对应的属性或接口不生效。

Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮，其类型包括胶囊按钮、圆形按钮、普通按钮。

在Column容器中的子组件默认是按照从上到下的垂直方向布局的，其主轴的方向是垂直方向，在Row容器中的组件默认是按照从左到右的水平方向布局的，其主轴的方向是水平方向。

 Image支持svg，gif，bmp

 网格布局是由“行”和“列”分割的单元格所组成，具有较强的页面均分能力，子组件占比控制能力

Grid组件提供了rowsTemplate和columnsTemplate属性用于设置网格布局行列数量与尺寸占比

 Grid用于设置网格布局相关参数，GridItem定义子组件相关特征。Grid组件支持使用条件渲染、循环渲染、懒加载等方式生成子组件

设置网格容器的步骤：准备待循环的数据源、设置网格容器Grid、利用ForEach对数据进行渲染

Swiper组件:

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面

Swiper通过设置autoPlay属性，控制是否自动轮播子组件

Swiper支持水平和垂直方向上进行轮播，主要通过vertical属性控制

Swiper支持手指滑动、点击导航点和通过控制器三种方式切换页面

List组件:

 List除了提供垂直和水平布局能力、还提供了自适应交叉轴方向上排列个数的布局能力

当列表项达到一定数量，内容超过屏幕大小时，可以提供滚动功能。它适用于呈现同类数据类型或数据类型集

List提供了divider属性用于给列表项之间添加分隔线。在设置divider属性时，可以通过strokeWidth和color属性设置分隔线的粗细和颜色

List组件主轴默认是垂直方向，即默认情况下不需要手动设置List方向，就可以构建一个垂直滚动列表