前言HarmonyOS 鸿蒙应用开发核心语言为ArkTS基于 TypeScript 拓展是一套声明式UI、数据驱动、高性能、轻量化的前端开发体系。与传统命令式开发不同ArkTS 只需声明页面结构、样式与数据关系系统自动完成渲染与刷新极大提升移动端开发效率。本文将系统化、全覆盖讲解鸿蒙 ArkTS 零基础核心知识点包含五大布局系统、全部基础UI组件、多媒体组件、轮播图Swiper、State状态管理、交互事件、弹窗、页面路由知识点层层递进、代码可直接运行、适配新手学习、可直接作为课程总结/技术博客发布。一、ArkTS 核心开发基础认知1.1 声明式UI核心思想ArkTS 采用声明式编程开发者只需要描述“页面长什么样”不需要手动控制页面刷新、控件创建、视图更新。核心特点结构与行为分离、数据驱动UI、自动渲染更新。1.2 标准页面结构固定模板所有鸿蒙页面必须遵循统一结构入口装饰器 组件结构体 build渲染方法Entry // 页面入口 Component // 自定义组件 struct DemoPage { // 状态变量、控制器定义区 build() { // 页面布局、组件、样式、事件全部写在这里 } }1.3 页面开发完整流程定义状态数据 → 选择布局搭建页面骨架 → 放置UI/多媒体组件 → 设置样式 → 绑定交互事件 → 实现动态UI效果二、鸿蒙五大布局系统页面骨架核心布局是页面的骨架所有组件必须嵌套在布局容器内。鸿蒙基础布局共五类覆盖线性排列、层叠堆叠、自由定位、弹性自适应所有场景。2.1 Column 垂直布局最常用根布局核心作用子组件从上到下垂直排列是项目90%页面的根布局。适用场景首页、表单、详情页、纵向流式页面。Column({space:20}){ Text(页面标题) Button(功能按钮) } .width(100%) .height(100%) .padding(20)常用属性space组件间距、alignItems对齐方式、padding、margin、borderRadius2.2 Row 水平布局核心作用子组件从左到右横向单行排列不自动换行。适用场景按钮组、选项栏、横向功能区、轮播控制栏。易错点Row 内部子组件禁止设置 width(100%)会挤占后续组件。2.3 Stack 层叠/堆叠布局核心作用实现图层叠加后写的组件覆盖在先组件上方实现浮层效果。适用场景图片文字遮罩、轮播图角标、红点提示、视频播放浮层、水印。Stack(){ Image($r(app.media.banner)).objectFit(ImageFit.Cover) Text(限时活动) .position({x:15,y:15}) .backgroundColor(Color.Red) .fontColor(Color.White) .padding(5) } .width(100%) .height(220)2.4 RelativeContainer 相对布局核心作用组件通过 ID 互相约束位置实现自由定位、不规则排版。适用场景登录页、复杂表单、自由布局卡片。开发规则所有约束组件必须设置唯一 id()通过 alignRules 绑定父容器或其他组件禁止循环约束A绑定B、B绑定A2.5 Flex 弹性布局进阶万能布局核心作用Row/Column 增强版支持主轴切换、自动换行、弹性均分。核心属性directionRow横向 / Column纵向wrapWrap 开启自动换行子组件 flexGrow(1)自动均分剩余空间适用场景底部导航、多标签、等分按钮、自适应流式布局。Flex({direction:FlexDirection.Row,wrap:FlexWrap.NoWrap}){ Button(首页).flexGrow(1) Button(分类).flexGrow(1) Button(我的).flexGrow(1) } .width(100%)2.6 五大布局选型总结简单纵向页面 → Column单行横向排版 → Row图片叠加、浮层角标 → Stack自由不规则表单 → RelativeContainer均分、自适应、标签流 → Flex三、ArkTS 全套基础UI与多媒体组件3.1 Text 文本组件用于展示静态文字、动态状态文字支持字号、颜色、对齐、最大行数。3.2 TextInput 输入框组件核心录入组件用于接收用户输入搭配 onChange 实现实时数据同步。3.3 Button 按钮组件核心交互组件绑定 onClick 点击事件可动态切换文字、颜色、状态。3.4 Image 图片组件支持两种资源读取媒体资源$r(app.media.xxx)静态资源$rawfile(xxx)必备修饰符objectFit(ImageFit.Cover) 防止拉伸变形。3.5 Video 视频组件播放本地视频必须绑定 VideoController 控制器才能播放暂停。3.6 Swiper 轮播图组件重点首页 Banner、广告轮播核心组件支持自动播放、循环滑动、指示器、手动切换。核心属性autoPlay自动播放interval切换毫秒间隔loop循环播放indicator显示底部圆点onChange监听页码切换手动控制依赖 SwiperController 实现上一页、下一页、跳转指定页。3.7 Toggle / Radio / Tabs 拓展组件Toggle布尔开关组件适配设置类功能Radio单选组件需配合 RadioGroup 使用Tabs标签页切换实现多页面分类切换四、State 响应式状态管理动态UI核心4.1 核心原理State是 ArkTS 最重要的装饰器被修饰的变量具备响应式刷新能力数据改变 → 页面自动刷新绑定该数据的所有组件4.2 三大常用数据类型字符串 string存储输入框内容、动态文本布尔 boolean开关状态、组件显隐数字 number轮播下标、计数、页码4.3 开发规范状态变量定义在 struct 内部、build 外部使用必须加 this.xxx普通变量无刷新能力只有 State 可驱动UI更新五、交互事件系统人机交互闭环5.1 onClick 点击事件适用于所有可点击组件用户点击触发自定义逻辑。常用场景状态切换、轮播切换、弹窗弹出、页面跳转。5.2 onChange 数值监听事件监听组件数值变化实时同步数据到状态变量。适用组件TextInput、Swiper、Toggle、Radio。常用场景实时输入同步、轮播页码更新、开关状态同步。5.3 完整交互闭环逻辑用户操作 → 触发事件 → 修改状态数据 → UI自动刷新这是所有鸿蒙动态页面的底层运行原理。六、拓展核心能力6.1 Dialog 弹窗提示分为系统弹窗 AlertDialog 和自定义弹窗用于消息提示、操作确认。6.2 Router 页面路由实现多页面跳转、返回、传参是多页面项目必备技术。七、综合实战整合完整可运行架构完整项目开发规范使用 Column 作为全局根布局顶部嵌套 Stack Swiper 实现带角标的轮播图中部使用 Flex 实现均分功能按钮表单区域使用 RelativeContainer 自由排版通过 State 实现全局动态数据联动通过 onClick / onChange 完成用户交互八、学习总结与感悟通过系统性学习 ArkTS 基础开发我完整掌握了鸿蒙声明式UI的整套开发体系理解了布局搭骨架、组件填内容、状态控动态、事件做交互的层级开发思想。五大布局各司其职覆盖静态排版、图层叠加、自由定位、自适应弹性所有场景各类UI与多媒体组件满足图文展示、视频播放、轮播广告、表单录入等主流业务需求。State 响应式状态管理彻底实现了数据驱动UI的开发模式摆脱传统手动刷新视图的繁琐操作是鸿蒙开发的核心精髓。配合点击、监听两大事件可实现完整的人机交互闭环。整体知识点层层递进、逻辑闭环掌握以上内容可独立开发完整的鸿蒙基础页面为后续自定义组件、网络请求、列表开发、全栈项目实战打下坚实基础。