zhenggaoxiao232的博客

rating组件用于展示用户对内容的评价等级。通过在HML文件中创建rating组件，并设置numstars和rating属性，可以定义评分的星级总数和当前评星数。通过star-background、star-foreground和star-secondary属性，可以自定义评分的样式，支持本地图片路径。此外，可以通过绑定change事件，实时获取用户评分。开发者还可以通过开关和滑动条动态调整评分样式和星级总数，提升用户体验。

image-animator组件为图片帧动画播放器。

image是图片组件，用来渲染展示图片。

picker是滑动选择器组件，类型支持普通选择器、日期选择器、时间选择器、时间日期选择器和多列文本选择器。

button是按钮组件，其类型包括胶囊按钮、圆形按钮、文本按钮、弧形按钮、下载按钮。

input是交互式组件，用于接收用户数据。其类型可设置为日期、多选框和按钮等。

Flex是以弹性方式布局子组件的容器组件，提供更加有效的方式对容器内的子元素进行排列、对齐和分配剩余空间。

text是文本组件，用于呈现一段文本信息。

swiper为滑动容器，提供切换显示子组件的能力。

tabs是一种常见的界面导航结构。通过页签容器，用户可以快捷地访问应用的不同模块。

当一个任务需要多个步骤时，可以使用stepper组件展示当前进展。

form是一个表单容器，支持容器内[Input]组件内容的提交和重置。

Dialog组件用于创建自定义弹窗，通常用于展示用户需要关注的信息或操作。在pages/index目录下的HML文件中，可以通过添加dialog组件和Button组件来触发弹窗。dialog组件支持width、height、margin等样式属性。通过JavaScript中的show和close方法，可以控制弹窗的显示和关闭。此外，点击页面非弹窗区域会触发cancel事件，自动关闭弹窗。开发者可以通过Textarea组件在弹窗中输入信息，并保存为日程表形式展示。dialog组件不支持动态更新属性和样式，且仅

list是用来显示列表的组件，包含一系列相同宽度的列表项，适合连续、多行地呈现同类数据。

很多应用由多个页面组成，比如用户可以从音乐列表页面点击歌曲，跳转到该歌曲的播放界面。开发者需要通过页面路由将这些页面串联起来，按需实现跳转。

手势表示由单个或多个事件识别的语义动作（例如：触摸、点击和长按）。一个完整的手势也可能由多个事件组成，对应手势的生命周期。

动画分为[静态动画]和[连续动画]。

添加交互可以通过在组件上关联事件实现。本节将介绍如何用div、text、image组件关联click事件，构建一个如下图所示的点赞按钮。

本文介绍了三种常用的容器组件：div、list和tabs。div适合简单布局，list优化长列表性能，tabs支持动态加载。list仅支持list-item子组件，tabs包含tab-bar和tab-content。通过示例代码展示了list和tabs的基本用法，并说明tabs的tab-content默认充满剩余空间。合理选择容器组件可提升页面性能和用户体验。<｜end▁of▁sentence｜>

留言框的功能为：用户输入留言后点击完成，留言区域即显示留言内容。用户点击右侧的删除按钮可删除当前留言内容并重新输入。

在开发中，[image]组件用于添加图片区域，其使用方法与text组件相似。图片资源建议存放在js\default\common目录下，该目录需手动创建。示例代码展示了如何在HML文件中使用[image]组件，并通过CSS设置图片样式，同时在JS文件中定义图片路径。具体实现包括：在HML文件中使用<image>标签并绑定图片路径，在CSS中设置图片的边距和高度，在JS中定义图片资源的路径。这种方式便于管理和维护图片资源，并确保图片在页面中正确显示。

实现标题和文本区域最常用的是基础组件text。

设备的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。

基于开发框架的应用会覆盖多个国家和地区，开发框架支持多语言能力后，可以让应用开发者无需开发多个不同语言的版本，就可以同时支持多种语言的切换，为项目维护带来便利。

资源限定词可以由一个或多个表征应用场景或设备特征的限定词组合而成，包括屏幕密度等维度，限定词之间通过中划线（-）连接。开发者在**resources**目录下创建限定词文件时，需要掌握限定词文件的命名要求以及与限定词文件与设备状态的匹配规则。

在app.js中可以定义如下应用生命周期函数

JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。

CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式，也可在页面CSS样式文件中对组件、页面自定义不同的样式。

HML是一套类HTML的标记语言，通过组件，事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。

【代码】鸿蒙0基础学习【app.js】ArkUI。

js标签用于配置实例名称、页面路由和窗口样式信息

JS FA应用的JS模块（entry/src/main/js/module）的典型开发目录

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

当监听到注册的事件为绘制类型时，可通过自定义绘制功能执行绘制逻辑，自定义绘制的内容。

通过XComponent接入的三方平台，NDK提供了对接无障碍的接口函数，实现三方平台的组件在ArkUI中的无障碍能力。

ArkUI在Native侧提供的能力作为ArkTS的子集，部分能力不会在Native侧提供，如声明式UI语法，自定义struct组件，UI高级组件。

ArkUI开发框架在NDK接口提供了自定义UI组件的能力，这些能力包括自定义测算，自定义布局和自定义绘制。开发者通过注册相关自定义回调事件接入ArkUI开发框架的布局渲染流程，这些事件需要使用[registerNodeCustomEvent]来进行声明，并通过[addNodeCustomEventReceiver]函数添加组件自定义事件的监听器，在该监听器的回调函数中处理相关自定义测算，自定义布局和自定义绘制逻辑。

通过弹窗控制器显示自定义弹窗，可以设置自定义弹窗的样式和内容。

ArkUI开发框架在NDK接口提供了瀑布流容器组件，通过瀑布流自身的排列规则，将不同大小的"项目"自上而下如瀑布般紧密布局。

ArkUI开发框架在NDK接口提供了列表组件，使用列表可以轻松高效地显示结构化、可滚动的信息。列表组件支持控制滚动位置、支持分组显示内容、持使用NodeAdapter实现懒加载以提升列表创建性能。