YunWQ的博客

HMRouter路由框架演进与使用 摘要：HMRouter是OpenHarmony三方库中基于Navigation封装的路由框架，解决了Navigation使用不便的问题并增强功能。从HarmonyOS 5.0开始，官方推荐使用HMRouter替代router和Navigation。HMRouter通过Navigation组件结构实现页面导航，包含导航页和子页管理。安装配置简单，支持自定义注解和构建插件。使用时需初始化路由框架，定义入口页面，通过HMRouterMgr实现页面跳转、返回和参数传递（URL参数

这篇文档介绍了如何使用ArkTS开发一个简易计算器应用，主要包含以下内容： 功能需求：实现基本加减乘除运算，采用双行显示区域（上为表达式，下为结果），支持按键动画效果和运算结果过渡动画。 界面实现： 采用Column垂直布局 显示区域分为两个Text组件 键盘区使用Grid网格布局，特殊处理"="键的布局 通过AttributeModifier实现按键动态样式 按键处理逻辑： 数字键处理：包含去零、小数点规则等特殊处理 运算符键处理：区分不同运算符类型 提供AC、±、%、=等特殊功能键处

Navigation组件是ArkUI中的路由容器，通常作为首页根容器使用，由导航页(NavBar)和子页(NavDestination)组成。导航页包含标题栏、菜单栏、内容区和工具栏，可通过hideNavBar隐藏；子页由标题栏、菜单栏和内容区构成。两者可通过路由自由切换，且导航页不在页面栈中。 典型应用场景是Tabs+Navigation组合实现多级页面导航：Tabs控制底部导航栏，Navigation作为二级页面容器，NavDestination展示三级详情页。案例展示了快速入门页的结构实现，包含列表点

本文介绍了HarmonyOS应用开发中的页面路由基本概念和实现方法。主要内容包括：1）如何创建新页面并配置路由URL；2）页面跳转的两种方式（router.pushUrl()和router.replaceUrl()）及其区别；3）页面栈的工作原理，最大容量为32，遵循"先进后出"原则；4）通过示例演示了从LoginPage跳转到HomePage、从HomePage跳转到DetailPage以及返回HomePage的完整流程。文章还强调了页面栈管理的重要性，replaceUrl()会替换栈

Canvas组件开发指南摘要：Canvas组件支持自定义图形绘制，通过CanvasRenderingContext2D对象实现基础形状、文本和图片的绘制。开发时需在onReady回调中获取画布尺寸后开始绘制，提供fillRect()、arc()、ellipse()等方法绘制矩形/圆形/椭圆，并支持通过fillStyle、strokeStyle等属性设置样式。示例代码展示了如何创建带边框和填充色的基本图形，包括设置颜色、线宽等样式参数。

元服务是HarmonyOS提供的轻量级应用形态，具有免安装、即用即走、账号跟随等特点。与传统应用相比，元服务包体积更小、开发成本更低，能自动更新并通过系统入口分发。开发者需先在AppGallery Connect创建元服务应用，再通过DevEco Studio创建工程，开发包含页面、卡片和图标三部分内容。元服务图标采用特殊设计语言，体现HarmonyOS特性。开发流程包括创建项目、编码、打包、测试和上架等环节，支持真机调试和开放式测试。

Form Kit提供卡片开发服务，通过将应用功能和信息以卡片形式展示在桌面，实现服务直达和减少跳转。卡片由提供方（包含业务逻辑和UI模块）和使用方（如桌面应用）组成，支持交互功能。创建卡片时可在工程中右键新建ArkTS卡片，选择模板后生成相关文件（生命周期管理、页面和配置文件）。卡片分为静态和动态类型，支持通过配置修改。

本文介绍了ArkUI中的@Builder装饰器，用于创建自定义构建函数实现UI复用。自定义构建函数分为私有（组件内使用）和全局（跨组件使用）两种形式。文章详细讲解了参数传递规则：按值传递不会触发UI更新，而按引用传递（仅限单参数对象字面量）可响应状态变化。同时指出了@Builder的限制条件：禁止修改参数值、多参数传递不触发更新，以及@Builder与@Component组件的区别（前者专注UI复用，后者具备完整组件特性）。通过多个代码示例直观展示了不同场景下的使用效果。

本文介绍了ArkUI中的自定义组件开发，包括其特点、基本结构、成员函数/变量定义及参数传递方式。自定义组件具有可组合、可重用和数据驱动UI更新的特性，通过@Component装饰器定义。文章详细说明了如何在组件中定义成员变量和函数，以及如何接收外部参数。最后简要提及了组件和页面的生命周期函数，包括aboutToAppear、onPageShow等关键回调，为开发者提供了构建可复用UI组件的基础知识。

很多时候导航页签是图片、文本组成，并且需要根据选中的页签改变图片和文本的颜色，此时就需要使用自定义导航。如下图，模仿微信底部导航效果1. 自定义导航页签按照需求设计导航页签的布局结构，每一个页签包含选中图片未选中图片文本索引四个参数，如果Tabs当前索引等于页签索引，则显示选中图片，并且改变文本颜色。/*title: 页签标题targetIndex: 页签的索引selectedImg: 选中时图标normalImg: 未选中时*///当前选中页签索引@BuilderColumn() {

摘要：ArkUI的WaterFlow组件支持瀑布流布局，适用于图片展示场景。它提供纵向和横向两种布局方式，通过columnsTemplate/rowsTemplate设置行列数，自动将子项填充到高度/宽度最小的列/行。本文演示了如何实现无限滚动瀑布流：1)创建IDataSource数据源类管理数据；2)使用LazyForEach循环渲染，配合onReachEnd事件实现懒加载；3)通过随机尺寸算法使每个FlowItem呈现交错效果，使用itemWidthArray和itemHeightArray保存随机生成

这篇文章介绍了Refresh下拉刷新组件的使用方法。主要内容包括：1）基本使用方式，通过嵌套List实现下拉刷新功能；2）可配置属性如刷新距离、跟手系数等；3）状态变化和刷新事件监听；4）自定义刷新动效的实现方法。文章提供了完整的示例代码，演示了如何创建默认刷新效果和自定义UI样式，并详细说明了组件的各项参数和回调函数的使用场景。该组件适用于需要下拉刷新功能的列表页面开发。

ArkUI提供了Grid和GridItem组件实现网格布局，支持行列占比设置、主轴方向控制、单元格合并等功能。Grid通过rowsTemplate和columnsTemplate定义行列数量与占比，若不设置则可通过layoutDirection指定主轴方向。GridItem可设置跨行跨列，通过onGetRectByIndex回调实现类似计算器按键的不规则布局。Grid组件支持条件渲染、循环渲染和懒加载，需注意未设置宽高时会自适应父容器，行列设置会影响元素显示和滚动行为。网格布局适用于九宫格、日历等需要均匀分

Swiper组件是用于实现图片轮播效果的常用组件，支持自动播放、循环展示等功能。文章介绍了Swiper的基本使用方式，包括图片轮播的实现代码示例。同时详细讲解了导航点样式的配置方法，包括默认圆点导航点和自定义数字导航点的设置，以及如何通过indicator属性调整导航点的位置和样式。从API15开始，Swiper支持独立导航点功能，可以与Swiper分离布局，通过IndicatorComponentController实现联动控制。文章提供了圆点和数字两种独立导航点的实现代码，展示了如何通过控制器实现更灵活

本文介绍了ArkUI中的List组件，它是用于显示结构化可滚动内容的常用容器。主要内容包括：1) List必须与ListItem配合使用，支持.divider()设置分割线；2) 列表样式可通过space、scrollBar、listDirection等属性调整；3) 推荐使用ForEach循环渲染相同结构的列表项，提高性能；4) 复杂列表建议结合@Builder装饰器实现组件复用；5) 以商品列表和待办事项为例，演示了数据绑定和动态编辑（增删改）的实现方法。List组件能有效处理大数据量的滚动展示，是开发

摘要 本文介绍了评分进度条(Rating)组件的实现方法。通过代码示例展示了如何创建可交互的评分条，包括设置初始分值(3.5)、评分总数(5星)和步长(0.5)。同时讲解了如何自定义评分条样式，包括未选中、选中一半和完全选中的三种状态图片的替换方法。该组件适用于电商平台等需要用户评分的场景，支持灵活配置和视觉定制。

摘要： Scroll是ArkUI中的可滚动容器组件，当子组件尺寸超过父组件时支持滚动。关键特性包括： 必须满足子组件尺寸>父组件尺寸才能滚动，且仅支持单一子组件 支持通过.scrollBar()控制滚动条显示/隐藏 可通过.scrollable()设置垂直/水平滚动方向 提供.scrollBarWidth()和.scrollBarColor()自定义滚动条样式 使用Scroller控制器实现精准滚动控制（如scrollTo定位、scrollBy增量滚动等） 通过onDidScroll监听实时滚动位置和

本文介绍了HarmonyOS中的进度条(Progress)组件，包含5种常用样式及其实现方式：1)线性进度条(水平/垂直方向)；2)环形进度条；3)环形刻度进度条；4)胶囊进度条；5)渐变进度条。每种样式都提供了示例代码，并展示了如何通过参数控制方向、颜色、宽度等属性。此外，还演示了进度条动态效果实现，包括加载动画和扫描特效，以及通过按钮控制进度值的交互案例。最后介绍了进度状态(status)和扫描效果(enableScanEffect)等特殊属性的使用方法。

本文介绍了ArkUI中的Toggle组件，该组件提供三种状态切换样式：按钮、复选框和开关样式。通过ToggleOptions创建，可设置初始状态(isOn)和类型(type)。支持自定义样式属性如selectedColor设置选中背景色，switchPointColor调整滑块颜色，以及switchStyle配置更多细节。组件还支持onChange事件监听状态变化并触发相应操作。文中提供了代码示例和效果图展示不同样式配置，包括按钮文字、开关滑块颜色等自定义效果，最后演示了如何监听开关状态变化并弹出提示信息。

本文介绍了鸿蒙开发中单选按钮(Radio)组件的使用方法。主要内容包括：1) 通过RadioOptions创建单选按钮，设置value和group属性；2) 使用checked属性控制选中状态；3) 通过onChange事件监听选中状态变化；4) 使用radioStyle自定义按钮样式；5) 通过indicatorType和indicatorBuilder自定义选中指示器；6) 提供了完整的示例代码展示单选按钮的实际应用场景。文章最后还介绍了如何获取鸿蒙开发者认证资料，适合鸿蒙开发者学习参考。

Button是按钮组件，通常用于响应用户的点击操作，其类型包括胶囊按钮、圆形按钮、普通按钮、圆角矩形按钮。Button作为容器使用时可以通过添加子组件实现包含文字、图片等元素的按钮。

本文介绍了HarmonyOS中的输入框组件TextInput和TextArea的使用方法。TextInput是单行输入框，支持Normal、Password、Email等多种输入模式；TextArea是多行输入框，可自动换行显示。文章详细展示了如何设置输入框样式（边框、背景色、文字颜色等）、监听焦点变化以及实现键盘避让功能。通过代码示例和效果图，帮助开发者快速掌握这两种基础组件的使用方法，适用于构建评论、聊天、登录等多种输入场景。

本文介绍了HarmonyOS中Image组件的多种图片加载方式：1）Resources资源（存放在media或rawfile目录下）；2）本地图片（直接存放在ets目录）；3）网络图片（需申请权限）；4）像素图（PixelMap格式）；5）矢量图（SVG格式，支持修改颜色）；6）多媒体库图片（通过uri加载）。每种方式都提供了具体代码示例和效果展示，包括资源路径设置、权限申请、数据转换等关键实现细节，帮助开发者灵活运用不同来源的图片资源。

本文介绍了HarmonyOS中的Text组件使用方法。Text组件支持文本展示，可通过字符串或资源引用创建，并可添加Span子组件实现富文本效果。文章详细展示了文本对齐方式（水平/垂直）、文本溢出处理、样式设置等核心功能，并通过热搜榜示例演示了实际应用场景。Text组件支持多种样式配置，如字体大小、颜色、装饰线等，并能结合Span和ImageSpan实现复杂文本布局，满足多样化UI需求。

层叠布局（Stack）是一种垂直叠加的布局方式，后添加的组件会覆盖在先前的组件上。通过alignContent参数可设置九种对齐方式，控制子组件相对位置。子组件默认按添加顺序堆叠，但可通过zIndex属性调整显示层级，数值越大显示越靠前。当后续子元素尺寸大于前面元素时，前面元素会被完全遮挡。代码示例展示了如何通过调整zIndex使被遮挡元素重新显示。

Flex弹性布局详解：支持Row/Column方向布局，可通过direction参数设置布局方向（Row/RowReverse/Column/ColumnReverse）。默认不折行，设置wrap:FlexWrap.Wrap可启用折行效果，并支持配置主轴/交叉轴间距。提供主轴(justifyContent)和交叉轴(alignContent)对齐方式设置，类似Row/Column布局。当子元素总宽度超过容器时，默认会挤压子元素，启用折行后可实现自动换行布局。适用于需要灵活控制子元素排列的场景。

相对布局(RelativeContainer)允许子组件基于父组件或兄弟组件进行相对定位。子组件通过alignRules设置对齐规则，指定参考边线(6条边界线)、锚点(父容器__container__或兄弟组件id)和对齐方式。示例展示了在父容器四个角和中心放置组件，以及相对于兄弟组件定位的方法。当相对定位不精确时，可用offset设置偏移量进行微调。相对布局通过灵活的对齐规则实现精确的组件定位。

本文介绍了线性布局的两种主要形式：水平布局(Row)和垂直布局(Column)。Row组件默认从左到右排列子元素，可通过direction属性设置方向；Column组件默认从上到下排列，支持reverse反转。两种布局都支持通过space参数设置子元素间距，并提供主轴(justifyContent)和交叉轴(alignItems)的对齐方式控制，分别支持6种和3种对齐选项。Row的主轴对齐控制水平方向，Column的主轴对齐控制垂直方向，交叉轴则相反。文章通过代码示例和效果图展示了不同参数设置下的布局效果。

本文介绍了ArkUI框架中的视觉效果设置方法，主要包括透明度、颜色渐变和图像效果三类。透明度可通过opacity()方法设置，支持0-1范围值，子组件会继承并叠加父组件的透明度。颜色渐变分为线性渐变(linearGradient)、径向渐变(radialGradient)和角度渐变(sweepGradient)，可自定义角度、方向、颜色和位置参数实现多种渐变效果。图像效果包含阴影(shadow)和模糊处理，背景模糊(backgroundBlurStyle)和前景模糊(foregroundBlurStyle)

本文介绍了两种UI视觉效果实现方法：透明度设置和颜色渐变。透明度可通过opacity()方法设置（0-1范围），子组件会继承父组件透明度并叠加计算。颜色渐变包含三种方式：线性渐变（linearGradient）支持角度/方向设置，径向渐变（radialGradient）支持中心点和半径配置，角度渐变（sweepGradient）可定义起止角度。每种渐变方式都需通过colors参数指定[颜色,位置]数组，并提供了具体代码示例和效果图示说明。

用于对组件进行裁剪、遮罩处理。

文本通用属性目前只针对包含文本元素的组件，设置文本样式。

null是一个特殊的字面量值，用于表示一个变量没有指向任何对象。当变量值为null时，使用这个变量是没有意义，甚至会引发程序异常，所以默认情况下ArkTS中的所有类型的值都是不可为null值；要想变量的值为null，必须明确指定null类型。在开发中经常存在这么一种情况：一个变量的值可能为null、也可能是一个具体对象，但是在执行之前不能明确该变量的值是null还是一个对象。此时使用该对象调用其方法时，就必须使用非空判断。

设置当前组件在父组件中的位置，参照点为父容器顶点位置。在布局容器中，设置该属性不影响父容器布局，仅在绘制时进行位置调整。如图所示，虚线处为Row()组件原本的位置，当设置后会脱离原来父组件的约束，采用决定定位参照父容器左顶点重新定位。10vp10vp。

盒子模型的结构如下图所示。

背景设置包括背景颜色、背景图片、背景图片位置、背景图片大小相关设置。warning]当背景颜色、背景图片同时设置时，背景颜色位于底层。

Transferable对象，也称为NativeBinding对象，是指绑定C++对象的JS对象，其主要功能由C++提供，JS对象壳则分配在虚拟机的本地堆（LocalHeap）中。普通对象跨线程时通过拷贝形式传递，两个线程的对象内容一致，但指向各自线程的隔离内存区间，被分配在各自线程的虚拟机本地堆（对象跨线程传输后，重新创建JS壳可桥接到C++对象上，但需移除原JS壳与C++对象的绑定关系。对象跨线程传输后，只需重新创建JS壳即可桥接到同一个C++对象上，实现C++对象的共享。

创建Worker的线程称为宿主线程（不局限于主线程，Worker线程也支持创建Worker子线程）。Worker子线程（或Actor线程、工作线程）是Worker自身运行的线程。每个Worker子线程和宿主线程拥有独立的实例，包含独立执行环境、对象、代码段等。因此，启动每个Worker存在一定的内存开销，需要限制Worker子线程的数量。Worker子线程和宿主线程通过消息传递机制通信，利用序列化机制完成命令和数据的交互。的主要作用是为应用程序提供一个多线程的运行环境，实现应用程序执行过程与宿主线程分离。

对于刚接触多线程编程的新手来说，理解进程、线程、并发和并行等基础概念是至关重要的。在深入探讨多线程并发之前，让我们先统一这些基础概念的认识，为后续学习打下坚实的基础。

任务是完成某项操作要执行的一段代码，一个任务可以执行任何特定操作的代码，可能是简单的打印语句、复杂的算法处理、网络请求或 I/O 操作等。这些任务的执行时间各不相同，打印语句执行时间通常很短，而网络请求和 I/O 操作可能耗时较长。如果所有的任务按照顺序执行，耗时较长的任务可能会阻塞线程，导致整体性能下降，进而影响用户体验。为了更高效地管理和执行这些任务，JavaScript将要执行的任务分为同步任务和异步任务使得JavaScript能够在单线程环境中有效地处理耗时操作，而不阻塞主线程。