导图社区 HarmonyOS开发
- 4
- 0
- 0
- 举报
HarmonyOS开发
这是一篇关于HarmonyOS开发的思维导图，主要内容包括：简介，开发工具与基础组件详解，登录界面与待办列表开发实践，层叠布局、自定义组件、ForEach，AI辅助编程：CodeGenie，Tabs选项卡组件详解，第七篇 - http网络请求，数据监听器、滚动、侧滑功能，组件化开发案例详解（父子组件传值）。
编辑于2025-11-25 10:25:59- 华为
- 鸿蒙
- 技术开发
- 计算机开发
- HarmonyOA
- HarmonyOS开发
这是一篇关于HarmonyOS开发的思维导图，主要内容包括：简介，开发工具与基础组件详解，登录界面与待办列表开发实践，层叠布局、自定义组件、ForEach，AI辅助编程：CodeGenie，Tabs选项卡组件详解，第七篇 - http网络请求，数据监听器、滚动、侧滑功能，组件化开发案例详解（父子组件传值）。
- 大模型AI应用全栈开发知识体系
这是一篇关于大模型AI应用全栈开发知识体系的思维导图，主要内容包括：交付，多模态，开发框架与工具栈，API，AI编程，Prompt，RAG，产品。
- MySQL线上故障排查技巧、方法及经验
这是一篇关于MySQL线上故障排查的思维导图，主要内容包括：背景，线上故障排查的思路与方向，SQL语句执行出错排查，MySQL线上慢查询语句排查，MySQL线上机器故障排查。
HarmonyOS开发
社区模板帮助中心，点此进入>>
- HarmonyOS开发
这是一篇关于HarmonyOS开发的思维导图，主要内容包括：简介，开发工具与基础组件详解，登录界面与待办列表开发实践，层叠布局、自定义组件、ForEach，AI辅助编程：CodeGenie，Tabs选项卡组件详解，第七篇 - http网络请求，数据监听器、滚动、侧滑功能，组件化开发案例详解（父子组件传值）。
- 大模型AI应用全栈开发知识体系
这是一篇关于大模型AI应用全栈开发知识体系的思维导图，主要内容包括：交付，多模态，开发框架与工具栈，API，AI编程，Prompt，RAG，产品。
- MySQL线上故障排查技巧、方法及经验
这是一篇关于MySQL线上故障排查的思维导图，主要内容包括：背景，线上故障排查的思路与方向，SQL语句执行出错排查，MySQL线上慢查询语句排查，MySQL线上机器故障排查。
- 相似推荐
- 大纲
HarmonyOS开发
简介
核心概括
HarmonyOS是什么及其特性
主要分支
HarmonyOS背景与误解澄清
关键概念
HarmonyOS中文称鸿蒙系统或鸿蒙OS
误解：以为鸿蒙仅是手机、平板的移动操作系统
实际：面向全场景的分布式操作系统
支持论据
覆盖设备：手机、平板、电脑、车机、手表、电视、音响、眼镜及家电家居等
战略：全场景智慧生活战略1+8+N（手机+8种常用设备+万物）
HarmonyOS三大特征
关键概念
一次开发，多端部署
可分可合，自由流转
统一生态，原生智能
主要分支
一次开发，多端部署
关键概念
一个工程、一次开发上架，即可用于所有设备
支持论据
华为提供核心能力：界面级、特性级、代码级的一多能力
自适应布局能力、响应式能力：保障界面美观
交互事件归一：根据设备不同识别成不同交互方式
案例
华为提供的智能凳子比喻：在不同环境下有不同功能
可分可合，自由流转
关键概念
元服务：轻便、即点即用、即用即走
主要分支
元服务优势
支持论据
操作便捷：无需打开其他载体
实时系统级通知：如订单状态、骑手位置
系统能力集调用：如语音助手控制
与app复用：可分可和
可分可合
关键概念
业务解耦：把不同的业务拆分为多个模块，依次打包部署为不同的元服务
模块组合：把模块组合到一起，打包成一个app
自由流转
关键概念
跨设备协作：同一个应用从一个设备流转到另外一个设备
支持论据
案例：车机导航到手机步行导航
案例：电视追剧到手机继续观看
统一生态，原生智能
关键概念
统一生态：支持多端融合，统一接入标准
原生智能：系统提供智能能力
主要分支
统一生态
支持论据
快速将其他平台的应用开发框架接入到鸿蒙
原生智能
支持论据
内置AI能力：如图像识别、人脸识别、语音提取文字等
意图框架：系统级的意图标准体系，理解用户显性与潜在意图
案例
意图框架学习用户习惯：如特定时间地点用户的行为
服务找人：根据用户习惯自动推荐元服务
HarmonyOS学习建议
关键概念
阅读鸿蒙官方指南
鸿蒙学堂Codelabs实战演练
动手编程实践
支持论据
教程配合实战：猫林老师教程结合Codelabs案例
编程实践重要性：多写代码以真正理解和使用
HarmonyOS开发工具与环境
关键概念
下载安装开发工具
支持论据
下载地址：developer.huawei.com/consumer/cn…
登录华为账号后下载
最新版beta2，API版本12
HarmonyOS课后练习
主要分支
单选题案例
当用户希望能够在多个设备间来回切换、完成多个任务，开发者可以使用哪个核心能力？
选项：统一生态、可分可合、自由流转、原生智能
答案：自由流转
应用如需在多个设备上运行，鸿蒙开发提供了什么特性节约开发成本？
选项：一次开发，多端部署、可分可合，自由流转、统一生态，原生智能、一套代码运行在不同虚拟机
答案：一次开发，多端部署
如果开发者在原生应用版本的基础上，想要提供多种服务给用户，开发者选择开发场景的最优选是？
选项：独立开发一个应用、开发多个元服务，按需组合为一个复杂的应用、独立开发一个元服务、同时开发应用和多个元服务
答案：开发多个元服务，按需组合为一个复杂的应用
多选题案例
用户使用应用的情境发生变化时，哪些场景适合使用跨端迁移能力？
选项：在外时手机上编辑邮件，到公司后在2in1设备上继续编辑、在外时手机玩游戏，到家后希望获取更好的视觉体验，在平板上继续玩、在家里智慧屏上看视频，当下需要出门时，可以手机上继续观看、手机视频通话中，到家后家中有智慧屏，可以更沉浸地视频聊天
答案：ABCD
简答题案例
请简要说明一下什么是一次开发，多端部署
答案：略
请简要说明一下什么是可分可合，自由流转
答案：略
请简要说明一下什么是统一生态，原生智能
答案：略
判断题案例
猫林老师帅吗？
答案：非常帅
HarmonyOS未来前景与讨论
关键概念
鸿蒙前景讨论
支持论据
蚕食安卓份额原因：鸿蒙三大特性、安卓碎片化、国家号召核心技术自主化
观点
鸿蒙可能会蚕食安卓的其中一部分原因
开发工具与基础组件详解
开发工具DevEco Studio介绍
DevEco Studio功能特性
高效智能代码编辑
支持ArkTS、JS、C/C++等语言代码高亮、智能补齐、错误检查、自动跳转、格式化、查找功能
提升代码编写效率
多端双向实时预览
支持UI界面代码双向预览、实时预览、动态预览、组件预览、多端设备预览
快速查看代码运行效果
多端设备模拟仿真
提供HarmonyOS本地模拟器，支持Phone等设备模拟仿真
便捷获取调试环境
DevEco Profiler性能调优
提供实时监控能力和场景化调优模板
全方位设备资源监测，采集数据覆盖多个维度
运行环境要求
Windows系统要求
Windows10 64位、Windows11 64位
内存16GB及以上，硬盘100GB及以上，分辨率1280800像素及以上
macOS系统要求
macOSX86 12/13/14，macOSARM 12/13/14
内存8GB及以上，硬盘100GB及以上，分辨率1280800像素及以上
下载与安装
下载地址
developer.huawei.com/consumer/cn…
安装过程
Windows版下一步下一步直到完成，默认安装到C盘，可修改安装位置
Mac版拖入应用程序（Applications）文件夹即可
切换为中文环境
Windows版设置
菜单栏选File > Setting > Plugins > 搜索chinese> 启用 > 重启DevEco后生效
Mac版设置
菜单栏苹果图标后第一项进入，后续步骤与Windows版相同
创建与配置项目
创建项目
首次打开DevEco Studio
点击Create Project（新建项目）创建工程
已打开工程
菜单栏选择File（文件）>New（新建）> Create Project（新建项目）
项目配置
选择应用开发类型
选择Application应用开发，选择模板“Empty Ability”
配置工程界面
Compatible SDK选择“5.0.012”，其他参数保持默认设置
项目区域说明
项目资源管理区
展示项目一切资源，早期关注entry文件夹
代码编辑区域
写代码的地方，可缩小或折叠左侧面板
侧边工具栏
实时查看界面效果的预览器，代码一改预览器自动刷新
底部区域
终端下载三方包、日志查看console.log输出等，早期暂不关注
ArkTS语法说明
ArkTS语言基础
ArkTS与TypeScript关系
ArkTS在TypeScript生态基础上扩展，保持TS基本风格
通过规范定义强化开发期静态检查和分析，提升程序执行稳定性和性能
ArkTS语法特性
JS、TS语法ArkTS都有，还添加了声明式UI语法
出于稳定、安全目的，部分语法、接口在ArkTS中不允许使用
学习前提与建议
读者基础要求
默认读者懂变量、常量、分支语句、循环语句、函数、数组、对象、类、接口等内容
学习建议
不懂语法可搜一搜、利用AI解答、留言问老师，不影响学习进度和体验
ArkUI基础组件
ArkUI概述
ArkUI功能
提供简洁UI语法、丰富UI功能（组件、布局、动画、交互事件）、实时界面预览工具
支持可视化界面开发
代码结构
默认生成代码结构
build函数不能删，里面是写界面的地方
Text组件
Text组件功能
显示文本内容
Text组件用法
Text'文字内容'，小括号里给字符串
Text组件属性
fontSize、fontColor、fontWeight等，可用枚举修改
根组件与布局组件
根组件概念
页面必须有且只有一个根组件，包住当前页面所有内容的最外部容器
Column组件
纵向布局容器，子组件从上到下排列
属性有justifyContent、alignItems等，可设置子组件排列方式
Row组件
横向布局容器，子组件从左到右排列
属性与Column类似，主轴和交叉轴方向不同
Image组件
Image组件功能
显示图片，支持png、jpg、jpeg等多种格式
加载本地图片
使用$r函数，如Image$r'app.media.startIcon'
加载网络图片
传入图片网址字符串，如Image'https//wwwfile.huawei.com//media/corporate/images/home/logo/huawei_logo.png'
真机或模拟器运行时需申请网络权限
TextInput组件
TextInput组件功能
文本输入框，用户输入内容
TextInput组件语法
TextInput{ placeholder'占位符', text'默认值' }
TextInput组件属性
type设置输入框类型，maxLength设置最大允许输入字符数
Button组件
Button组件功能
按钮组件，用户点击或触摸
Button组件语法
Button'按钮名'，默认内容撑开
Button组件属性
type设置按钮样式，如ButtonType.Capsule、ButtonType.Circle、ButtonType.Normal
登录界面与待办列表开发实践
案例分析：登录界面
布局分析
从上到下布局，使用Column作为根容器
包含8行元素：Image、Text、Text、TextInput、TextInput、Row、Button、Text
短信验证码登录与忘记密码布局
使用Row包起来实现从左到右布局
设置justifyContentFlexAlign.SpaceBetween实现首尾对齐
问题解决
Row的justifyContentFlexAlign.SpaceBetween未生效问题
原因：Row组件未设置宽高，依赖内容撑开
解决：给Row设置width'100%'
行与行之间间距问题
原因：未设置间距
解决：给Column设置space属性
样式调整
中间部分布局调整
使用Column作为父容器，设置margin实现上下外间距
给包住验证码登录文字的Row设置上间距
页面左右间距调整
给根组件Column设置padding实现左右内间距
ArkTS语法详解
事件处理
语法：组件.on事件名e => {事件处理代码}
示例：Button'登录').onClick => {处理代码}
提示框使用
导入PromptAction对象
import { promptAction } from '@kit.ArkUI'
使用showToast方法
示例：promptAction.showToast{message '提示消息', duration 2000}
声明组件内成员变量
语法：变量名 类型 = 初始值
示例：userId string = ''
使用：前面加this访问
示例：this.userId
双向绑定
语法：TextInput{text $$成员变量}
示例：TextInput{text $$this.userId}
数据与界面同步更新
数据改变，界面跟着变
界面输入变化，数据也跟着变
装饰器 @State
作用：修饰数据、函数等，使其具有特殊作用
当被@State修饰的变量数据改变时，UI会发生对应的重新渲染
语法：@State 变量 类型 = '初始值'
示例：@State userId string = 'admin'
登录功能实现
功能描述
用户点击登录按钮时，判断账号密码
账号为admin，密码为123时提示登录成功
否则提示账号或密码错误
代码实现
Button'登录').onClick => {
if this.userId === 'admin' && this.userPwd === '123' {
promptAction.showToast{message '登录成功'}
} else {
promptAction.showToast{message '账号或密码错误'}
}
}
练习题与答案解析
判断题
promptAction.showToast方法，传入duration属性，值为1000，代表提示框在1秒后消失
答案：错（duration最小值为1500）
成员变量与输入框双向绑定时，成员变量前面不用加this
答案：错（需前面加this访问）
数据如果不加@State，就不能进行计算
答案：错（不加@State也能计算，但不能触发界面更新）
附加练习：年度待办目标列表
功能描述
做一个年度待办目标的列表
打勾部分可以用Image也可以用Checkbox
涉及新知识
布局组件：Progress、Stack、List等
根据文档预习并应用
互动环节与交流群
互动环节
鸿蒙开发与你以前会的开发区别大吗？
欢迎留下你的观点
交流群
建了个鸿蒙交流群
帮助希望从业的人员方便交流技术以及获取鸿蒙认证
加入方式
添加猫林老师微信llybf365，拉你进群
总结与回顾
本文知识点总结
事件处理
on事件名，事件名首字母大写
提示框使用
导入PromptAction对象，使用showToast方法
声明组件内成员变量
语法：变量名 类型 = 初始值
双向绑定
$$this.变量名
装饰器 @State
被@State修饰的变量数据改变时，UI重新渲染
实战应用
登录界面布局与样式调整
使用Column、Row等组件实现布局
设置margin、padding等样式
登录功能实现
判断账号密码，提示登录结果
课后练习与附加练习
判断题巩固知识点
附加练习提升实战能力
层叠布局、自定义组件、ForEach
文章背景与导读
层叠布局、自定义组件、ForEach循环生成组件的学习
本文旨在教授层叠布局、自定义组件用法，强调自定义组件开发中的重要性
关注自定义组件的规范与装饰器
层叠布局（Stack）
层叠效果定义与应用
层叠效果：一个组件叠在另一个组件上的视觉效果
应用场景：阴影蒙版、加载中遮罩等
Stack组件使用语法
基本语法：Stack{ item1 item2 ... }
默认行为：越后写的组件层级越高，居中堆叠
对齐方式与层级控制
对齐方式：通过alignContent参数实现，共9种方式
示例：Stack{ alignContent Alignment.TopStart }{ ... }
层级控制：使用zIndex属性，值越大层级越高
示例：组件A.zIndex2 在最上层，组件B.zIndex0 在下层，未指定zIndex的组件层级最低
案例展示
示例代码：展示如何通过Stack和zIndex控制组件层级
Stack{ alignContent Alignment.BottomStart } {
Column { Text'Stack子元素1').fontSize20 }.width100.height100.backgroundColor0xffd306.zIndex2
Column { Text'Stack子元素2').fontSize20 }.width150.height150.backgroundColorColor.Pink.zIndex1
Column { Text'Stack子元素3').fontSize20 }.width200.height200.backgroundColorColor.Grey
}.width350.height350.backgroundColor0xe0e0e0
效果图：子元素1在最上层，子元素2在中间，子元素3在最里层
自定义组件
自定义组件的必要性
复用性：封装常用布局组合，便于多次使用
维护性：集中管理，便于修改和维护
创建自定义组件步骤
文件夹管理：建议与pages目录同级，创建components或view文件夹
示例：华为鸿蒙官网Codelabs示例代码以view为文件夹名
文件创建：在view文件夹中右键>新建>ArkTS File>输入组件名
组件命名：多单词大驼峰形式，与文件名一致
组件结构与装饰器
组件结构：@Component struct 组件名 { build { ... } }
示例：@Component struct ToDoItem { build { ... } }
装饰器说明
@Component：使struct具备组件功能
@Entry：指定页面入口组件，可被预览器预览
预览自定义组件
使用@Preview装饰器
示例：@Preview @Component struct ToDoItem { build { ... } }
构建TodoItem自定义组件界面
界面分析：根容器为Row，包含Checkbox与Text
代码实现
Row {
Checkbox.margin{ left20, right20 }
Text'中彩票500万'
}.width'100%').height40.backgroundColorColor.White.borderRadius20
自定义组件的使用
导出组件：在struct前加export
示例：export struct ToDoItem { ... }
导入组件：import { 组件名 } from '路径'
示例：import { ToDoItem } from '../view/ToDoItem'
使用组件：直接调用组件名
示例：ToDoItem
DevEco自动生成：添加export后，在需要的地方直接写组件名，按提示回车
ForEach循环生成组件
ForEach作用与语法
作用：根据数组数据生成同类型组件
语法：ForEach数组, item 类型, indexnumber => { ... }
示例代码与结果
示例代码
@State arr string = 'a','b','c','d'
ForEachthis.arr, item string, index number => {
Row { Textitem的值是：${item},index是：${index} }
}
结果：根据数组长度生成对应数量的Row组件
键值生成函数（可选）
作用：为数组项生成唯一且持久的键值，类似vue的vbindkey
详细讲解：未来技术文中详细讲解
类型声明与注意事项
ArkTS强类型语言
数据类型声明：每种数据必须声明类型，如item string, index number
课后练习与互动
判断题：自定义组件可以直接预览（错误，需加@Preview装饰器）
问答题：说出下列代码的层级
示例代码
Stack { 组件A.zIndex2 组件B.zIndex0 组件C }
答案：组件A在最上层，组件B在中间，组件C在最里层
年度待办计划初始数据
@State totalTasks Array<TodoModal> =
{text"月入5万",finishedfalse},
{text"中彩票500万",finishedfalse},
{text"找个富婆",finishedfalse},
{text"买套别墅",finishedfalse},
{text"改掉爱做梦的习惯",finishedfalse},
class TodoModal { textstring='' finishedboolean=false }
互动环节：点赞与交流群
AI辅助编程：CodeGenie
背景
鸿蒙开发需求与AI插件现状
多款AI插件可用于DevEco，如Copilot、通义灵码等
Copilot按月收费，对新入行者不友好
缺乏特别适合鸿蒙开发的AI插件
华为推出CodeGenie的原因
华为作为良心企业，响应开发者需求
CodeGenie更懂鸿蒙，更贴合鸿蒙应用开发
免费使用，降低开发门槛
CodeGenie介绍
CodeGenie的三大功能
知识问答
提供开发过程中的问题解答
示例：询问鸿蒙开发中的特定问题，获取详细解答
代码补全和代码生成
自动根据当前页面代码上文，推断续写生成代码
示例：在编写属性时，自动猜测后续代码进行补全
提高开发效率，减少错误
万能卡片
卡片功能在元服务中常用
示例：快速生成元服务的卡片代码
功能优势与局限性
优势：免费、更懂鸿蒙、贴合鸿蒙应用开发
局限性：目前还不算“很智能”，但随时间推移会不断完善
申请步骤
访问华为开发者网站
打开developer.huawei.com/consumer/cn…或点击跳转链接
找到AI辅助编程并报名
往下翻网站页面，找到AI辅助编程板块
点击活动报名按钮
登录与填写资料
未登录用户需先登录
登录方式：华为账号登录
登录成功后填写个人资料
资料包括：姓名、联系方式、开发经验等
勾选同意并立即报名
仔细阅读活动条款
勾选同意条款后点击立即报名
等待审核结果
审核通过后将收到邮件通知
邮件内容：审核结果及下载链接
也可在官网上查询审核结果
查询方式：点击我的活动，查看审核状态
下载安装
通过邮件或下载中心获取下载地址
邮件中附带的下载链接
下载中心地址：developer.huawei.com/consumer/cn…
下载CodeGenie压缩包
下载得到一个zip的压缩包
注意事项：不要解压！
在DevEco中安装插件
打开DevEco，点击菜单，打开首选项
点击插件，来到插件页面
点击右上齿轮图标，选择从磁盘安装插件
在弹出的文件选择框里，选择下载好的zip文件
重启DevEco生效
安装完成后重启DevEco
重启目的：使插件生效
使用方法
登录CodeGenie功能
DevEco右侧边栏会多出CodeGenie功能
点开后登录（需申请报名通过）
登录目的：审核使用权限
功能切换与使用
知识问答
直接在输入区域输入问题
示例：询问鸿蒙开发中的API使用方法
代码生成
在代码编辑区域使用快捷键Alt + \（Mac系统是option + \）
生成代码（灰色，暂未生效）
按任意键取消，按tab键使用
提高生成代码准确性的方法
写一句注释，CodeGenie将生成得更加准确
示例：在需要生成代码的地方写注释，然后使用快捷键
卡片生成
利用CodeGenie完成元服务卡片
提出需求，继续回答附加问题
直到说开始，生成卡片
示例：提出生成一个天气卡片的请求，回答相关问题后生成卡片
得到卡片后的操作
查看代码
查看生成的卡片代码，了解实现细节
直接添加到当前项目
将生成的卡片代码直接添加到项目中，快速集成
案例与分析
知识问答案例
开发者问题：如何在鸿蒙应用中实现网络请求？
CodeGenie解答：提供详细的网络请求实现步骤和代码示例
开发者反馈：解答准确，帮助解决了问题
代码生成案例
开发者需求：生成一个按钮点击事件的代码
CodeGenie生成：根据上下文生成按钮点击事件的代码
开发者调整：根据生成的代码进行调整和优化
调整结果：代码更加符合实际需求，提高了开发效率
卡片生成案例
开发者需求：生成一个显示当前天气的元服务卡片
CodeGenie交互：提出需求后，继续询问天气数据的来源和显示方式
生成卡片：根据交互结果生成天气卡片代码
卡片效果：卡片显示清晰，数据更新及时，用户反馈良好
总结与展望
CodeGenie的优势与不足
优势：免费、更懂鸿蒙、提高开发效率
不足：目前还不够智能，但随时间推移会不断完善
CodeGenie在鸿蒙开发中的应用前景
随着鸿蒙生态的发展，CodeGenie将发挥更大作用
帮助开发者更快、更好地开发鸿蒙应用
对开发者的建议与期待
建议开发者积极尝试和使用CodeGenie
期待华为继续完善和优化CodeGenie功能
Tabs选项卡组件详解
Tabs组件背景与作用
移动端应用栏目分类常用组件
在移动端应用中，Tabs选项卡常用于实现页面内的视图切换，提升用户体验
HarmonyOS应用开发实现方式
在HarmonyOS应用开发中，可通过Tabs组件实现类似菜单分栏功能
Tabs组件基本使用
TabContent子组件放置规则
Tabs组件内部只能放置TabContent子组件，其他组件放置会报错
TabContent与视图切换关系
TabContent数量决定视图切换数量
有多少个TabContent，就意味着有多少个切换视图
tabBar属性设置导航栏标题
TabContent配合tabBar属性可设置导航栏标题，tabBar传入字符串即为标题
示例代码与效果展示
代码示例：展示三个TabContent切换视图
@Entry@Componentstruct Index { build { Tabs { TabContent { Text'1' }.tabBar'首页' TabContent { Text'2' }.tabBar'联系人' TabContent { Text'3' }.tabBar'我的' } } }
效果：实现左滑切换视图，并显示导航栏
导航栏位置调整
barPosition参数修改导航栏位置
顶部显示设置
默认情况下，导航栏在页面上方
底部显示设置
通过barPosition参数设置为End，可将导航栏设置到页面底部
示例代码：Tabs{ barPosition BarPosition.End } {...}
vertical属性设置侧边导航栏
侧边显示原理
vertical属性设置为true，导航栏侧边摆放
左右位置控制
barPosition参数控制左右位置
Start为左，End为右
示例代码与效果展示
代码示例：设置导航栏侧边显示，并设置宽度和背景色
Tabs{ barPosition BarPosition.Start } {...}.verticaltrue.barWidth80.barBackgroundColor'f00'
效果：导航栏侧边显示，并可见设置的宽度和背景色
Tabs嵌套使用
嵌套导航栏应用场景
顶部底部都有导航栏需求
例如：整个App分为“首页”、“发现”、“推荐”、“我的”四个部分，首页又分为多个板块
嵌套代码示例与效果展示
代码示例：在首页视图里再套一个Tabs
Tabs{ barPosition BarPosition.End } { TabContent { Tabs { TabContent { Text'关注的内容' }.tabBar'关注' // ...其他嵌套TabContent } }.tabBar'首页' // ...其他TabContent }
效果：实现顶部底部导航栏，首页内再嵌套导航栏
导航栏滚动限制
scrollable属性禁止滚动
嵌套场景下避免滚动冲突
使用Tabs嵌套时，为避免底部大导航栏与嵌套导航栏滚动冲突，可让底部大导航栏禁止滚动
示例代码：Tabs{ barPosition BarPosition.End } {...}.scrollablefalse
自定义导航栏
自定义导航栏需求
附带图标需求
很多应用底部导航栏除标题文字外，还会附带图标
@Builder装饰器自定义导航栏布局
声明垂直布局UI
上为图标，下为文字（标题）
示例代码：声明tabBuilder函数
tabBuildertitle string, icon ResourceStr { Column{ space2} { Imageicon.width30 Texttitle } .width'100%').height50.justifyContentFlexAlign.Center }
调用绑定自定义导航栏
将Builder与tabBar关联
示例代码：在Tabs中使用自定义导航栏
Tabs{ barPosition BarPosition.End } { TabContent {...}.tabBuilder'首页', $r'app.media.ic_public_home' // ...其他TabContent }
高亮效果实现
状态变量记录当前选中索引
@State currentIndexnumber=0
修改Builder实现高亮
根据currentIndex判断显示不同图标和颜色
示例代码：修改tabBuilder函数
@Builder tabBuildertitle string, icon ResourceStr, selectIcon ResourceStr, index number { Column{ space2} { Imagethis.currentIndex === index ? selectIcon icon.width30.fillColorthis.currentIndex === index ?'0094ff':'000' Texttitle.fontColorthis.currentIndex === index ?'0094ff':'000' } .width'100%').height50.justifyContentFlexAlign.Center }
切换指定页签
onChange事件监听索引变化
将当前切换索引值赋值给currentIndex
示例代码：Tabs.onChangeindex => {this.currentIndex = index }
$$双向绑定实现切换
将currentIndex与Tabs的index参数双向绑定
示例代码：Tabs{ barPosition BarPosition.End, index $$this.currentIndex } {...}
代码改变页签示例
this.currentIndex = 2即会切换到页签索引为2的导航
课后练习
判断题
当设置vertical为true时，导航栏在右侧显示（错误）
当Tabs的barPosition为End，vertical为false时，导航栏在右侧显示（错误）
简单题
直接设置Tabs的vertical为true，导航栏在哪显示？
导航栏在左侧显示（因为barPosition默认值为Start）
第七篇 - http网络请求
鸿蒙开发工具与基础
DevEco基本使用
开发工具介绍：DevEco是鸿蒙应用开发的主要工具
功能概述：提供代码编辑、调试、模拟器运行等功能
ArkUI基础组件
组件介绍：ArkUI是鸿蒙的用户界面框架
基础组件：包括按钮、文本框、列表等UI元素
HarmonyOS网络请求概述
NetworkKit介绍
系统内置网络服务工具包：NetworkKit是鸿蒙内置的网络服务工具包
功能涵盖：包含HTTP、WebSocket、Socket等网络请求方式
网络请求方式
HTTP请求
数据请求发起：通过HTTP协议发起数据请求
使用场景：适用于大多数应用层网络通信
WebSocket
双向连接：建立服务器与客户端的双向连接
使用场景：需要实时通信的应用，如聊天软件
Socket
数据传输：通过Socket进行底层数据传输
使用场景：需要自定义协议或高性能传输的场景
网络连接管理
多网络连接优先级管理
网络类型：WiFi、蜂窝、Ethernet等
优先级管理：根据网络状况自动切换最佳连接
网络质量评估
评估指标：带宽、延迟、丢包率等
使用场景：优化网络请求策略
订阅网络连接状态变化
状态变化监听：订阅默认或指定网络连接的状态变化
使用场景：及时调整网络请求行为
查询网络连接信息
信息查询：获取当前网络连接的详细信息
使用场景：调试或优化网络连接
DNS解析
域名解析：将域名解析为IP地址
使用场景：发起网络请求前的准备工作
MDNS（多播DNS）
本地服务管理
服务添加与移除：在局域网内添加或移除本地服务
服务发现与解析：发现并解析局域网内的本地服务
使用场景：局域网内的设备发现与服务调用
HTTP请求详解
权限申请
权限配置文件：module.json5
配置项：requestPermissions
权限名格式：如ohos.permission.INTERNET
申请原因与使用场景：可选配置，用于上架审核和权限细分
使用步骤
导入http命名空间
代码示例：import { http } from '@kit.NetworkKit'
创建HttpRequest对象
代码示例：let httpRequest = http.createHttp
发起网络请求
参数说明：url地址、可选参数（如请求方式、头部信息、携带参数）
代码示例：httpRequest.requesturl, {method http.RequestMethod.POST,...}, callback
解析返回结果
结果处理：根据业务需要解析HTTP响应内容
代码示例：console.info'Result' + JSON.stringifydata.result
销毁请求对象
销毁方法：调用destroy方法主动销毁
代码示例：httpRequest.destroy
GET请求示例
接口介绍：获取多条随机笑话的接口
请求参数：num（数字，表示获取笑话的数量）
响应体：返回一个字符串数组
代码示例：发起GET请求并处理响应
代码片段：
Button'发get请求').onClick => {const httpRequest = http.createHttphttpRequest.request'http//ajax.zll.cool/joke/list', {extraData 'num=3'}, err, data => {...}}
POST请求示例
接口介绍：注册用户的接口
请求参数：username（用户名）
请求参数类型：application/json
代码示例：发起POST请求并处理响应
代码片段：
const httpRequest = http.createHttp
httpRequest.request'http//ajax.zll.cool/user/reg', {method http.RequestMethod.POST,header {'ContentType' 'application/json'},extraData {username 'jack'}}, err, data => {...}
Promise用法
链式调用
then与catch：处理请求成功与失败的情况
代码示例：使用Promise发起GET请求
代码片段：
httpRequest.requesturl, {extraData 'num=3'}.thendata => {...}).catcherr => {...}
async与await写法
异步处理：使用async与await简化异步代码
代码示例：使用async与await发起GET请求
代码片段：
Button'发get请求').onClickasync => {try {const data = await httpRequest.requesturl, {extraData 'num=3'}console.infoJSON.stringifydata.result} catch err {...}}
使用第三方库 Axios
Axios介绍
异步请求库：一款流行的异步请求库
特点：基于Promise封装，支持GET、POST等请求方式
安装步骤
项目下载：在DevEco底部终端敲入命令ohpm install @ohos/axios
使用方法
GET请求
参数传递：使用params对象传递GET请求参数
代码示例：使用Axios发起GET请求
代码片段：
axios.get'http//ajax.zll.cool/joke/list', {params {num 3}}.thenres => {...}).catcherr => {...}
POST请求
参数传递：直接传递POST请求参数
代码示例：使用Axios发起POST请求
代码片段：
axios.post'http//ajax.zll.cool/user/reg', {username 'jack'}.thenres => {...}).catcherr => {...}
响应与错误处理
响应结果类型：AxiosResponse
错误类型：AxiosError
代码示例：处理Axios请求的响应与错误
代码片段：
axios.geturl, {params {...}}.thenres AxiosResponse => {...}).catcherr AxiosError => {...}
数据监听器、滚动、侧滑功能
统计总量
TodoHeader显示总目标数与已完成数
依赖存放目标列表的数组
实现步骤
在TodoHeader声明成员变量接收数组
使用@Prop修饰，仅展示不修改数组
声明变量记录已完成数量
渲染到进度条与Text中
在Index组件中传递数组
父数组改变自动同步到子组件
统计已完成数
使用数据监听器统计已完成数
监听数组变化，实时统计已完成数
语法与实现
使用@Watch装饰器监听数组变化
@Prop@Watch'getFinished' todoList TodoModel =
声明监听器绑定的方法
getFinished { console.log'数组改变了' }
在方法中统计已完成数并赋值
使用for循环遍历数组统计
添加新目标
实现TodoInput添加新目标功能
将数组传递给TodoInput
使用@Link装饰实现子父同步
添加输入完成事件
非空判断后加入数组并清空输入框
使用onSubmit事件处理输入完成
目标列表滚动
问题描述
数据过多时页面无法滚动
原因分析
Column组件不具备滚动功能
解决方案
使用Scroll组件包裹Column
设置Scroll高度实现滚动
使用List组件替代Scroll
更适合展示列表数据并提供滚动功能
List组件特点与使用
展示相同宽度列表项
自动提供滚动功能
使用语法与组件关系
List { ListItem { 内容 } }
仅能放ListItem或ListGroup
知识点 List组件使用
改写TodoMain使用List组件
将Column改为List
使用ListItem包裹TodoItem
设置List高度与布局权重
.width'100%' .layoutWeight1
知识点 @Builder装饰器
介绍@Builder装饰器作用
封装可复用UI元素
语法与使用示例
@Builder myUI { Row { ... } }
使用时直接调用函数
与组件的区别
@Builder更轻量，封装本页面UI元素
组件可能有自己状态数据且能复用在多个页面
年度目标案例 实现侧滑删除
给ListItem添加侧滑功能
使用swipeAction属性
设置左侧或右侧侧滑
定义侧滑出来的小界面
使用@Builder封装删除图标
改变图片颜色使用fillColor属性
给ListItem添加SwipeAction属性
传入自定义构造函数
添加点击事件删除对应数据
传入下标参数实现精准删除
使用splice方法删除数组对应项
案例总结与后续计划
案例完整实现
掌握数据监听器、滚动、侧滑功能开发
后续文章计划
分享实战技巧、技术点
如何发送请求、沉浸式布局等
交流群信息
建立鸿蒙交流群目的
方便技术交流与获取鸿蒙认证
加入方式
添加猫林老师微信拉你进群
组件化开发案例详解（父子组件传值）
案例背景与目标
综合性练手案例
涉及布局、状态切换、列表渲染、数据新增、侧滑删除等功能
目标
掌握组件化开发、组件传值等相关知识
彻底弄懂鸿蒙父子组件数据的同步机制
组件化开发基础
组件定义
组成页面的一部分
组件化开发优势
代码分门别类，页面与逻辑内聚，方便阅读与维护、方便复用
组件划分
头部区（统计）
输入区
列表展现区
项目准备与布局实现
项目准备
新建项目，创建组件文件夹与文件（TodoHeader、TodoInput、TodoMain）
导入组件到Index.ets
TodoHeader布局
使用Row、Text、Stack、Progress组件
Progress组件使用
内置组件，支持水平、环形、胶囊等多种样式
示例：Progress{ value4, total10 }
type参数：修改Progress样式（Linear、Ring、ScaleRing等）
修改颜色：backgroundColor与color属性
Stack组件使用
实现层叠布局，使Text叠在Progress上面
TodoInput布局
使用Row、TextInput组件
双向绑定：声明变量并与TextInput的text属性绑定
TodoMain布局
使用Column、ForEach组件
循环生成TodoItem组件
初始数据与说明
TodoModel类定义
text属性：目标文字
finished属性：是否完成
初始数据数组
示例：Array<TodoModel> = {text"月入5万",finishedfalse},...
数据存放位置
数组应放在共同父组件（如Index.ets）中
组件传参 父传子
父传子语法
子组件声明成员变量
父组件使用组件时传入参数
示例：TodoItem与TodoMain
TodoItem声明name变量
TodoMain传递name变量给TodoItem
@Prop装饰器
修饰子组件由父传递过来的数据
实现父数据改变子同步
@State与@Prop总结
@State：装饰组件自己使用的数据，数据改变界面刷新
@Prop：装饰父传递过来的数据，父数据改变子同步
组件传参 父传子双向同步
@Link装饰器
实现父子双向同步
子组件声明@Link变量，不可初始化
@Prop与@Link比较
相同点：接收父数据，父改变同步子
不同点：
初始化值：@Prop需要初始化，@Link不能初始化
同步给父：@Prop不能同步，@Link能同步
示例：TodoItem与TodoMain双向同步
TodoItem使用@Link修饰name变量
TodoMain修改name变量，TodoItem同步改变
年度目标案例 数据展示
数据传递步骤
TodoMain声明@Link todoList变量接收Index传递的数组
Index传递数组给TodoMain
TodoMain使用ForEach渲染TodoItem，并传递数组每一项
TodoItem渲染
声明@Prop item变量接收数组每一项
绑定item的finished属性给Checkbox的select属性
绑定item的text属性给Text显示
年度目标案例 目标完成打勾
需求
根据finished属性绑定Checkbox的select属性
实现双向绑定
根据finished值设置文字样式（删除线、透明度）
示例代码
Checkbox .select$$this.item.finished
Text .opacitythis.item.finished ? 0.4 1 .decoration{ type this.item.finished ? TextDecorationType.LineThrough TextDecorationType.None }
鸿蒙开发缺陷与解决方案
缺陷
@Link不能接收第二层成员变量（如数组里的对象）
导致子里改动无法同步给父
解决方案
使用父提供的方法修改数据
示例：
TodoMain声明changeStatus方法
参数：item、index
实现：通过索引改数组中这一项的状态
TodoItem声明onChange方法接收父的方法
Checkbox的onChange事件调用传入的onChange方法
案例总结与展望
案例收获
掌握组件化开发、组件传值
理解鸿蒙父子组件数据同步机制
鸿蒙开发展望
鸿蒙开发未来会越来越方便、易用
@ObservedV2等API的改进
鼓励抓住鸿蒙开发风口，成为元老级程序员