ArkUI

本文介绍HarmonyOS中Image组件的使用方法：可加载存档图和多媒体像素图两类资源，数据源支持本地、网络、resource、媒体库及base64；通过属性可设置尺寸与边距，并支持在float.json中统一配置。文章还演示了事件调用，并提供一个仿社区帖子页面的完整代码案例，涵盖作者信息、图文网格、点赞互动、评论列表及底部输入栏，展示Image在实际布局中的典型应用，帮助开发者快速掌握图片加载与页面搭建技巧。

本文介绍HarmonyOS中Scroll滚动组件的用法。Scroll默认在内容超出屏幕时垂直方向滚动，并出现滚动条；如需水平滚动，可通过`scrollable(ScrollDirection.Horizontal)`修改延伸方向。文章给出综合练习示例，展示在Scroll内构建Row并排列多个子项实现横向滚动。此外还补充了两个常用属性：`scrollBar(BarState.On)`可使滚动条常驻显示，`edgeEffect(EdgeEffect.Spring)`为滚动添加边缘回弹效果。内容聚焦组件基础配置，便于开发者快速实现滚动布局。

本文展示了一个使用HarmonyOS ArkUI（JavaScript）实现的注册页面示例。页面采用Column垂直布局为主容器，内部通过多个Row水平布局组合图标与TextInput输入框，分别实现用户名、密码、确认密码和邮箱的输入，其中密码类输入框设置了Password或Email类型。页面顶部包含欢迎标题、副标题及图标，底部提供“注册账号”主按钮、分隔文字以及三个第三方登录图标。整体布局使用圆角背景、透明输入框和弹性居中样式，体现ArkUI声明式UI的常用组件搭配与样式设置方法。读者可参考此示例快速搭建结构完整、样式统一的移动端注册表单，并了解Column/Row布局、输入框类型、按钮及图标资源的使用方式。

文章以鸿蒙ArkTS代码示例展示如何构建仿微信联系人页面。页面用@Entry标记入口组件，Column垂直布局承载结构，List与ListItem实现可滚动分组列表，Row配合Image与Text实现头像加名称排列。内容分“HI'鸭鸭乐”和“我的朋友”两组，含新的联系人、仅聊天的朋友、群聊、标签、公众号、服务号及多位好友条目。列表通过divider设置分割线起始边距，整体浅灰背景与圆角头像还原微信风格。读者可掌握ArkTS常用组件组合、分组列表及基础样式配置。

组件是独立的代码块，具备特定功能与样式，可在页面中独立使用并重复调用。ArkUI为开发者提供现成组件，用于快速构建UI，提升开发效率与界面一致性。文章列举了ArkUI中常用的通用属性和通用事件，并通过“ok按钮”示例展示组件的基本使用方法：代码中创建Button组件，设置点击事件回调、宽度、高度、圆角、字号，以及通过alignRules进行底部居中布局并设置下边距。该示例帮助读者理解组件的属性配置与事件绑定方式，掌握实际开发中的基础操作。

UI是用户界面的简称，泛指用户能看到、摸到、点到的所有界面元素，包括APP界面、网页按钮、图标、布局、颜色和字体等。正文还展示了课上实训内容，包含相关实训图片，并给出了一段JavaScript代码示例：通过按钮的onClick事件，将消息更新为“hello Arkui”，同时在控制台打印“点击了按钮”。该示例演示了ArkUI中按钮点击交互的基本写法，帮助读者理解如何通过代码实现界面交互。读者可从中获得对UI概念的实际感知，并了解简单交互功能的实现方式。