- 博客(46)
- 收藏
- 关注
RSS订阅原创 鸿蒙开发：案例集合List：多列表相互拖拽(删除/插入，偏移动效)（微暇）
这篇案例展示了在HarmonyOS中实现多列表相互拖拽功能的技术方案。文章提供了完整的实现代码和效果演示，主要特点包括： 实现了不同列表间项目交换和同列表内项目交换功能 支持组件边缘滑动、偏移检测动画效果 提供拖出/插入时的过渡动画 使用了onDragStart、onDrop、onDragMove等关键事件 包含详细的代码实现，展示了数据结构、组件标识和动画处理 案例还提供了华为开发者论坛的参考链接，适合想要学习HarmonyOS拖拽功能的开发者参考。
2025-12-10 10:37:25
659
原创 鸿蒙开发：案例集合List：多列表（List）相互拖拽（位置交换）
摘要 本文介绍了HarmonyOS中实现多列表（List）相互拖拽交换位置的开发案例。通过onDragStart、onDrop和onDragMove事件实现跨列表拖拽功能，支持同列表内交换和不同列表间数据交换。核心功能包括：拖拽动画、边缘滑动检测及悬停过渡效果。代码通过CompType枚举区分左右列表，利用extraParamsObj传递拖拽下标信息，并通过exchangeItem方法处理数据交换逻辑。目前已完成基础拖拽功能，后续计划实现组件左右偏移动效优化。 （字数：150）
2025-12-09 15:25:25
752
原创 鸿蒙开发：案例集合List：ListItem拖拽（交换位置，过渡动画）（性能篇）
本文介绍了HarmonyOS中实现List组件拖拽排序的两种高性能方案。第一种方案使用Repeat组件配合onMove事件实现拖拽交换位置，通过virtualScroll优化长列表性能。第二种方案采用LazyForEach懒加载结合@Reusable装饰器，通过自定义BasicDataSource数据源管理列表数据交换。两种方案都提供了流畅的拖拽动画效果，并详细说明了数据交换的实现逻辑。文章还提供了完整代码示例和效果演示，适合需要实现高性能拖拽列表的开发者参考。
2025-12-05 19:01:45
693
原创 鸿蒙开发：案例集合List：ListItem拖拽（交换位置，过渡动画）
本文介绍了HarmonyOS中实现列表项拖拽排序的两种方法：原生onMove拖拽和基于onItemDragStart/onItemDragMove/onItemDrop的事件拖拽。前者通过简单的onMove回调实现数据位置交换，后者提供了更精细的拖拽控制，包括拖拽开始/移动/结束的完整生命周期管理。文章包含代码示例和效果动图，展示了如何实现水平列表项的平滑拖拽动画和位置交换功能，同时提供了华为开发者文档的参考链接。
2025-12-04 20:38:51
573
原创 鸿蒙开发： 案例集合List：ListItem侧滑（删除、收藏）
本文介绍了两种实现List侧滑功能（删除、收藏）的方法：原生ListItem组件和自定义实现。原生方法利用ListItem自带的swipeAction属性，通过设置end参数实现右侧滑动操作；自定义方法则通过PanGesture手势监听滑动距离，动态调整translate属性实现滑动效果。两种方式都基于MVVM V2状态管理模式，支持数据绑定和响应式更新。文章提供了完整的代码示例，包含数据初始化、滑动距离计算、操作回调等关键实现细节，并附有效果图展示对比两种实现方式的交互效果。
2025-12-03 19:37:58
604
原创 鸿蒙开发：案例集合List（持续更新～）
🌍 其他：🔥🔥🔥案例集合Tabs（持续更新～）1. 模拟附近的人（列表插入过渡）2. 多级列表（商品分类）3. ListItem侧滑（删除、收藏）
2025-12-02 17:20:22
546
原创 鸿蒙开发：案例集合List：模拟附近人列表插入
摘要 本文展示了一个HarmonyOS列表动画实现案例，模拟附近人列表插入效果。通过List组件结合显式动画和组件转场技术，实现了从列表顶部插入数据时的平滑过渡效果。关键实现包括：使用animateTo控制动画过程，设置cachedCount优化性能，利用translate和opacity组合转场效果，并通过onReachStart监听列表顶部位置触发数据更新。案例还包含了定时器管理、动画中断处理等实用技巧，适合需要实现动态列表加载的场景参考。
2025-12-02 17:16:18
528
原创 鸿蒙开发： 案例集合Tabs：自定义tabs凹陷球体 滑动动画
本文介绍了HarmonyOS中实现自定义Tabs组件凹陷球体滑动动画的技术方案。通过CanvasRenderingContext2D绘制凹陷效果，结合AnimatorResult实现平滑过渡动画。文章详细解析了关键代码实现，包括安全区域适配、动画参数配置、Tabs交互逻辑等核心功能，并提供了效果展示GIF和官方案例参考。该组件实现了点击切换时的文字颜色变化、图标位移以及底部凹陷球体的平滑滑动效果，动画持续时间为300ms。技术要点涉及窗口安全区处理、Canvas绘图、组件动画等HarmonyOS开发核心AP
2025-12-01 19:37:21
695
原创 鸿蒙开发：案例集合Tabs：原生tab | 自定义tab 背景模糊
本文介绍了两种HarmonyOS Tab实现方式：原生Tab和自定义Tab背景模糊效果。通过Tabs组件的barOverlap属性和barBackgroundBlurStyle属性实现原生Tab的模糊叠加效果，并详细展示了如何设置安全区域适配不同设备。自定义Tab部分则通过代码示例演示了如何构建沉浸式页面布局，包括状态栏/导航栏避让处理、Tab内容构建以及模糊背景样式的应用。文中提供了关键API的官方文档链接，如blendMode、barOverlap等属性说明，帮助开发者快速实现类似效果。
2025-11-30 16:43:07
565
原创 鸿蒙开发：案例集合Tabs：自定义tabs突出（凸出）显示，异构，出血(边缘平滑)
本文介绍了一种自定义Tabs组件实现凸出显示效果的案例，通过路径裁剪和渐变效果实现边缘平滑过渡。主要技术点包括：使用PathShape进行图形裁剪、RadialGradient创建渐变效果、监听窗口避让区域变化适配不同设备。案例提供了完整的代码实现，包含Tabs布局、凸起球体动画以及安全区适配处理。效果图中展示了一个带有中间凸起圆球的Tabs组件，点击不同Tab时会平滑切换位置。文章还提供了相关技术文档参考链接，包括官方案例、沉浸式页面适配等资源。
2025-11-28 23:36:26
532
原创 鸿蒙开发：案例集合Tabs：tabs竖向粘性
摘要 本文介绍了鸿蒙系统下实现竖向粘性Tabs组件的技术方案。通过自定义TabBar样式和嵌套滚动(nestedScroll)控制，实现了包含轮播图和分类列表的交互效果。关键代码展示了如何配置Tabs容器、设置滚动优先级规则(PARENT_FIRST/SELF_FIRST)，以及关闭边缘效果等优化细节。案例包含模拟数据构建、TabContent内容渲染和Swipe组件模拟实现，适用于电商类应用的分类导航场景。
2025-11-28 23:33:49
462
2
原创 鸿蒙开发：案例集合Tabs：自定义tabs突出（凸出）球体左右跟随滑动动画
本文介绍了一个自定义Tabs组件案例，通过球体滑动动画实现标签页切换效果。该组件采用HarmonyOS开发，主要包含三个核心技术点：1）使用PathShape路径裁剪实现球体左右圆滑过渡；2）通过RadialGradient径向渐变增强视觉层次；3）结合动画效果使标签切换更流畅。案例还演示了如何适配沉浸式页面，处理安全区域（状态栏/导航栏）避让问题。开发者可参考官方示例中的圆滑形状裁剪方法，以及作者关于沉浸式适配的技术文章。组件提供完整的代码实现，包括标签构建器、球体平滑过渡构建器等核心功能模块，适合需要增
2025-11-27 17:25:55
560
原创 鸿蒙开发：案例集合Tabs：自定义tabs突出（凸出）显示，异构，出血
本文介绍了如何实现自定义Tabs的凸出显示效果，通过ArkUI框架实现异构布局和沉浸式适配。关键点包括：1) 使用TabsController控制Tab切换；2) 监听设备避让区域变化实现状态栏适配；3) 通过绝对定位和反向平移实现"+"按钮居中凸出效果；4) 利用onAnimationStart回调优化切换动画体验。案例展示了购物、体育等分类的Tab实现，底部导航栏可随系统导航栏自动调整，适用于各类移动端场景开发。
2025-11-26 23:09:17
495
原创 鸿蒙开发：案例集合Tabs：自定义tabs左右边缘渐隐，切换动画衔接 + 更多按钮
🌍案例集合Tabs🏷️效果图📖参考fadingEdge (开启渐隐) Api14onChangehitTestBehavior（触摸测试）🧩拆解自定义tabs（V1-V2组件都可用）使用fadingEdge Api 14@Componentprivate mockData: string[] = ['购物', '体育', '财经', '服装', '军事', '政治', '居家', '国际', '科技', '城市', '景点']@Builder.width(60)})build() {
2025-11-25 23:27:27
847
原创 鸿蒙开发：案例集合Tabs（持续更新～）
🌍 其他：🔥🔥🔥案例集合List（持续更新～）1. 分段按钮组件2. 自定义tabs左右边缘渐隐，切换动画衔接 + 更多按钮件3. 自定义tabs突出（凸出）显示，异构，出血4. 自定义tabs突出（凸出）球体左右跟随滑动动画5. tabs竖向粘性6. 自定义tabs突出（凸出）显示，异构，出血(边缘平滑)7. 原生tab | 自定义tab背景模糊8. 自定义tabs凹陷球体滑动动画
2025-11-24 23:26:06
491
1
原创 鸿蒙开发：案例集合Tabs：分段按钮组件
本文介绍了HarmonyOS中分段按钮组件的三种实现方式：1）自定义分段按钮组件，通过状态控制滑动动画效果；2）SegmentButton V1版本，提供基本配置选项但不推荐使用；3）推荐使用的SegmentButtonV2版本，支持更丰富的样式配置和交互控制。三种方案均实现了带切换动画的选项卡效果，开发者可根据需求选择合适方案，其中V2版本功能最完善，是官方推荐用法。文章包含完整代码示例和效果演示，适用于需要实现选项卡切换功能的HarmonyOS应用开发场景。
2025-11-24 23:24:43
630
原创 鸿蒙开发：Web页面适配
ArkWeb组件助力应用集成Web页面，支持浏览器浏览、小程序渲染等功能。通过WebviewController实现双向交互：应用侧可通过runJavaScript调用前端函数，前端通过javaScriptProxy调用应用侧方法。示例展示了本地HTML集成、深色模式适配、双向方法调用等实战场景，包括改变文本颜色、参数传递等交互功能。使用异步渲染模式提升性能，注意及时删除注册对象防止内存泄漏。
2025-11-21 10:37:58
759
原创 鸿蒙开发：应用通知栏基本操作
本文介绍了HarmonyOS应用开发中通知栏的基本操作，主要包括： 通知类型与场景：详解各种通知使用场景（服务通讯、资讯营销、进度显示等）及其对应的API和特性 核心操作： 通知权限申请流程 普通文本通知的实现方法 进度条通知的实现方案 通知的更新和取消机制 高级功能： 通过WantAgent实现通知点击跳转 使用模板创建特定样式的通知 进度通知的动态更新实现 文章提供了完整的代码示例，包括权限申请、基础通知、进度通知和意图跳转等核心功能的实现方法，帮助开发者快速掌握HarmonyOS通知系统的开发要点。
2025-11-19 22:42:22
445
原创 鸿蒙开发：浅谈适配沉浸式页面
文章摘要：沉浸式页面适配方案 本文探讨了移动端应用中沉浸式页面的多种适配方案。沉浸式设计通过消除干扰元素，最大程度利用屏幕可视区域，为用户提供专注的视觉体验。文章详细介绍了6种典型场景的适配方法：1）顶部/底部背景延伸；2）顶部图片延伸；3）滚动列表底部延伸；4）全屏沉浸式；5）挖空区避让；6）深色背景状态栏适配。关键技术包括扩展安全区域、设置窗口全屏模式、获取避让区域信息等，各方案均提供具体代码实现示例。这些方法可帮助开发者根据不同场景需求，实现更完美的沉浸式用户体验。
2025-11-18 23:17:26
719
原创 [鸿蒙2025领航者闯关] 鸿蒙开发：MVVM V2状态管理 开发模式，看完即懂！
本文系统介绍了鸿蒙MVVM V2状态管理开发模式，通过基础列表应用（点赞、删除、添加功能）完整展示了MVVM架构实现。文章分为装饰器讲解和实战开发两部分，详细说明@Local、@Param、@Event等核心装饰器的使用，并给出清晰的代码组织结构。实战部分包含Model层数据定义、View层UI组件实现以及ViewModel层业务逻辑处理，通过可运行的代码示例演示了数据绑定、事件处理和状态管理等关键技术点。
2025-11-17 23:38:13
1584
原创 鸿蒙开发：剖析深色模式适配方案
深色模式适配方案解析 文章详细介绍了深色模式的实现方案，包含四大核心适配点：颜色资源、媒体资源、状态栏和Web内容。在颜色资源适配方面，建议使用系统预设资源或自定义color.json文件；对于媒体资源，SVG图标可通过fillColor属性适配，非SVG资源需分别提供深浅色版本；状态栏适配需考虑沉浸式场景下的文本可读性问题，提供两种解决方案；Web内容适配则需通过特定组件设置。文章还提供了完整的代码示例，包括颜色资源配置、SVG图标处理以及状态栏动态调整的实现方法，为开发者实现深色模式提供了实用指导。
2025-11-16 22:37:31
405
原创 鸿蒙开发：浅入主流路由解决方案推荐之 Navigation
摘要： 本文介绍了HarmonyOS主流路由解决方案，重点分析Navigation组件及其优势。作为根视图容器，Navigation支持跨模块跳转、参数传递、路由栈操作等丰富功能，性能优于原生Router。文章对比了HMRouter、ZRouter等二次封装方案与原生Navigation的差异，并提供了路由表配置、页面跳转、参数传递等核心代码示例。推荐开发者优先选择基于Navigation封装的第三方路由方案，以提升开发效率。
2025-11-15 21:19:17
815
原创 鸿蒙开发：浅入Repeat：子组件复用
摘要： Repeat组件在HarmonyOS中用于高效处理大/中数据集，支持懒加载、节点复用和多模板渲染，适用于动态数据场景。从API 18起支持虚拟滚动配置，API 19新增拖拽排序和精准懒加载功能。相比ForEach（小数据集）和LazyForEach（超大数据），Repeat在复用性和多模板上更优，需注意数据更新需整体传参以保持双向绑定。示例代码展示了添加/删除操作及滚动控制，但精准懒加载需API 19+支持。适用场景需根据数据量和交互需求选择。
2025-11-13 22:20:02
686
原创 鸿蒙开发：浅入PersistenceV2: 持久化储存UI状态
摘要：PersistenceV2提供持久化存储UI状态能力，支持模块隔离和跨模块/Ability数据共享。关键特性包括：1) 使用@Trace自动触发磁盘写入；2) connect实现模块内数据隔离；3) globalConnect支持全局数据共享。通过简单API即可实现状态变量的持久化存储，在应用冷启动时恢复数据。示例展示了如何使用connect/globalConnect、移除存储和手动保存等操作，适合需要持久化UI状态的开发场景。
2025-11-12 22:39:41
320
原创 鸿蒙开发：浅入AppStorageV2: 应用全局UI状态存储
摘要： AppStorageV2是用于应用全局UI状态存储的工具，支持多UIAbility实例间的数据共享。使用时需注意：与AppStorage数据不互通，且操作同一个key时需保持类型一致。通过connect方法可实现对数据的增删改查，示例展示了子页面和父页面共享modelAll类的数据，并演示了数据修改、删除及跨页面跳转操作。AppStorageV2适用于需要全局状态管理的场景。
2025-11-11 22:52:00
155
原创 鸿蒙开发：浅入@Computed装饰器:计算属性
本文解析了@Computed装饰器的核心特性与应用场景。@Computed作为方法装饰器，仅能修饰getter方法，其计算值会在状态变量改变时才重新计算，避免重复计算带来的性能问题。文章指出@Computed装饰的属性可被@Monitor监听、可初始化@Param，并建议仅将其用于复杂计算场景，因简单计算可能反而带来额外开销。通过示例代码展示了@Computed在组件中的典型用法，强调要避免在其中处理其他数据逻辑。
2025-11-10 23:05:24
163
原创 鸿蒙开发：MVVM V1状态管理 开发模式，看完即懂！
MVVM架构模式通过数据绑定实现视图与业务逻辑的解耦，包含Model（数据层）、View（视图层）和ViewModel（中介层）三个核心部分。该模式优势在于低耦合、事件驱动和团队协作高效。实战示例展示了列表点赞功能的实现，包括数据模型定义、视图组件构建和ViewModel数据处理。通过@Observed装饰器实现数据响应式更新，完整呈现了MVVM模式在前端开发中的应用流程和代码组织结构，体现了该模式在提高开发效率和维护性方面的价值。
2025-11-09 14:46:43
1897
原创 鸿蒙开发：浅入@Monitor装饰器:状态变量修改监听
文章摘要 本文深入解析了@Monitor装饰器的使用方法和注意事项。关键点包括：1) 被监听变量需用@Local、@Param等装饰器修饰；2) 支持同时监听多个变量；3) 在@ObservedV2类中需配合@Trace使用。@Monitor可监听数组长度和对象属性的变化，还能获取变化前后的值差异。示例代码展示了如何监听基础变量和类属性的变化，并通过回调函数处理变更逻辑。这种机制特别适合需要精细跟踪复杂数据结构变化的场景。
2025-11-09 12:19:55
422
原创 鸿蒙开发：浅入@Provider装饰器和@Consumer装饰器:跨组件层级双向同步
摘要：本文介绍ArkUI中的@Provider和@Consumer装饰器，用于实现跨组件层级的数据双向同步。两个装饰器支持可选别名参数，默认使用属性名作为别名，仅支持本地初始化。通过代码示例展示了父子组件间的数据绑定和传递机制，当子组件修改@Consumer绑定的值时，会同步更新@Provider的数据。@Provider/@Consumer属于状态管理V2装饰器，只能在V2版本的组件中使用。
2025-11-08 23:07:27
422
原创 鸿蒙开发：浅入@Event装饰器:规范组件输出
《@Event装饰器在组件通信中的应用》 摘要：本文介绍了@Event装饰器在父子组件交互中的使用方式。通过代码示例展示了@Event如何实现：1)当外部未初始化时默认使用本地函数；2)允许子组件修改父组件变量值。重点说明了@Event与@Param配合实现双向数据绑定的典型场景，示例中EventCaseSon组件通过@Event成功修改了父组件EventCase的name属性。这种机制为组件间通信提供了简洁高效的解决方案。
2025-11-07 22:39:41
142
原创 鸿蒙开发：浅入@Once:初始化同步一次
摘要：本文介绍了ArkUI中的@Once装饰器使用要点。关键点：1)@Once必须搭配@Param使用；2)搭配使用时允许本地修改@Param变量值。适用场景：变量仅需初始化同步一次、且需要本地修改的情况。通过父子组件示例展示了@Once的用法：父组件传递初始值后，子组件可本地修改该@Once @Param参数值，实现单次初始化后本地维护状态的效果。示例代码清晰演示了这一特性。🌸
2025-11-06 22:57:27
161
原创 鸿蒙开发：浅入@Param:组件外部输入
本文介绍了在自定义组件中使用@Local装饰器观测变量变化的实现方式。通过@ObservedV2和@Trace装饰类及其属性，开发者可以观测包括字符串、Map、Set、Date等多种类型的变量变化。示例展示了如何在组件内部使用@Local装饰器声明和初始化这些可观测变量，并通过按钮点击事件修改各类型变量的值。与@Param不同，@Local装饰的变量可以本地初始化，且无需外部传值。这为组件内部状态管理提供了灵活的实现方案。
2025-11-05 22:58:44
120
原创 鸿蒙开发：浅入@Local装饰器:组件内部状态
摘要：本文介绍了在ArkUI中使用@Local装饰器观测组件内部状态变化的方法。通过代码示例展示了如何用@Local配合@ObservedV2和@Trace装饰器来监测对象整体变化、Map、Set、Date等多种类型变量的状态改变，实现组件内部数据变化的响应式更新。@Local装饰器使组件内部变量具备状态观测能力，当数据变更时可触发界面自动刷新。
2025-11-04 23:12:59
204
原创 鸿蒙开发：浅入@Track装饰器类对象属性级更新
摘要：@Track装饰器用于标记类对象属性级更新，被装饰的属性变化时仅触发相关UI更新。通过对比CaseModelOne(@Track装饰)和CaseModelTwo(未装饰)的实例，演示了装饰器能避免冗余刷新，提升性能。该特性适用于嵌套类、继承类及多种数据类型场景，有效减少组件重绘开销。记录于2025.11.02华为鸿蒙极客沙龙东莞站学习所得。
2025-11-03 23:20:26
313
原创 鸿蒙开发：浅入@ObservedV2装饰器和@Trace装饰器
本文介绍了@ObservedV2和@Trace装饰器在状态管理中的使用，它们能够直接观测嵌套类对象属性的变化。通过多个示例演示了它们在不同场景下的应用，包括嵌套类型、继承类型、基础类型、对象数组类型、Map类型、Set类型和Date类型。文章还提供了一个完整的组件示例，展示如何通过按钮点击更新各类数据并触发界面刷新。这些装饰器是状态管理V2中的核心功能，开发者需要掌握其使用方法以实现高效的数据观测和响应式更新。
2025-11-03 23:09:05
213
原创 鸿蒙开发：二、 轻松使用@Reusable组件复用装饰器
本文介绍了如何使用@Reusable装饰器实现组件复用，重点针对List等滚动组件与LazyForEach搭配的场景。通过MyDataSource类管理数据源，演示了单个组件复用的基础实现方式，并扩展到多组件类型组合的复用方案。对于复杂组件，建议将小组件拆解为多个@Reusable组件后用@Builder组合。文中提供了完整代码示例，包括数据源定义、复用组件声明和列表实现，帮助开发者理解组件复用机制在长列表场景下的应用。
2025-11-02 22:21:51
511
原创 鸿蒙开发：一、轻松使用@Reusable组件复用装饰器
文章摘要：介绍了ArkUI的@Reusable装饰器使用方法，该装饰器可与@Component结合实现组件复用。被@Reusable标记的组件在被移除时，其JS对象会存入缓存待复用。重点展示了基础创建/销毁示例，包含复用(aboutToReuse)和回收(aboutToRecycle)的生命周期回调。适用于单一组件和组合组件场景，后续将补充列表和多组件类型用例。（149字）
2025-11-02 22:20:41
546
原创 鸿蒙开发：浅谈require 组件参数传递装饰器
摘要： @Require装饰器用于标记组件参数为必传项，可装饰@Prop、@State、@Provide等状态变量及普通变量，帮助开发时识别参数必要性。在API 18+中，装饰后的状态变量可无初始值直接使用，避免异常。代码示例展示了@Require修饰不同类型参数的应用，如普通变量、状态变量及构建器参数，通过强制校验提升代码健壮性，减少开发态/编译态的参数缺失问题。（150字）
2025-11-02 22:19:45
355
原创 鸿蒙开发：wrapBuilder 全局封装@Builder的使用姿势
本文介绍了如何使用wrapBuilder全局封装ArkUI中的@Builder装饰器。主要内容包括：1）@Builder只能全局初始化使用；2）对象builder方法仅限struct内部调用；3）适合抽离固定UI组件进行封装复用，可通过Map映射管理多个组件；4）初始化参数需与@Builder形参严格匹配。示例代码展示了如何通过枚举和Map封装多个@Builder组件，实现开箱即用的组件调用方式。这种封装方式能有效减少代码冗余，提升开发效率。
2025-11-02 22:18:49
869
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人