案例会定期更新，如果认为开发案例有帮助，欢迎在页面右上角点击 Star&Watch，方便及时接收案例更新通知。

🙏🙏🙏

如果你是HarmonyOS Next开发者，欢迎加入微信交流4群

HarmonyOS NEXT应用开发性能指导

在开发HarmonyOS NEXT应用时，优化应用性能是至关重要的。本文将介绍应用开发过程中常见的一些性能问题，并提供相应的解决方案，配合相关参考示例，帮助开发者解决大部分性能问题。我们把应用性能分析的方法划分为了性能分析四板斧，详细介绍可以参考文章HarmonyOS NEXT应用开发性能优化入门指导：

第一板斧：合理使用并行化、预加载和缓存，我们需要合理的使用并行化、预加载和缓存等方法，例如使用多线程并发、异步并发、Web预加载等能力，提升系统资源利用率，减少主线程负载，加快应用的启动速度和响应速度。
第二板斧：尽量减少布局的嵌套层数，在进行页面布局开发时，应该去除冗余的布局嵌套，使用相对布局、绝对定位、自定义布局、Grid、GridRow等扁平化布局，减少布局的嵌套层数，避免系统绘制更多的布局组件，达到优化性能、减少内存占用的目的。
第三板斧：合理管理状态变量，应该合理的使用状态变量，精准控制组件的更新范围，控制状态变量关联组件数量，控制对象级状态变量的成员变量关联组件数，减少系统的组件渲染负载，提升应用流畅度。
第四板斧：合理使用系统接口，避免冗余操作，应该合理使用系统的高频回调接口，删除不必要的Trace和日志打印，避免注册系统冗余回调，减少系统开销。

性能文章总览目录

分类	性能文章
ArkTS高性能编程	高性能编程规范、高效并发编程、N-API高效开发指导、多线程能力场景化、利用native的方式实现跨线程调用
减少卡顿丢帧	正确使用LazyForEach优化、组件复用使用指导、组件复用四板斧、WaterFlow高性能开发指导、Swiper高性能开发指导、合理进行状态管理、精准控制组件的更新范围、合理使用renderGroup、减少动画丢帧、合理使用多线程共享内存、Grid高性能开发指导、状态管理优秀实践、合理处理高负载组件的渲染、避免开发过程中的冗余操作、合理使用自定义组件冻结功能、避免在滑动场景的高频回调接口中处理耗时操作、避免在主线程中执行耗时操作
提升应用启动和响应速度	提升应用冷启动速度、提升应用响应速度、Flex布局性能提升使用指导、优化布局性能、合理选择条件渲染和显隐控制、合理使用IPC通信、文件上传下载性能提升指导、减少首帧绘制时的冗余操作、列表场景性能提升实践、动效能力实践、性能提升的其他方法、运行时动态加载页面提升性能、合理运行后台任务、Web组件开发性能提升指导、减小应用包大小、使用同层渲染在Web上渲染原生组件
性能工具	性能分析工具CPU Profiler、页面布局检查器ArkUI Inspector、内存分析器Allocation Profiler、帧率分析工具 Frame Profiler、启动分析工具Launch Profiler、内存快照Snapshot Profiler、耗时分析器Time Profiler、性能测试工具SmartPerf Editor、性能优化工具HiDumper、性能优化工具SmartPerf-Host、状态变量组件定位工具实践、应用滑动场景帧率问题分析实践

HarmonyOS NEXT应用开发案例集

概述

随着应用代码的复杂度提升，为了使应用有更好的可维护性和可扩展性，良好的应用架构设计变得尤为重要。本篇文章将介绍一个应用通用架构的设计思路，以减少模块间的耦合、提升团队开发效率，为开发者呈现一个清晰且结构化的开发框架。本文以“应用通用开发范例App”为例，从分层架构设计和模块化设计的方面介绍应用的架构组成。

分层架构设计：将应用划分为产品定制层、基础特性层和公共能力层，可以降低层间的依赖性，从而提升代码的可维护性。应用通用开发范例App分层架构如下：

common_app_development
|---AppScope
|---common    // 公共能力层，包括公共UI组件、数据管理、通信和工具库等
|---feature   // 基础特性层，包含独立的业务模块，如启动页、登录模块、导航栏等
|---libs      // 三方依赖库
|---product   // 产品定制层，作为不同设备或场景应用入口，例如phone、tv等

模块化设计：应用被分解为多个功能模块，其中每个模块负责执行特定的功能。通过模块化设计提高了代码的可理解性和可复用性，使应用的扩展和维护变得更为简便，同时降低了系统各部分之间的耦合度。应用通用开发范例App模块化结构如下：

common_app_development
|---AppScope
|---common                             // 公共能力层
|   |---utils  
|   |   |---component                  // 公共布局，如功能介绍布局
|   |   |---log                        // 日志打印 
|---feature                            // 基础特性层
|   |---addressexchange                // 地址交换动画案例
|   |---akiusepractice                 // AKI使用实践
|   |---applicationexception           // 应用异常处理案例
|   |---barchart                       // MpChart图表实现案例
|   |---customtabbar                   // 自定义TabBar页签 案例
|   |---eventpropagation               // 阻塞事件冒泡案例
|   |---fitfordarkmode                 // 深色模式适配案例
|   |---functionalscenes               // 主页瀑布流实现 
|   |---gbktranscoding                 // Axios获取网络GBK数据转换UTF-8网络数据
|   |---handletabs                     // Tab组件实现增删Tab标签案例
|   |---imageviewer                    // 图片预览方案
|   |---marquee                        // 跑马灯案例
|   |---modalwindow                    // 全屏登录页面案例
|   |---nativeprogressnotify           // Native侧进度通知到ArkTS
|   |---nativerawfile                  // Native读取Rawfile中文件部分内容
|   |---navigationparametertransfer    // Navigation页面跳转对象传递案例
|   |---pageturninganimation           // 翻页动效案例
|   |---pendingitems                   // 列表编辑实现案例
|   |---photopickandsave               // 图片选择和下载保存案例
|   |---pulltorefreshnews              // 下拉刷新与上滑加载案例
|   |---secondarylinkage               // 二级联动实现案例
|   |---slidetohideanddisplace         // 滑动页面信息隐藏与组件位移效果案例
|   |---variablewatch                  // 多层嵌套类对象监听案例
|   |---verifycode                     // 验证码布局
|   |---vibrateeffect                  // 基础特性层-抖动动画及手机振动效果
|   |---customcalendarpickerdialog     // 基础特性层-自定义日历选择器
|   |---navigationbarchange            // 基础特性层-状态栏显隐变化案例
|   |---customview                     // 基础特性层-自定义视图实现Tab效果
|   |---waterripples                   // 基础特性层-听歌识曲水波纹特效案例
|   |---citysearch                     // 城市选择案例
|   |---componentstack                 // 组件堆叠案例
|   |---dragandexchange                // Grid和List内拖拽交换子组件位置案例
|   |---foldablescreencases            // 折叠屏音乐播放器案例
|   |---imagecomment                   // 发布图片评论案例
|   |---mediafullscreen                // 视频全屏切换案例
|   |---swipercomponent                // 多层级轮播图案例
|   |---swipersmoothvariation          // Swiper高度可变化效果案例
|   |---decompressfile                 // Worker子线程中解压文件案例
|   |---paintcomponent                 // 使用绘制组件实现自定义进度动画案例
|   |---lottieview                     // Lottie
|   |---imagecompression               // 图片压缩方案
|   |---votingcomponent                // 投票组件
|   |---webgetcameraimage              // WebView拉起原生相机案例
|   |---sidebaranimation               // SideBarContainer侧边栏淡入淡出动效实现案例
|   |---imageenableanalyzer            // 图片拖拽AI抠图案例
|   |---indicatorbelowswiper           // swiper指示器导航点位于swiper下方
|   |---bigfilecopy                    // 大文件拷贝案例
|   |---diggingholescreen              // 适配挖孔屏案例
|   |---dragtoswitchpictures           // 左右拖动切换图片效果案例
|   |---listitemoverflow               // 元素超出List区域
|   |---multiplefilesdownload          // 多文件下载监听案例
|   |---searchcomponent                // 搜索页一镜到底案例
|   |---dynamicattributes              // 跨文件样式复用和组件复用
|   |---etswrapper                     // NAPI封装ArkTS接口案例
|   |---handwritingtoimage             // 手写绘制及保存图片
|   |---multimodaltransion             // 多模态页面转场动效实现案例
|   |---nativeembed                    // ArkWeb同层渲染
|   |---sideslipintercept              // 侧滑返回事件拦截案例
|   |---webpdfviewer                   // Web组件预览PDF文件实现案例
|   |---listslidetohistory             // 长列表滑动到指定列表项动效实现案例
|   |---imagetheft                     // 正确配置ImageKnife请求头实现防盗链功能
|   |---componentinstancesharedinpages // 页面间共享组件实例的案例
|   |---fontdynamicregistration        // 动态注册字体案例
|   |---effectKit                      // 使用colorPicker实现背景跟随主题颜色转换
|   |---cardswiperanimation            // 自定义Swiper卡片预览效果实现
|   |---customscan                     // 折叠屏扫描二维码方案
|   |---imagedepthcopy                 // PixelMap深拷贝案例
|   |---pageflip                       // 阅读翻页方式案例
|   |---videocache                     // 边缓存边播放案例
|   |---iconmaincolor                  // 根据icon自适应背景颜色
|   |---bottomdrawerslidecase          // 底部抽屉滑动效果案例
|   |---chinesetopinyin                // 汉字转拼音案例
|   |---customsafekeyboard             // 自定义安全键盘案例
|   |---nativesavepictosandbox         // Native保存图片到应用沙箱
|   |---shortvideo                     // 短视频切换实现案例
|   |---digitalscrollanimation         // 数字滚动动效实现
|   |---expandtitle                    // 标题下拉缩放案例
|   |---pageloading                    // 页面加载效果实现案例
|   |---databaseupgrade                // 数据库版本升级案例
|   |---hilogmonitormanagement         // 监听HiLog日志实现测试用例验证
|   |---transitionanimation            // 一镜到底“页面转场”动画
|   |---imagegridlayout                // 图片九宫格封装案例
|   |---highlightguide                 // 应用新功能引导实现案例
|   |---wordrecognition                // 文字识别案例
|   |---bottompanelslide               // 底部面板嵌套列表滑动案例
|   |---danmakuplayer                  // 视频弹幕功能
|   |---listexchange                   // 列表项交换案例
|   |---tabcontentoverflow             // tabContent内容可以在tabBar上显示并响应滑动事件案例
|   |---chatwithexpression             // 表情聊天案例
|   |---floatwindow                    // 悬浮窗拖拽和吸附动画
|   |---gridexchange                   // 网格元素交换案例
|   |---miniplayeranimation            // 音乐播放转场一镜到底效果实现
|   |---refreshtimeline                // 下拉展开图片和时间轴效果实现案例
|   |---webpagesnapshot                // Web页面长截图
|   |---naviagtioninterceptor          // Navigation路由拦截案例
|   |---blendmode                      // 图片混合案例
|   |---secondfloorloadanimation       // 首页下拉进入二楼效果案例
|   |---styledtext                     // Text实现部分文本高亮和超链接样式
|   |---navigationinterceptor          // Navigation路由拦截案例
|   |---customdialog                   // 全局弹窗封装案例
|   |---textexpand                     // 文字展开收起案例
|   |---imageresizable                 // 边框或背景图片拉伸案例
|   |---watermark                      // 水印案例
|   |---textoverflow                   // textOverflow长文本省略
|   |---fadingedge                     // 边缘渐变实现
|   |---customstepper                  // 自定义Stepper
|---libs
|---product 
|   |---entry                          // 产品定制层-应用入口

FAQ

高频问题请查看FAQ

工程框架和实现设计

产品定制层

产品定制层专注于满足不同设备或使用场景（如应用/元服务）的个性化需求，包括UI设计、资源和配置，以及针对特定场景的交互逻辑和功能特性。

产品定制层的功能模块独立运作，同时依赖基础特性层和公共能力层来实现具体功能。

可参考如下示例：

phone产品应用入口

基础特性层

基础特性层位于公共能力层之上，用于存放基础特性集合，例如相对独立的功能UI和业务逻辑实现。该层的每个功能模块都具有高内聚、低耦合、可定制的特点，以支持产品的灵活部署。

基础特性层为上层的产品定制层提供稳健且丰富的基础功能支持，包括UI组件、基础服务等。同时依赖于下层的公共能力层为其提供通用功能和服务。

首页以Navigation组件为基础，通过路由管理实现了页面或者模块间的跳转，嵌套了搜索、精品案例轮播、案例瀑布流列表等模块，预览效果如下：

下面是详细的案例列表：

119.自动生成动态路由（0523更新）

本示例将介绍如何使用装饰器和插件，自动生成动态路由表，并通过动态路由跳转到模块中的页面，以及如何使用动态import的方式加载模块。详细说明文档

118.使用GTest测试C++案例（0521更新）

本案例介绍如何在HarmonyNext应用中接入GTest测试框架测试C++代码。详细说明文档

117.自定义Stepper（0516更新）

在许多场景下，我们都需要引导用户按照步骤完成任务，此功能在HarmonyOS Next中可以使用Stepper来实现，但是Stepper的定制化能力较弱，开发者无法定制上下页切换按钮的样式、位置，因此本例介绍了如何基于Swiper实现Stepper的能力。详细说明文档

116.边缘渐变实现（0515更新）

本案例介绍组件内容边缘渐变的实现，通常用于提示长列表滑动到边缘的场景。详细说明文档

115.textOverflow长文本省略（0515更新）

本示例实现了回复评论时，当回复人的昵称与被回复人的昵称长度都过长时，使用textOverflow和maxLines()实现昵称的长文本省略展示的功能。详细说明文档

114.水印案例（0515更新）

在很多的场景中，如保存图片以及容器封面都能够见到水印，本案例通过Canvas组件以及OffscreenCanvas实现了页面添加水印以及保存图片时添加水印的功能。详细说明文档

113.边框或背景图片拉伸案例（0513更新）

HarmonyOS上不支持.9资源文件进行安全拉伸。作为替代方案，本案例中商城页面的促销标签边框使用同一张图片资源，通过设置图片的resizable属性，展示不同长度的促销标签效果。详细说明文档

112.文字展开收起案例（0513更新）

本示例介绍了@ohos.measure组件接口实现文字展开收起的功能。该场景多用于图文列表展示等。详细说明文档

111.全局弹窗封装案例（0507更新）

本示例介绍两种弹窗的封装案例。一种是自定义弹窗封装成自定义组件的方式，使用一句代码即可控制显示；一种是使用子窗口的方式实现弹窗，使用一句代码即可展示。详细说明文档

110.Navigation路由拦截案例（0507更新）

本示例介绍在Navigation中如何完成路由拦截：首次登录时记录登录状态，再次登录时可以直接访问主页无需重复登录，当退出登录时，下次需重新登录。详细说明文档

109.Text实现部分文本高亮和超链接样式（0430更新）

本示例通过自定义Span类型，在Text组件中使用ForEach遍历，根据不同的Span类型生成不同样式和功能的Span组件，实现部分文本高亮和超链接。详细说明文档

108.首页下拉进入二楼效果案例（0430更新）

本示例主要介绍了利用position和onTouch来实现首页下拉进入二楼、二楼上划进入首页的效果场景，利用translate和opacity实现动效的移动和缩放，并将界面沉浸式（全屏）显示。详细说明文档

107.图片混合案例（0430更新）

本实例主要通过BlendMode属性来实现挂件和图片的混合，通过更改不同的混合参数，能够展示不同的混合效果。详细说明文档

106.通过全局状态保留弹窗实现评论组件案例（0426更新）

评论组件在目前市面上的短视频app中是一种很常见的场景，本案例使用全局状态保留能力弹窗来实现评论组件。详细说明文档、全局状态保留能力弹窗说明文档

105.网格元素交换案例（0426更新）

直接进行交换和删除元素会给用户带来不好的体验效果，因此需要在此过程中注入一些特色的动画来提升体验效果，本案例通过Grid组件、attributeModifier、以及animateTo函数实现了拖拽动画和删除动画。详细说明文档

104.下拉展开图片和时间轴效果实现案例（0422更新）

下拉展开图片效果：初始时顶部图片只显示中间部分，其余部分，分别隐藏在屏幕上边缘和时间轴模块下方，随着下拉，图片会逐渐展开。时间轴效果：位于左边，虚线贯穿整个List，每个内容模块前都有一个时间轴节点。详细说明文档

103.定制HAP多目标构建产物（0419更新）

本案例展示如何将工程打包成不同版本，并单独配置资源文件，实现定制多目标构建产物功能。详细说明文档

102.表情聊天案例（0419更新）

本示例主要介绍如何在聊天信息中加入表情图片。通过使用CustomDialog创建表情键盘对话框，使用RichEdit接收所选表情的热键字符串，在发送信息时将热键转换为图片后显示在Richtext的聊天信息框中。详细说明文档

101.Web页面长截图（0419更新）

本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。详细说明文档

100.音乐播放转场一镜到底效果实现（0419更新）

音乐播放的Mini条播放栏在转场时的一镜到底动画是音乐播放器应用开发中常见的需求。本示例将介绍如何实现Mini条的一镜到底动画，如Mini条歌曲封面的缩放动画，Mini条的展开收起动画等。详细说明文档

99.tabContent内容可以在tabBar上显示并响应滑动事件案例（0418更新）

本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。详细说明文档

98.使用预渲染实现Web页面瞬开效果实践（0418更新）

本案例集成在应用entry模块中，使用Web预渲染实现了对各个案例的功能介绍。具体细节见详细说明文档

97.XComponent + Vsync 实现自定义动画（0418更新）

XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力，本文主要介绍如何配合 Vsync 事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画效果也不会受影响。详细说明文档

96.Canvas实现模拟时钟案例（0418更新）

本示例介绍利用Canvas和定时器实现模拟时钟场景，该案例多用于用户需要显示自定义模拟时钟的场景。详细说明文档

95.网格元素交换案例（0417更新）

本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。详细说明文档

94.视频弹幕功能（0411更新）

本示例介绍如何使用@ohos.danmakuflamemaster和@ohos.gsyvideoplayer开发支持视频弹幕的播放器。可以自定义弹幕样式、占据屏幕宽度，发送弹幕，开关弹幕视图。详细说明文档

93.悬浮窗拖拽和吸附动画（0417更新）

本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。详细说明文档

92.Web自定义长按菜单案例（0411更新）

本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。详细说明文档

91.阅读翻页方式案例（0411更新）

本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页的功能。详细说明文档

90.语音录制和声音动效实现（0411更新）

本示例使用AVrecord录制音频和AVrecord的getAudioCapturerMaxAmplitude接口获取振幅实现UI动效;使用AVplayer播放音频。详细说明文档

89.底部面板嵌套列表滑动案例（0411更新）

本示例主要介绍了利用panel实现底部面板内嵌套列表，分阶段滑动效果场景。详细说明文档

88.列表项交换案例（0411更新）

本案例通过List组件、组合手势GestureGroup、swipeAction属性以及attributeModifier属性等实现了列表项的交换和删除。详细说明文档

87.动态注册字体案例（0402更新）

本示例介绍利用上传下载模块和注册自定义字体模块实现从网络上下载字体并注册应用字体的功能，该场景多用于由特殊字体要求的场景。详细说明文档

86.边缓存边播放案例（0402更新）

OhosVideoCache是一个支持边播放边缓存的库，只需要将音视频的url传递给OhosVideoCache处理之后再设置给播放器，OhosVideoCache就可以一边下载音视频数据并保存在本地，一边读取本地缓存返回给播放器，使用者无需进行其他操作。详细说明文档

85.使用colorPicker实现背景跟随主题颜色转换（0402更新）

本示例介绍使用image库以及effectKit库中的colorPicker对目标图片进行取色，将获取的颜色作为背景渐变色，通过swiper组件对图片进行轮播。详细说明文档

84.文字识别案例（0402更新）

本示例介绍使用text组件的enableDataDetector属性实现文本特殊文字识别。详细说明文档

83.根据icon自适应背景颜色（0402更新）

本示例将介绍如何根据图片设置自适应的背景色。详细说明文档

82.折叠屏扫描二维码方案（0402更新）

本示例介绍使用自定义界面扫码能力在折叠屏设备中实现折叠态切换适配。自定义界面扫码使用系统能力customScan，其提供相机流的初始化、启动扫码、识别、停止扫码、释放相机流资源等能力。折叠屏折叠状态通过监听display的foldStatusChange事件实现。详细说明文档

81.搜索页一镜到底案例（0402更新）

本示例介绍使用bindContentCover、transition、animateTo实现一镜到底转场动画，常用于首页搜索框点击进入搜索页场景。详细说明文档

80.自定义Swiper卡片预览效果实现（0326更新）

本方案做的是采用Swiper组件实现容器视图居中完全展示，两边等长露出，并且跟手滑动效果。详细说明文档

79.Web组件预览PDF文件实现案例（0326更新）

本案例通过Web组件实现预览本地PDF文件和预览网络PDF文件，代码为Tabs容器组件包含了两个独立的TabContent子组件，分别标示为预览本地PDF文件和预览网络PDF文件。每个子组件内部构建一个Web组件。第一个Web组件利用resource协议关联本地PDF文件路径以预览本地存储的PDF资源；第二个Web组件则通过配置网络链接属性，实现从互联网加载并预览远程PDF文件内容。详细说明文档

78.Navigation实现多设备适配案例（0326更新）

在应用开发时，一个应用需要适配多终端的设备，使用Navigation的mode属性来实现一套代码，多终端适配。详细说明文档

77.PixelMap深拷贝案例（0326更新）

在图片开发过程中经常会涉及到PixelMap的深拷贝，本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。在创建源PixelMap的时候，需要将解码参数设置为BGRA_8888，而在深拷贝创建目标PixelMap的时候需要将解码参数设置为RGBA_8888。详细说明文档

76.跨文件样式复用和组件复用（0326更新）

本示例主要介绍了跨文件样式复用和组件复用的场景。在应用开发中，我们通常需要使用相同功能和样式的ArkUI组件，例如购物页面中会使用相同样式的Button按钮、Text显示文字，我们常用的方法是抽取公共样式或者封装成一个自定义组件到公共组件库中以减少冗余代码。详细说明文档

75.图片九宫格封装案例（0321更新）

本示例介绍使用(Flex) 组件实现图片在不同个数情况下的布局效果(默认布局和自定义布局)。该场景多用于社交类应用。详细说明文档

74.数据库版本升级案例（0321更新）

本示例介绍使用关系型数据库的接口来进行数据库升降级场景实现。详细说明文档

73.应用新功能引导实现案例（0321更新）

本文介绍如何使用high_light_guide三方库完成应用新版本功能导航。通过高亮区域与蒙版背景的明暗度对比，让用户快速锁定重点功能，了解版本变更和业务入口。详细说明文档

72.监听HiLog日志实现测试用例验证（0321更新）

日常中在进行测试用例验证时，会出现部分场景无法通过判断UI的变化来确认用例是否正常运行，我们可以通过监听日志的方式来巧妙的实现这种场景。本示例通过监听hilog日志的回调，判断指定日志是否打印，来确定测试用例的执行结果是成功还是失败。由于ArkTS没有注册日志回调的接口，示例通过Native来注册日志回调，并在Native的自定义日志处理函数中过滤用户传入的日志内容后回调ArkTS端的回调函数。详细说明文档

71.正确配置ImageKnife请求头实现防盗链功能（0321更新）

本案例使用了第三方库ImageKnife，通过在请求头中添加Referer来获取防盗链图片功能。也可以基于此功能设置请求头中的其他参数，例如User-Agent、Origin甚至ETag等等。详细说明文档

70.手写绘制及保存图片（0319更新）

本示例使用drawing库的Pen和Path结合NodeContainer组件实现手写绘制功能，并通过image库的packToFile和packing接口将手写板的绘制内容保存为图片。详细说明文档

69.多模态页面转场动效实现案例（0319更新）

本示例介绍多模态页面转场动效实现：通过半模态转场实现半模态登录界面，与全屏模态和组件转场结合实现多模态组合登录场景，其中手机验证码登录与账号密码登录都为组件，通过TransitionEffect.move()实现组件间转场达到近似页面转场的效果。详细说明文档

68.一镜到底“页面转场”动画（0319更新）

本方案做的是页面点击卡片跳转到详情预览的转场动画效果。详细说明文档

67.swiper指示器导航点位于swiper下方（0319更新）

本示例介绍通过分割swiper区域，实现指示器导航点位于swiper下方的效果。详细说明文档

66.侧滑返回事件拦截案例（0319更新）

本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截，提示用户保存编辑内容，并使用preferences实例持久化保存内容。详细说明文档

65.NAPI封装ArkTS接口案例（0312更新）

部分应用的主要开发语言为C/C++，但是HarmonyOS的部分接口仅以ArkTS的形式暴露，因此需要将ArkTS的接口封装为Native接口。本例以DocumentViewPicker的Select方法为例，提供了Napi封装ArkTSAPI的通用方法。详细说明文档

64.ArkWeb同层渲染案例（0312更新）

该方案展示了ArkWeb同层渲染：将系统原生组件直接渲染到前端H5页面上，原生组件不仅可以提供H5组件无法实现的一些功能，还能提升用户体验的流畅度。详细说明文档

63.页面间共享组件实例的案例（0312更新）

本示例提供组件实例在页面间共享的解决方案：通过Stack容器，下层放地图组件，上层放Navigation组件来管理页面，页面可以共享下层的地图组件，页面中需要显示地图的区域设置为透明，并参考触摸交互控制，设置事件透传及响应区域。详细说明文档

62.多文件下载监听案例（0312更新）

本示例介绍如何使用request上传下载模块实现多文件下载监听，如监听每个文件下载任务的进度，下载暂停，下载完成等文件下载情况。详细说明文档

61.自定义安全键盘案例（0312更新）

金融类应用在密码输入时，一般会使用自定义安全键盘。本示例介绍如何使用TextInput组件实现自定义安全键盘场景，主要包括TextInput.customKeyboard绑定自定义键盘、自定义键盘布局和状态更新等知识点。详细说明文档

60.适配挖孔屏案例（0312更新）

本示例介绍使用屏幕属性getDefaultDisplaySync、getCutoutInfo接口实现适配挖孔屏。该场景多用于沉浸式场景下。详细说明文档

59.自定义路由栈管理（0312更新）

本案例将介绍如何使用路由跳转返回时获取到来源页的模块名以及路径名，在实际场景中同一页面通常会根据不同来源页展示不同的UI。详细说明文档

58.左右拖动切换图片效果案例（0304更新）

本示例使用滑动手势监听，实时调整左右两侧内容显示区域大小和效果。通过绑定gesture事件中的PanGesture平移手势，实时获取拖动距离。当拖动时，实时地调节左右两个Image组件的宽度，从而成功实现左右拖动切换图片效果的功能。详细说明文档

57.投票动效实现案例（0304更新）

本示例介绍使用绘制组件中的Polygon组件配合使用显式动画以及borderRadius实现投票pk组件。详细说明文档

56.汉字转拼音案例（0304更新）

本示例介绍使用第三方库的pinyin4js组件实现汉字转大写拼音。详细说明文档

55.底部抽屉滑动效果案例（0304更新）

本示例主要介绍了利用List实现底部抽屉滑动效果场景，并将界面沉浸式（全屏）显示，及背景地图可拖动。详细说明文档

54.MpChart运动健康场景实践案例（0304更新）

MpChart是一个包含各种类型图表的图表库，主要用于业务数据汇总，例如销售数据走势图，股价走势图等场景中使用，方便开发者快速实现图表UI，MpChart主要包括线形图、柱状图、饼状图、蜡烛图、气泡图、雷达图、瀑布图等自定义图表库。本示例介绍了MpChart图表组件的使用方法。该组件多用于可视化等场景。详细说明文档

53.大文件拷贝案例（0302更新）

文件拷贝是应用开发中的一个常见场景，通常有两种方式，一是直接读写文件的全部内容，二是使用buffer多次读写。前者的优点在于使用简单，但是在大文件场景下，内存占用较高，影响应用性能；后者的优点在于内存占用较小，但是编程稍显复杂。本例将展示如何使用buffer来将大文件的rawfile复制到应用沙箱。详细说明文档

52.Web获取相机拍照图片案例（0302更新）

本示例介绍如何在HTML页面中拉起原生相机进行拍照，并获取返回的图片。详细说明文档

51.元素超出List区域（0302更新）

本示例介绍在List组件内实现子组件超出容器边缘的布局样式的实现方法。详细说明文档

50.数字滚动动效实现（0229更新）

本示例主要介绍了数字滚动动效的实现方案。该方案多用于数字刷新，例如页面刷新抢票数量等场景。详细说明文档

49.图片拖拽AI抠图案例（0229更新）

本示例介绍图片AI抠图案例的使用：通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。详细说明文档

48.长列表滑动到指定列表项动效实现案例（0229更新）

本示例使用currentOffset方法获取并记录偏移量，然后使用scrollTo方法跳转到上次浏览记录功能，可以流畅滑动到上次列表的位置。详细说明文档

47.标题下拉缩放案例（0229更新）

本文以备忘录应用为示例，介绍如何在实现标题展开时继续下拉的动效。详细说明文档

46.使用绘制组件实现自定义进度动画（0229更新）

本示例介绍使用绘制组件中的Circle组件以及Path组件实现实时进度效果。该场景多用于手机电池电量、汽车油量、水位变化等动态变化中。详细说明文档

45.图片压缩方案（0229更新）

本示例介绍如何通过packing和scale实现图片压缩到指定大小以内。详细说明文档

44.Lottie动画（0229更新）

Lottie是一个适用于OpenHarmony的动画库，它可以解析Adobe After Effects软件通过Bodymovin插件导出的json格式的动画，并在移动设备上进行本地渲染，可以在各种屏幕尺寸和分辨率上呈现，并且支持动画的交互性，通过添加触摸事件或其他用户交互操作，使动画更加生动和具有响应性。详细说明文档