一、组件

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成，开发者可以根据自己的需求，选择合适的布局进行页面开发。

Page表示页面的根节点，Column/Row等元素为系统组件。针对不同的页面结构，ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果，例如Row用于实现线性布局。

一、垂直布局

在鸿蒙 ArkUI 声明式开发框架中，Column 组件是实现垂直布局的核心容器，主轴为垂直纵向，子组件会自上而下有序排列，是表单、个人信息页等页面的基础布局方案Huawei Developer。

开发者可通过space设置子组件间距，依靠justifyContent控制主轴对齐方式，搭配alignItems调整水平交叉轴位置，快速规整页面元素。

Column 布局支持多层嵌套使用，可与水平 Row 布局组合完成复杂页面搭建，同时layoutWeight属性能够实现子组件按比例分配剩余高度，适配不同尺寸设备。

二、水平布局

水平布局是界面元素沿 X 轴横向排列的布局方式，核心特点为元素左右依次排布，常用于导航栏、按钮组、选项卡、顶部标题栏等场景。布局时可灵活设置对齐方式，左对齐适合常规内容摆放，右对齐多用于功能按钮、登录头像，居中对齐适配标题与均分菜单。

布局支持均分分配宽度，将容器宽度等分给子组件，也可固定部分元素尺寸，剩余空间自适应填充。同时能设置元素间距，避免组件拥挤，搭配弹性布局可轻松实现两端对齐、穿插留白。水平布局适配移动端与桌面端，横向排列契合人左右阅读习惯，结构简洁直观，常与垂直布局嵌套使用，搭建完整页面框架，是 UI 设计最基础、使用率最高的布局模式。

三、相对布局

相对布局，是以某一个控件为参照物，来定位其余组件位置的布局方式，区别于线性布局的顺序排列，控件位置不固定，依靠彼此或父容器的相对关系摆放。可以设置控件位于参照控件的上方、下方、左侧、右侧，也能对齐参照物的顶边、底边、中线，或是紧贴父容器的左、右、上、下边缘。

它灵活性极强，能够轻松实现错落的界面排版，适合布局结构不规则、控件位置交错的页面，比如头像搭配文字、悬浮按钮、弹窗组件。缺点是层级复杂时容易出现控件重叠、定位错乱的问题，层级越多调试难度越大。实际开发中常和线性布局、水平布局嵌套使用，兼顾排版灵活度与结构规整性，是界面开发里常用的主流布局类型。

四、层叠布局

层叠布局也叫堆叠布局，核心特点是控件按照层级上下堆叠摆放，子组件默认以父容器左上角为原点进行定位，后添加的控件会覆盖在先添加组件的上方，如同一张张纸片叠放。开发者可以自由设置每个元素的坐标、对齐方式，随意摆放位置，轻松实现控件重叠效果。

常用来制作悬浮按钮、弹窗、提示气泡、头像蒙版、轮播遮罩、页面浮窗等效果，适配需要元素叠加的场景。优势是定位自由，能轻松完成多层视觉效果；弊端是层级过多容易遮挡关键内容，坐标设置不当极易出现控件错位。开发时一般配合相对布局、线性布局嵌套使用，把控层级顺序，合理控制边距与层级高低，兼顾美观与页面稳定性。

五、弹性布局

弹性布局（Flex）是当下最常用的自适应布局，可快速设定主轴为水平或垂直方向，灵活分配容器剩余空间。子元素能够自动伸缩、均分宽度，也可固定尺寸，空白区域自动留白，完美适配不同屏幕尺寸。它自带丰富对齐属性，主轴可左对齐、居中、两端对齐、分散均分，侧轴能顶部对齐、居中对齐、底部对齐，一键完成规整排版。

多用于导航栏、按钮组、表单、卡片列表等场景，解决传统布局留白不均、适配差的痛点。优点是代码简洁、响应性强，横竖方向切换简单；只需简单属性就能实现复杂排布，常用来优化水平、垂直布局。唯一需要注意合理设置收缩与扩张权重，防止元素挤压变形，是界面开发适配多端的核心布局方案。

不管是那种布局，他只能有一个根布局，可以在根布局里面嵌套其他布局

二、组件

在 HarmonyOS ArkTS 声明式开发体系中，组件是界面搭建的最小单元，所有 APP 页面都由各类基础组件组合布局而成。本文将针对开发最常用的 8 类核心组件，讲解用途、核心特点与适用场景，帮助新手理清组件逻辑，快速完成页面开发。

（一）展示类静态组件：承载页面视觉内容

1. Image 图片组件

Image 是页面最基础的视觉组件，支持加载本地资源图、网络图片，可自由设置尺寸、圆角、缩放模式，头像、图标、背景图都依靠它实现，是页面视觉美化的必备组件。

2. Video 视频组件

专门用于视频播放，支持本地rawfile视频与网络视频源，自带播放、暂停、进度控制等基础能力，可完成短视频、宣传视频、课程视频等播放业务。

3. Swiper 轮播图组件

容器型组件，可嵌套图片、文本等内容，自带自动轮播、循环滑动、指示器圆点，普遍用于首页 Banner 广告、图片相册、焦点资讯展示，是移动端首页标配组件。

（二）、导航与布局组件：实现页面切换与分区

Tabs 选项卡组件

由Tabs容器与TabContent内容页组成，可在顶部 / 底部放置标签栏，点击标签即可横向切换不同内容页面。常用于 APP 底部导航、分类菜单栏，能高效完成多模块内容分区展示。

（三）、表单交互组件：实现用户输入与操作

1. Text 文本 / TextInput 输入框

Text 负责静态文字展示，可自定义字号、颜色、字重、对齐方式；TextInput 为交互式输入框，支持账号、密码、数字、邮箱等多类型键盘，是表单采集信息的核心组件。

2. Button 按钮组件

页面核心触发控件，支持自定义圆角、背景色、尺寸，搭配onClick点击事件，可绑定提交、跳转、重置等业务逻辑，是所有交互行为的入口。

3. Radio 单选框

同组 Radio 互斥选中，多用于性别、学历、单选选项场景，依靠状态变量记录选中值，搭配表单完成单一选项选择。

4. Toggle 开关组件

布尔型开关控件，只有开启 / 关闭两种状态，适合设置类页面，例如消息通知、夜间模式、权限开关等功能场景。

（四）、总结

以上 8 类组件覆盖了鸿蒙 APP 开发 90% 的基础 UI 场景：图片、视频、轮播负责内容展示，选项卡负责页面导航，文本输入框、按钮、单选框、Toggle 负责用户交互。实际开发中，结合 Column 垂直布局、Row 横向布局、Stack 层叠布局进行组件嵌套，就能组合出完整的业务页面。熟练掌握每类组件的属性与用法，是鸿蒙应用开发入门的核心基石。

三、掌握知识

完成基础组件学习后，想要实现页面动态交互、多页面跳转、弹窗提示等业务逻辑，就必须掌握 ArkTS 的状态管理、弹窗、路由以及两大核心事件回调方法。本文针对@State状态装饰器、弹窗、页面路由、onChange与onClick事件进行完整解析，帮大家吃透鸿蒙交互开发的进阶核心知识。

一、@State 状态装饰器：页面动态刷新的核心

@State是 ArkTS 最基础的状态管理装饰器，作用是定义响应式变量。被该装饰器修饰的数据发生改变时，绑定该变量的 UI 组件会自动刷新视图，实现数据驱动界面更新。 我们日常的文字修改、单选框选中、开关切换，底层全部依靠@State完成。普通普通变量修改不会触发页面重绘，而@State变量可以完成 UI 实时同步，是动态交互的底层基石。

ets

@State msg:string = "初始文字"

二、两大常用事件回调函数

1. onClick 点击事件

触发时机：组件被鼠标 / 手指点击时执行，多用于 Button 按钮、图片等可点击控件。 核心用途：绑定点击业务逻辑，例如按钮提交、页面跳转、文字重置、打开弹窗等，是页面最常用的交互事件。

ets

Button("按钮")
  .onClick(()=>{
    // 点击后执行代码
  })

2. onChange 数值变更事件

触发时机：组件内部数值、选中状态、输入内容发生改变时自动执行，不会受点击动作触发。 适用控件：TextInput 输入框、Radio 单选框、Toggle 开关、Swiper 轮播等。输入文字、切换单选选项、拨动开关时，实时捕获最新值，实时校验内容、记录选中状态。

ets

TextInput()
  .onChange((value:string)=>{
    // 实时获取输入的内容
  })

二者核心区别：onClick是人为点击动作触发，onChange是组件内部数据变化触发。

三、弹窗（AlertDialog）：轻量提示交互

弹窗是全局浮层组件，悬浮于页面上层，常用于消息提示、确认操作、警告提醒。鸿蒙内置AlertDialog原生弹窗，可自定义标题、提示文本、确认 / 取消双按钮。 典型场景：提交前二次确认、删除警告、操作成功提示。无需新建页面，轻量高效，不破坏当前页面上下文，是表单操作必备的反馈组件。

四、页面路由 router：实现多页面跳转

单页面只能完成简单展示，完整 App 必然包含多个页面，路由 Router就是负责页面之间跳转、页面传值、页面返回的核心机制。 配合router_map.json路由配置文件，我们可以实现：从首页跳转到详情页、编辑页，同时携带参数；也可以回退上一页。分为命名路由与页面栈管理，可以精准控制页面栈生命周期，是多页面应用的必备技术。

总结

1. @State是数据与视图联动的根基，实现动态 UI；
2. onClick处理点击行为，onChange监听数据变化，覆盖绝大多数交互场景；
3. 弹窗用于即时消息反馈，路由负责多页面页面跳转。 以上知识点串联起来，就可以结合之前的基础组件，开发出具备完整交互逻辑、多页面结构的鸿蒙应用，完成从静态页面到动态业务项目的进阶。