- 博客(61)
- 收藏
- 关注
原创 ReactNative项目OpenHarmony三方库集成实战:react-native-appearance(更推荐自带的Appearance)
深色模式(Dark Mode)已经成为标配功能。无论是系统级别的深浅主题切换,还是应用内的自定义主题,都能显著提升用户体验,同时在 OLED 屏幕上还能节省电量。是由 Expo 团队开发的外观管理库,提供了获取系统外观偏好、监听外观变化等功能,是实现主题切换的基础组件。库名称版本信息0.3.5-rc.1: 支持 RN 0.72/0.77 版本官方仓库原始仓库主要功能🌓 获取系统当前外观模式(浅色/深色)🔄 监听系统外观模式变化⚙️ 手动设置应用外观模式📱 跨平台一致性表现。
2026-03-19 10:41:47
445
原创 Flutter for OpenHarmony:三方库实战 animations 页面过渡动画详解
在移动应用开发中,页面切换动画是提升用户体验的重要手段。实际痛点📱生硬的页面跳转:默认的页面切换缺乏过渡,用户体验差🎨缺乏连贯性:用户不清楚新页面与旧页面的关系⚡视觉断层:突然的内容变化让用户感到不适🎭缺少品质感:简单的切换无法体现应用的专业性🔄元素跳跃:相同元素在不同页面间位置突变实际场景需求场景一:电商应用中,商品卡片平滑展开成详情页场景二:社交应用中,头像点击后放大显示个人资料场景三:新闻应用中,文章列表到详情的流畅过渡场景四:相册应用中,缩略图到大图的自然转换场景五。
2026-02-25 22:03:37
946
原创 Flutter for OpenHarmony:三方库引入 geocoding 地理编码详解
在移动应用开发中,地理编码(Geocoding)和逆地理编码(Reverse Geocoding)是非常常见的需求。实际痛点📍地址转坐标:用户输入地址,需要在地图上显示位置🗺️坐标转地址:获取GPS坐标后,需要显示可读的地址信息🔍地址搜索:搜索附近的地点并获取详细信息📱位置分享:分享当前位置时需要显示地址而不是坐标🚗导航应用:输入目的地地址后需要转换为坐标进行导航实际场景需求场景一:外卖应用需要将用户输入的地址转换为坐标场景二:地图应用需要显示当前GPS位置的详细地址场景三。
2026-02-25 21:35:43
764
原创 Flutter for OpenHarmony:三方库适配 native_device_orientation 设备方向检测详解
在移动应用开发中,获取设备方向是一个常见需求。Flutter 提供了,但它只能区分竖屏和横屏,无法区分横屏左转和横屏右转。Flutter 内置方法的局限性❌ 只能判断屏幕是横向还是纵向❌ 无法区分 landscapeLeft 和 landscapeRight❌ 无法区分 portraitUp 和 portraitDown❌ 基于屏幕尺寸判断,不够精确实际场景需求场景一:相机应用需要根据设备方向正确旋转照片场景二:视频播放器需要根据设备方向调整UI布局场景三:游戏应用需要精确的设备方向控制。
2026-02-25 21:11:20
906
原创 Flutter for OpenHarmony:第三方库实战 chewie 视频播放器UI组件详解
在移动应用开发中,虽然提供了基础的视频播放能力,但它缺少播放控制UI。这时候就需要chewie了!场景一:短视频应用需要完整的播放控制界面场景二:在线教育应用需要专业的视频播放器场景三:直播应用需要自定义播放控制场景四:视频分享应用需要美观的播放界面场景五:企业培训应用需要带字幕的视频播放chewie是基于的高级封装,提供了开箱即用的播放控制UI,支持 Material Design 和 Cupertino 风格,让你无需从零开发播放器界面!autoPlay: true, // 自动播放。
2026-02-25 20:48:45
660
原创 第三方库引入实战指南 Flutter for OpenHarmony:path_provider 文件路径详解
场景一:应用需要保存用户下载的文件到合适的目录场景二:应用需要缓存图片、视频等媒体文件场景三:应用需要存储用户配置文件场景四:应用需要访问设备的外部存储场景五:应用需要读写临时文件是解决这些需求的完美方案!它提供了一套跨平台的文件路径 API,让应用可以轻松地访问系统目录。
2026-02-25 17:52:01
769
原创 进阶实战 Flutter for OpenHarmony:响应式状态机系统 - 复杂状态流转实现
在现代应用开发中,复杂的状态管理是核心挑战之一。状态机(State Machine)提供了一种结构化的方式来管理状态转换,使代码更加可预测和可维护。理解状态机的核心概念,是构建复杂业务逻辑的基础。状态机由状态(State)、事件(Event)、转换(Transition)和动作(Action)组成:🔬 1.2 有限状态机(FSM)详解有限状态机是最常用的状态机类型,具有有限个状态和明确定义的转换规则:🎯 1.3 状态机设计原则设计良好的状态机需要遵循以下原则:状态机类型对比:基础状态机实现包括
2026-02-23 12:08:16
520
原创 进阶实战 Flutter for OpenHarmony:自定义路由管理系统 - 声明式导航与深层链接实现
自定义 PageRoute 可以实现独特的页面转场动画效果。/// 自定义转场动画示例@overrideappBar: AppBar(title: const Text('自定义转场')),context,'淡入淡出',context,FadeRoute(page: const TransitionTargetPage(title: '淡入淡出')),),),context,'缩放转场',context,
2026-02-23 12:04:53
516
原创 进阶实战 Flutter for OpenHarmony:Isolate 多线程计算系统 - 并发任务处理实现
在 Flutter 中,Dart 是单线程执行的,但通过 Isolate 可以实现真正的并行计算。每个 Isolate 都有自己独立的内存堆和事件循环,通过消息传递进行通信。理解这套架构的底层原理,是构建高性能并发系统的基础。Flutter 的 Isolate 系统由多个核心层次组成,每一层都有其特定的职责:🔬 1.2 Isolate 核心概念详解Flutter Isolate 系统的核心概念包括以下几个部分:Isolate(隔离区)Isolate 是 Dart 并发编程的基本单位,每个 Isolat
2026-02-23 12:01:23
676
原创 进阶实战 Flutter for OpenHarmony:高性能列表虚拟化系统 - 大数据量渲染优化实现
在现代移动应用中,列表是最常见的 UI 组件之一。当数据量达到成千上万条时,如何保证列表的流畅滚动成为关键问题。Flutter 通过虚拟化技术,只渲染可见区域的元素,实现了大数据量列表的高性能渲染。理解这套架构的底层原理,是构建高性能列表系统的基础。Flutter 的列表虚拟化系统由多个核心层次组成,每一层都有其特定的职责:🔬 1.2 列表虚拟化核心组件详解Flutter 列表虚拟化系统的核心组件包括以下几个部分:Viewport(视口)Viewport 是虚拟化的核心,只渲染可见区域的子组件。Sl
2026-02-23 11:37:45
639
原创 进阶实战 Flutter for OpenHarmony:自定义渲染引擎系统 - RenderObject 底层绘制实现
简单自定义渲染对象是最基础的 RenderObject 实现形式。/// 简单自定义渲染对象示例if (_color!= value) {@override@override自定义命中测试实现非矩形区域的触摸响应。/// 圆形命中测试 RenderObject@override@override@override/// 多边形命中测试 RenderObjectif (_sides!= value) {
2026-02-23 11:21:24
659
原创 进阶实战 Flutter for OpenHarmony:自定义仪表盘系统 - 高级数据可视化实现
仪表盘核心概念:理解极坐标系统和绘制原理基础仪表盘:简单圆形仪表盘、多色渐变仪表盘高级仪表盘:半圆仪表盘、数字仪表盘动画系统:指针动画、进度动画的实现性能优化:合理使用 CustomPainter,避免性能问题自定义仪表盘是 Flutter 中数据可视化的重要组成部分,掌握其实现技巧能够帮助开发者创建更加专业、美观的数据展示界面。在实际开发中,需要根据具体场景选择合适的仪表盘类型,并注意性能优化。
2026-02-21 18:56:56
537
原创 进阶实战 Flutter for OpenHarmony:ClipPath 自定义裁剪系统 - 高级视觉效果实现
在现代移动应用开发中,裁剪效果是创建独特视觉形状和提升用户界面美观度的重要手段。Flutter 提供了强大的 ClipPath 组件,通过自定义路径实现各种复杂的裁剪效果。理解路径裁剪的底层原理,是掌握高级视觉效果的关键。ClipPath 是 Flutter 中用于对子组件进行路径裁剪的 Widget。它通过 CustomClipper 定义裁剪路径,将子组件裁剪成任意形状,而不影响子组件的实际布局。ClipPath 与其他裁剪组件的关系:ClipPath 核心属性:裁剪器定义裁剪路径clipB
2026-02-21 18:54:58
478
原创 进阶实战 Flutter for OpenHarmony:Transform 变换矩阵系统 - 高级视觉效果实现
Transform 核心概念:理解变换矩阵的工作原理和数学基础基础变换效果:平移变换、旋转变换、缩放变换的实现方法3D 变换效果:透视旋转、翻转卡片等立体效果组合变换:动画变换组合、交互式变换控制器性能优化:合理使用 Transform,避免性能问题Transform 是 Flutter 中实现高级视觉效果的核心工具,掌握其使用技巧能够帮助开发者创建更加丰富、生动的用户界面。在实际开发中,需要根据具体场景选择合适的变换方式,并注意性能优化。
2026-02-21 18:51:28
698
原创 进阶实战 Flutter for OpenHarmony:ShaderMask 着色器系统 - 高级视觉效果实现
本文深入探讨了 Flutter 的 ShaderMask 着色器系统,从基础概念到高级实现,帮助你构建专业级的视觉效果。📌ShaderMask 原理:理解着色器如何与子组件像素进行混合📌渐变类型:掌握线性渐变、径向渐变、扫描渐变的特点和应用场景📌混合模式:了解不同 BlendMode 的效果差异,选择合适的混合方式📌动态效果:使用动画控制器驱动渐变变化,创建流动的视觉效果📌性能优化:合理使用 ShaderMask,避免过度渲染。
2026-02-21 16:59:57
672
原创 进阶实战 Flutter for OpenHarmony:复合动画与粒子系统 - 高级视觉效果实现
Flutter 的动画系统基于以下核心组件构建:二、基础粒子系统实现📦 2.1 粒子数据模型首先定义粒子的数据结构:🔧 2.2 粒子发射器实现粒子发射器,控制粒子的生成和初始化:🎨 2.3 粒子渲染器使用 实现粒子渲染:三、高级粒子效果实现✨ 3.1 烟花粒子效果实现绚丽的烟花爆炸效果:🌊 3.2 流体粒子效果实现流体般的粒子流动效果:四、复合动画系统🎪 4.1 编排动画实现多个动画的协调播放:🎭 4.2 交互动画实现用户交互驱动的动画效果:五、物理
2026-02-21 16:15:37
602
原创 基础入门 Flutter for OpenHarmony:图片处理工作流实战
在实际应用开发中,图片处理是一个非常常见的需求。用户可能需要选择图片、裁剪图片、然后提取图片的主色调用于界面配色。本教程将结合三个三方库,实现一个完整的图片处理工作流。本文介绍了如何结合 image_picker、image_cropper 和 palette_generator 三个三方库实现完整的图片处理工作流。使用 image_picker 选择图片加载网络图片并处理使用 image_cropper 裁剪图片使用 palette_generator 提取图片主色调。
2026-02-17 12:20:35
583
原创 基础入门 Flutter for OpenHarmony:image_cropper 图片裁剪实战应用
在移动应用开发中,图片裁剪是一种非常常见的需求。用户需要上传头像、制作证件照、编辑社交媒体图片等,都需要用到图片裁剪功能。Flutter 提供了 image_cropper 插件,支持 OpenHarmony 平台,可以轻松实现各种图片裁剪场景。用户头像裁剪的实现证件照制作功能图片编辑器的开发身份证照片裁剪通过本文的学习,你应该能够在 Flutter for OpenHarmony 项目中熟练使用 image_cropper 实现各种图片裁剪功能。
2026-02-17 11:36:44
549
原创 基础入门 Flutter for OpenHarmony:TimePicker 时间选择器详解
在移动应用开发中,时间选择是一种常见的交互需求。用户需要选择闹钟时间、预约时间、日程安排等,而良好的时间选择体验可以大大提升应用的易用性。Flutter 提供了 TimePicker 组件,专门用于实现时间选择功能,支持 Material Design 设计规范。cancelText: '取消',confirmText: '确定',helpText: '选择预约时间',errorInvalidText: '请选择有效时间',
2026-02-17 11:16:43
662
原创 基础入门 Flutter for OpenHarmony:SearchAnchor 搜索锚点组件详解
在移动应用开发中,搜索是一种核心功能。用户需要快速找到想要的内容,而良好的搜索体验可以大大提升应用的易用性。Flutter 提供了 SearchAnchor 组件,专门用于实现带有搜索建议的搜索功能,支持 Material 3 设计规范。SearchAnchor 是 Flutter 中用于实现搜索功能的组件,提供了 Material 3 风格的搜索体验。SearchAnchor 的基本用法和核心概念SearchBar 的样式定制SearchController 的使用方法。
2026-02-17 11:13:16
627
原创 基础入门 Flutter for OpenHarmony:RangeSlider 范围滑块组件详解
在移动应用开发中,范围选择是一种常见的交互模式。用户可以通过拖动两个滑块来选择一个数值范围,这种设计常用于价格筛选、时间范围选择、年龄筛选等场景。Flutter 提供了 RangeSlider 组件,专门用于实现这种双滑块的范围选择功能。通过),),),),),min: 0,max: 100,),});},),形状说明圆形滑块自定义形状),),),),),选项说明仅离散滑块显示仅连续滑块显示always总是显示never从不显示。
2026-02-17 11:09:34
639
原创 CANN 组合库深度解析:AMCT与CANN-RECIPES-INFERENCE的压缩与推理协同优化
模型压缩和推理是模型部署的两个关键环节。AMCT(模型压缩工具)与CANN-RECIPES-INFERENCE(推理优化样例)如何协同工作?如何实现最优的压缩和推理性能?本文探讨AMCT与CANN-RECIPES-INFERENCE的协同优化机制,以及如何通过两者的配合实现高性能的模型压缩和推理。没有协同优化:压缩和推理各自优化 → 性能提升有限有协同优化:压缩和推理协同优化 → 性能大幅提升原始模型↓AMCT(模型压缩)↓CANN-RECIPES-INFERENCE(推理优化)↓。
2026-02-07 09:14:34
303
原创 CANN SIP信号处理算子库深度解析:高性能信号处理算子加速库
信号处理在音频、图像、通信等领域有着广泛的应用。如何在NPU上实现高效的信号处理算子?如何充分利用NPU的硬件能力?SIP(Signal Processing)是CANN提供的信号处理算子库,为NPU提供高效的信号处理能力。没有信号处理算子库:开发者自己实现信号处理 → 效率低 → 性能不佳有信号处理算子库:使用优化算子 → 快速开发 → 性能优化信号处理应用↓SIP(信号处理算子库)↓CANN平台↓NPU硬件用于音频处理。FFT算子滤波算子卷积算子性能优化广泛应用。
2026-02-07 09:13:52
367
原创 CANN ATVOSS Vector算子库深度解析:高性能Vector算子子程序库
Vector算子是NPU编程的核心组件。如何高效地使用Vector算子?如何编写高性能的Vector算子子程序?ATVOSS(Ascend TVM Operator Subroutines)是CANN提供的Vector算子子程序库,为NPU编程提供高效的Vector算子支持。没有Vector算子子程序库:开发者自己实现Vector操作 → 效率低 → 性能不佳有Vector算子子程序库:使用优化子程序 → 快速开发 → 性能优化Vector算子开发↓ATVOSS(Vector算子子程序库)↓。
2026-02-07 09:12:56
308
原创 CANN cann-recipes-spatial-intelligence空间智能优化样例深度解析
空间智能是AI的重要应用领域,包括3D感知、SLAM、点云处理等。如何在NPU上实现高效的空间智能应用?如何优化空间智能的典型场景?CANN-RECIPES-SPATIAL-INTELLIGENCE针对空间智能典型场景,提供基于CANN平台的优化样例。没有优化样例:开发者自己摸索 → 效率低 → 性能不佳有优化样例:参考样例实践 → 快速上手 → 性能优化空间智能应用↓CANN-RECIPES-SPATIAL-INTELLIGENCE(优化样例)↓CANN平台↓NPU硬件用于自动驾驶。
2026-02-07 09:11:47
608
原创 CANN ASC-TOOLS调试工具套件深度解析:基于Ascend C编程语言的配套调试工具
调试是软件开发的重要环节。如何高效地调试Ascend C程序?如何快速定位和解决问题?ASC-TOOLS是CANN提供的调试工具套件,为Ascend C编程提供配套的调试工具支持。没有调试工具:调试困难 → 效率低 → 开发慢有调试工具:调试方便 → 效率高 → 开发快Ascend C程序↓ASC-TOOLS(调试工具套件)↓调试分析↓问题解决用于调试程序错误。调试器性能分析器内存分析器性能优化问题诊断。
2026-02-07 00:23:19
336
原创 深入解析CANN-graph-engine图计算引擎:构建高效神经网络执行引擎
/ 自定义算子开发示例public:// 注册输入输出// 注册属性// 获取输入输出// 获取属性float("alpha");// 获取数据指针float();float();// 执行计算i < size;++i) {// 推断输出形状// 注册算子。
2026-02-06 18:33:16
302
原创 】CANN-Ascend-C算子开发实战:高性能自定义算子从零到一
我们以一个简单的逐元素加法算子为例,演示完整的开发流程。功能:实现两个张量的逐元素相加:Z = X + Y数据类型:支持float16输入规格:两个输入张量shape相同输出规格:输出张量shape与输入相同首先定义算子的头文件// CANN算子核函数类public:// 算子初始化GM_ADDR x,GM_ADDR y,GM_ADDR z,// 算子核心处理逻辑private:// 拷贝输入数据到本地内存// 执行计算// 拷贝结果到全局内存。
2026-02-06 18:32:24
289
原创 深入解析CANN-graph-engine图计算引擎:构建高效神经网络执行引擎
graph-engine是CANN平台的计算图执行引擎,位于算子库(ops-nn)之上,运行时环境(runtime)之下。它承接来自上层深度学习框架的神经网络模型,负责将模型转换为可执行的计算图,并进行一系列的图优化和调度,最终高效地调度底层算子在昇腾AI处理器上执行。图转换:将不同框架的模型转换为统一的中间表示(IR)图优化:应用多种图变换技术优化计算图性能内存管理:智能分配和管理计算过程中的内存资源任务调度:优化算子执行顺序,充分利用硬件并行能力流水线执行。
2026-02-06 18:20:43
683
原创 深入解析CANN-ops-nn算子库:构建高性能神经网络计算引擎
CANN是华为面向AI场景打造的端云一致异构计算架构,通过软硬件协同优化,最大化释放昇腾AI硬件性能。CANN平台提供了从底层硬件抽象到上层应用开发的完整工具链,支持主流深度学习框架(如TensorFlow、PyTorch、MindSpore等)的无缝对接。
2026-02-06 18:09:02
419
原创 基础入门 React Native 鸿蒙跨平台开发:react-native-switch 开关适配
Switch 开关是移动应用中常见的二选一交互组件,用于开启或关闭某个功能、设置选项等。react-native-switch 是一个简单易用的开关组件库,提供丰富的样式配置和交互效果,完全支持鸿蒙系统。使用 react-native-switch 可以快速构建美观的开关控件,大大提升开发效率。库名称当前版本: 1.5.1官方仓库主要功能提供简洁易用的开关组件支持自定义颜色和尺寸支持禁用状态完全兼容 Android、iOS 和 HarmonyOS<Switch/>
2026-02-05 16:50:08
895
原创 基础入门 React Native 鸿蒙跨平台开发:react-native-button三方库适配
Button 按钮是移动应用中最常见的交互组件之一,用于触发用户的操作行为。react-native-button 是一个简单易用的按钮组件库,提供丰富的样式配置和交互效果,完全支持鸿蒙系统。使用 react-native-button 可以快速构建美观的按钮,大大提升开发效率。库名称当前版本: 3.1.0官方仓库主要功能提供简洁易用的按钮组件支持自定义样式和禁用状态支持加载状态和嵌套子组件完全兼容 Android、iOS 和 HarmonyOS通过集成。
2026-02-05 16:09:27
1170
原创 基础入门 React Native 鸿蒙跨平台开发:Video 全屏播放与画中画 鸿蒙实战
全屏播放和画中画(Picture-in-Picture, PiP)是视频播放器的核心功能,能够提升用户观看体验。在鸿蒙端, 提供了完善的全屏和画中画支持,让开发者可以轻松实现专业级的视频播放功能。画中画核心概念全屏与画中画模式对比#mermaid-svg-2vL9zzl9E1fpsuFx{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-fra
2026-02-05 13:01:55
888
原创 基础入门 React Native 鸿蒙跨平台开发:Video 视频列表与轮播播放
视频列表播放是视频应用的核心功能之一,支持用户浏览多个视频并快速切换。基于本次的核心视频列表代码,结合 RN 的内置能力,可轻松实现鸿蒙端开发中。以下是鸿蒙 RN 开发中实现「视频列表播放」的。可以实现流畅的视频列表播放体验。
2026-02-05 11:47:57
868
原创 React Native 鸿蒙跨平台开发:LinearGradient 线性渐变详解
return (<Text style={styles.text}>自定义方向</Text>});创建不对称的渐变效果实现特定的视觉设计需求增强界面的独特性使用locationsreturn (<Text style={styles.text}>自定义位置</Text>});数组长度必须与 colors 数组相同每个值的范围是 0-1值必须递增(从小到大)0 表示渐变起点,1 表示渐变终点强调某个颜色区域创建不对称的渐变实现特定的视觉设计blue: {
2026-02-01 23:16:50
738
原创 React Native 鸿蒙跨平台开发:LinearGradient 径向渐变
径向渐变(Radial Gradient)是一种从中心点向外辐射的渐变效果,它能够创建出圆形或椭圆形的色彩过渡。在 React Native for Harmony 中,虽然 主要用于线性渐变,但我们可以通过巧妙的配置模拟出类似径向渐变的效果。为什么需要模拟径向渐变?在 React Native for Harmony 中,我们可以通过以下方式模拟径向渐变:方法一:使用对角线渐变方法二:使用角度渐变方法三:多层渐变叠加根据官方文档, 属性在鸿蒙平台暂不支持。这意味着我们无法精确控制渐变角度的中心点,但可以
2026-02-01 23:08:46
927
原创 高级进阶React Native 鸿蒙跨平台开发:LinearGradient 线性渐变基础应用
适配文章请看:https://blog.csdn.net/qq_61024956/article/details/157513986。
2026-01-30 13:56:16
1399
原创 高级进阶React Native 鸿蒙跨平台开发:SVG 基础图形绘制
适配文章请看:https://llllyyyy.blog.csdn.net/article/details/157515409。
2026-01-30 13:46:50
637
原创 高级进阶 React Native 鸿蒙跨平台开发:InteractionManager 交互优化
定义交互优化数据结构,包含任务信息、执行状态、性能数据等属性。这是整个交互优化系统的基础,良好的数据结构设计能让后续开发事半功倍。// 注意:在实际代码中,类型定义如下id: string;// 任务唯一标识// 任务名称// 任务类型// 任务优先级// 执行时间戳// 执行时长(毫秒)// 任务状态error?: string;// 错误信息// 总任务数// 完成任务数// 失败任务数// 平均执行时长// 总执行时长// 任务列表// 是否正在处理// 性能指标。
2026-01-28 11:54:01
1216
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅