问答专区-华为/鸿蒙开发者论坛-华为开发者联盟

本帖下方集中了HarmonyOS Next应用开发时，会遇到的常见应用案例。后续会持续更新大量案例，帮助开发者快速学习。我们同时归纳了一些常见的性能问题，并提供相应的解决方案，详情可参考应用开发性能指导总览。182. ArkUI Navigation组件全面解析：从基础导航到高级路由的实践（20250708更新）（点此查看源码实现）Navigation是ArkUI中的最核心路由组件，主要用于实现页面间的路由跳转。它既可以作为应用全局的导航容器，也可以作为局部的导航容器，在弹窗、模态等非全屏组件中使用。 ArkUI路由/导航系列文章通过详实的示例由浅入深地Step by Step介绍如何使用Navigation组件实现页面路由。181. 鸿蒙web白屏问题定位分享（20250708更新）（点此查看源码实现）Web页面出现白屏的原因众多，本文列举了若干常见白屏问题的排查步骤，供开发者快速定位。HarmonyOS NEXT开源组件市场HarmonyOS NEXT开源组件市场，是一个辅助开发者进行应用开发的工具，提供了丰富的鸿蒙开发组件，可以帮助开发者快速进行功能开发，提升开发效率。HarmonyOS NEXT应用开发案例集中的组件会逐步上架到组件市场中，开发者可通过组件市场获取鸿蒙组件，添加到业务代码中可以直接编译运行。预览效果如下：HarmonyOS NEXT开源组件市场是一个独立的插件，需通过DevEco Studio进行安装，无需解压，直接通过zip进行本地安装，也可以通过DevEco Studio（5.0.7.200）中的插件市场进行下载，具体安装和使用方法可参考HarmonyOS NEXT开源组件市场。180. 分享二维码按钮案例（20250206更新）（点此查看源码实现）本示例介绍如何在应用中，通过url自动生成二维码，并通过Share Kit的接口拉起系统分享。179. 智能填充案例（20250206更新）（点此查看源码实现）本示例介绍了使用智能填充自动补充表单的功能。该场景多用于需要使用多个填充相同表单的场景。178. 弹窗封装案例（20250206更新）（点此查看源码实现）本示例介绍如何封装弹窗，以及如何使用这种封装后的弹窗。177. 视频下载保存及剪辑压缩上传（20250206更新）（点此查看源码实现）本示例主要介绍从网上下载视频到相册，以及从相册中选择视频进行剪辑、压缩、以及上传到服务器进行保存。从相册中选择一个视频保存到沙箱中，再使用FFmpeg命令对沙箱中的视频进行压缩、剪辑。最后使用request.agent将剪辑后的视频上传到服务器进行保存。176. 解决相机预览花屏案例（20250206更新）（点此查看源码实现）本示例用于开发者在使用相机服务时，如果仅用于预览流展示，通常使用XComponent组件实现，如果需要获取每帧图像做二次处理（例如获取每帧图像完成二维码识别或人脸识别场景），可以通过ImageReceiver中imageArrival事件监听预览流每帧数据，解析图像内容。在解析图像内容时，如果未考虑stride，直接通过使用width*height读取图像内容去解析图像，会导致相机预览异常，从而出现相机预览花屏的现象。当预览流图像stride与width不一致时，需要对stride进行无效像素的去除处理。175. 多段混合数据展示案例（20250121更新）（点此查看源码实现）本示例介绍了如何使用WaterFlow组件展示多列不同数据，通过设置sections属性来配置不同数据的列间距、行间距等信息。174. 3D立方体旋转轮播实现案例（20250120更新）（点此查看源码实现）本示例展示了如何通过使用Swiper组件的customContentTransition属性和rotate属性实现3D立方体旋转轮播效果，增强用户交互体验。每次用户滑动轮播项时，都会展示生动的3D立方体旋转过渡效果。组件支持通过控制器对象动态更新轮播数据，包括添加、删除、替换等操作。173.人脸指纹解锁案例（20250120更新）（点此查看源码实现）本示例介绍了使用@ohos.userIAM.userAuth用户认证服务实现人脸或指纹识别的功能。该场景多用于需要人脸或指纹识别的安全场景。172.限制高度底部弹窗案例（20250120更新）（点此查看源码实现）本示例介绍了如何实现一个限制高度的底部弹窗，以购物应用的“我的”页面来呈现。当给一个底部弹窗的可滚动区域设置最大高度后，如果弹窗内部视图的高度超过了这个最大高度，弹窗可滚动区域的高度就是这个最大高度，视图内容不会展示完全，需要滚动查看；如果弹窗内部视图的高度没有超过这个最大高度，弹窗可滚动区域高度就是视图的高度，视图内容展示完全。171.多重筛选案例（20250114更新）（点此查看源码实现）本示例主要介绍多重筛选场景，利用数组方法过滤满足条件的数据，利用LazyForEach实现列表信息的渲染以及刷新。170.网络状态监听案例（20250109更新）（点此查看源码实现）本示例介绍如何使用@kit.NetworkKit接口监听手机网络状态，根据不同的网络状态对视频进行播放、暂停处理等操作。169.悬浮工具箱案例（20250103更新）（点此查看源码实现）本示例介绍使用zIndex、gesture等接口实现悬浮工具箱效果168.直播界面双击效果动画实现案例案例（1223更新）（点此查看源码实现）本示例展示了如何通过使用LazyForEach和组件内转场 (transition)实现双击或连续快速点击时的图标动画效果，增强用户交互体验。每次用户双击或连续快速点击特定区域时，都会动态显示图标并带有生动的动画效果，如图标放大淡出或向上移动淡出等。167.视频截取gif图案例（1202更新）（点此查看源码实现）本示例介绍了如何截取视频的一段内容制作gif图片。该场景多出现在长视频类应用。使用FFmpeg命令对视频进行截取gif图。166.自定义地址选择组件案例（1202更新）（点此查看源码实现）本示例介绍如何使用bindSheet，changeIndex，onAreaChange实现带切换动效的自定义地址选择组件。165.用户隐私协议案例（1202更新）（点此查看源码实现）本示例介绍使用web组件加载用户协议、隐私协议等场景。该场景多用于应用类协议展示。164.文件压缩案例（1112更新）（点此查看源码实现）本示例介绍在Worker子线程使用@ohos.zlib提供的zlib.compressfile接口对沙箱目录中的文件进行压缩操作，压缩成功后将压缩包所在路径返回主线程，获取压缩文件列表。 163.桌面卡片实现案例（1111更新）（点此查看源码实现）桌面卡片是比较常见的功能，本案例详细列举了卡片开发的大部分功能，如使用postCardAction接口快速拉起卡片提供方应用的指定UIAbility，通过message事件刷新卡片内容等，为开发者提供了卡片功能的展示。 162.地图定位打卡案例（1107更新）（点此查看源码实现）本示例使用geoLocationManager进行地理位置定位和地理信息获取，并利用MapComponent组件展示地图，添加用户位置和打卡范围，通过计算用户位置和打卡中心点的距离判断用户是否处于打卡区域，实现了打卡功能。161.视频悬浮窗案例（1107更新）（点此查看源码实现）本示例主要介绍视频小窗口播放场景，利用媒体的AVPlayer实现视频播放以及相关操作，利用PiPWindow开启悬浮窗从而实现小窗口播放视频。160.文本选择菜单案例（1105更新）（点此查看源码实现）本案例拓展富文本组件文字选择菜单选项，通过富文本组件editMenuOptions属性添加自定义选择菜单，在编辑文字时选择更多选项打开额外菜单栏。159.图片分享案例（1105更新）（点此查看源码实现）本示例介绍使用Share Kit和ShareExtensionAbility实现从图库分享图片到应用的场景。该场景多用于聊天类应用。158.背景模糊效果的自定义TabBar实现案例（1104更新）（点此查看源码实现）在一些主页的场景中，为了实现更好的视觉体验，会给TabBar加上透明的背景模糊效果。本示例主要讲解如何使用系统提供的背景设置的能力，实现背景模糊的效果。157.Scroll容器嵌套多种组件事件处理案例（1101更新）（点此查看源码实现）本示例适用于Scroll容器嵌套多组件事件处理场景：当需要一个父容器Scroll内嵌套web、List，当父子的滚动手势冲突时，此时希望父容器的滚动优先级最高，即实现子组件的偏移量都由父容器统一派发，实现滚动任一子组件流畅滚动到父容器顶/底的效果。例如本案例的新闻浏览界面，父组件Scroll嵌套了新闻内容与评论区（Web实现新闻内容，List实现评论区），通过禁用web和list组件滚动手势，再由父组件Scroll统一计算派发偏移量，达到一种web的滚动和list组件滚动能无缝衔接，像同一个滚动组件滚动效果。156.沉浸式适配案例（1031更新）（点此查看源码实现）开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感，从而使用户获得最佳的UI体验。本案例分别针对Navigation、列表滑动、Web页、底部弹框等场景实现了沉浸式适配。155.多媒体发布案例（1028更新）（点此查看源码实现）本示例主要介绍使用@ohos.file.photoAccessHelper实现访问系统相册获取媒体资源的多媒体发布场景。该场景多用于社交软件朋友圈、评论动态发布的场景。154.地图大头针选择位置并显示弹窗组件案例（1028更新）（点此查看源码实现）本示例提供了大头针选择位置并显示弹窗组件的解决方案。153.图形锁屏案例案例（1028更新）（点此查看源码实现）本示例介绍使用图案密码锁组件与振动接口实现图形锁屏场景。该场景多用于桌面及系统类应用。152.组件随软键盘弹出避让案例（1028更新）（点此查看源码实现）本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。151.自定义动效tab（1009更新）（点此查看源码实现）本示例介绍使用List、Text等组件，以及animateTo等接口实现自定义Tab效果。150.人脸识别验证案例（0930更新）（点此查看源码实现）本示例介绍使用VisionKit(视觉服务)实现活体检测，使用CryptoArchitectureKit(加解密算法框架服务)实现加解密。149.折叠面板案例（0930更新）（点此查看源码实现）本示例通过定义层级实现多层折叠面板，并在首页性能文章tab实际使用跳转到对应文章的web页面。148.HEIF软解码器案例（0930更新）（点此查看源码实现）本示例介绍将libheif编译移植到鸿蒙平台，通过网络库curl请求HEIF图片资源、libheif软解码HEIF图片，最后在瀑布流中加载解码后的HEIF图片的过程。147.自定义性能脚本测试（0930更新）（点此查看源码实现）本模块通过HarmonyOS平台上的UI自动化测试框架DevEco Testing Hypium执行自定义性能测试脚本。146.启动页实现案例（0930更新）（点此查看源码实现）本示例介绍了使用资源匹配规则实现不同分辨率冷启动应用图标适配和启动广告页的实现。145.H5页面资源离线缓存案例（0930更新）（点此查看源码实现）本模块通过Web组件的oninterceptrequest接口，结合内存缓存和磁盘缓存实现了一个H5页面资源离线缓存案例。144.AI图片文字智能识别案例（0930更新）（点此查看源码实现）本示例使用CoreVisionKit智能识别图片中的文字，并使用NaturalLanguageKit自然语言处理工具集将识别的文字智能转换为姓名、手机、地址等信息。143.群头像拼接案例（0929更新）（点此查看源码实现）本示例主要介绍新建会话的场景，利用嵌套线性布局拼接群头像组件，利用@ohos.arkui.componentSnapshot (组件截图)接口获取群头像组件截图并在会话列表中展示。142.横向纵向列表联动案例（0929更新）（点此查看源码实现）本案例展示了主要通过List组件绑定Scroller滚动控制器和LazyForEach数据懒加载来实现纵向横向列表联动，多用于汽车参数对比，股票信息查看。141.状态栏动画实现案例（0928更新）（点此查看源码实现）本案例展示了状态栏的动态交互效果。通过监听页面滚动事件 onDidScroll，随着页面的上下滚动，实现状态栏颜色的变化。搜索框会在滚动时流畅地展开或收起，并伴有自然的透明度过渡效果。140.自定义TabBar页签凸起和凹陷案例（0923更新）（点此查看源码实现）本文基于已有的模块《自定义TabBar》思路，完善了凸起的选择时凸起点交界处的圆滑过度，并扩展了一个凹陷选择时不遮挡原本内容。感谢贡献者https://gitee.com/NucleusUI为大家提供此案例~139.编辑收货地址案例（0923更新）（点此查看源码实现）本示例多用于表单填写场景：其中通过使用TextPicker滑动选择文本内容组件实现三级联动选择省市区，并回填到输入框。138.视频横竖屏切换及进度条热区拖动（0915更新）（点此查看源码实现）本示例介绍了@ohos.multimedia.media组件和@ohos.window接口以及使用触摸热区实现视频横竖屏切换及进度条热区拖动的功能。该场景多用于横竖屏视频等媒体播放。137.滑动视频自动播放（0912更新）（点此查看源码实现）本示例主要介绍视频列表滑动到屏幕中间自动播放场景，利用onScrollIndex获取List显示区域内中间子组件索引值的能力来判断播放，利用懒加载场景会预加载List显示区域外cachedCount的内容的能力来实现视频连续播放。136.自定义装饰器（0911更新）（点此查看源码实现）本示例介绍通过自定义装饰器在自定义组件中自动添加inspector (布局回调)方法并进行调用。135.使用ArkUI的FrameNode扩展实现动态布局类框架（0911更新）（点此查看源码实现）本示例是使用ArkUI的FrameNode扩展实现动态布局类框架的示例代码，主要讲解如何使用ArkUI的FrameNode扩展实现动态布局类框架。134.蓝牙实现服务端和客户端通讯（0911更新）（点此查看源码实现）本示例分为服务端和客户端两个功能模块。服务端创建蓝牙服务实例，并添加心率跳动服务。客户端以特定服务UUID作为过滤条件扫描服务端，收到服务端该特征值变动的通知消息。133.橡皮擦案例（0906更新）（点此查看源码实现）本示例通过@ohos.graphics.drawing库和blendMode颜色混合实现了橡皮擦功能，能够根据手指移动轨迹擦除之前绘制的内容，并且可以进行图案的撤销和恢复。132.日历切换案例（0903更新）（点此查看源码实现）本示例介绍使用Swiper实现自定义日历年视图、月视图、周视图左右滑动切换年、月、周的效果。同时使用Tabs实现年视图、月视图、周视图之间的切换效果。还有使用Calendar Kit日历服务实现日程提醒的功能。131.图片编辑实现马赛克效果（0831更新）（点此查看源码实现）本示例将原图手指划过的区域分割成若干个大小一致的小方格，然后获取每个小方格中的像素点的平均色彩数值，使用获取到的平均色彩数值替换该方格中所有的像素点。最后使用createPixelMapSync接口将新的像素点数据写入图片，即可实现原始图片的局部马赛克处理。130.画笔调色板案例（0827更新）（点此查看源码实现）本示例实现了一个网格渐变的画笔调色板，能够根据给定的 HSL 类型颜色和色阶数，按亮度生成渐变色，用户可以通过调色板选择颜色并在画布上绘制路径。129.骨架屏实现案例（0824更新）（点此查看源码实现）本示例介绍通过骨架屏提升加载时用户体验的方法。骨架屏用于在页面数据加载完成前，先给用户展示出页面的大致结构（通常以灰色或其他浅色系的占位图形式呈现），待接口数据加载完成后，再渲染出实际页面内容并替换掉骨架屏。通过网络接口返回的状态改变 loadingCollectedStatus 值，动态切换页面内容：初始显示骨架屏（LoadingView）；成功且有数据则显示列表页（ListView）；数据为空显示无数据页（NoneContentView）；加载失败则显示失败页（LoadingFailedView）。128.组件集合案例（0812更新）（点此查看源码实现）本示例外层为展开收起的长列表，内层是ArkUI中组件、通用、动画、全局方法的示例代码，主要展示长列表展开收起的使用和多种ArkUI的示例。 127.发短信案例（0709更新）（点此查看源码实现）本示例介绍如何在应用中调起系统短信，通过startAbility接口中的指定号码并调起系统的发送短信页面。126.TaskPool线程中操作关系型数据库实现案例（0709更新）（点此查看源码实现）本示例通过通讯录场景实例进行讲解，介绍了在 TaskPool 线程中操作关系型数据库的方法，涵盖了单条插入（新增联系人）、批量插入（通讯录同步）、删除（删除联系人）、修改（更新联系人信息）和查询等基本操作。125.自定义组件复用池文章示例代码（0709更新）（点此查看源码实现）本示例是《全局自定义组件复用实现》的示例代码，主要讲解如何通过BuilderNode创建全局的自定义组件复用池，实现跨页面的组件复用。124.H5页面调用自定义输入法案例（0617更新）（点此查看源码实现）本示例介绍了Web场景中使用CustomDialog接口实现H5页面调用自定义输入法的功能。该场景多用于浏览器需要使用安全输入法时。123.NavDestination弹窗（0617更新）（点此查看源码实现）本案例介绍了使用NavDestination组件的Dialog模式实现与前一个页面的联动的评论弹窗。122.视频卡片和列表区域的联动滚动（0603更新）（点此查看源码实现）本示例使用Scroll和List组件嵌套，通过List组件的滚动控制器和nestedScroll属性实现了视频卡片和列表区域的联动滚动场景。121.合理处理高负载组件的渲染文章示例代码（0603更新）（点此查看源码实现）主要讲解如何通过DisplaySync优化高负载组件的渲染，减少丢帧情况的发生。120.搜索框热搜词自动滚动（0527更新）（点此查看源码实现）本示例介绍使用TextInput组件与Swiper组件实现搜索框内热搜词自动切换。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.timeline时间轴下拉刷新效果（0423更新）（点此查看源码实现）本示例介绍使用PullToRefresh、List等组件、onAreaChange事件，实现时间轴下拉刷新效果。103.定制HAP多目标构建产物（0419更新）（点此查看源码实现）本案例展示如何将工程打包成不同版本，并单独配置资源文件。102.表情聊天案例（0419更新）（点此查看源码实现）本示例主要介绍如何在聊天信息中加入表情图片。通过使用CustomDialog创建表情键盘对话框，使用RichEdit接收所选表情的ImageSpan。在发送信息时将图片和文字消息分别通过ImageSpan、Span加入到消息列表中，显示的时候将消息列表中的ImageSpan、Span包裹在Text中进行显示。101.Web页面长截图（0419更新）（点此查看源码实现）本案例实现了Web组件中网页长截图的方案。支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。100.音乐播放转场一镜到底效果实现（0419更新）（点此查看源码实现）音乐播放的Mini条播放栏在转场时的一镜到底动画是音乐播放器应用开发中常见的需求。本示例将介绍如何实现Mini条的一镜到底动画，如Mini条歌曲封面的缩放动画，Mini条的展开收起动画等。 99.tabContent内容可以在tabBar上显示并响应滑动事件案例（0418更新）（点此查看源码实现）本示例实现了tabContent内容可以在tabBar上显示并且tabBar可以响应滑动事件的功能。 98.使用预渲染实现Web页面瞬开效果实践（0418更新）（点此查看源码实现）为了便于大家在使用本案例集时能够更详细的了解各个案例，本案例基于Web预渲染实现了案例介绍功能，即在大部分案例右上角的问号icon。 97.XComponent + Vsync 实现自定义动画（0418更新）（点此查看源码实现）XComponent 提供了应用在 native 侧调用 OpenGLES 图形接口的能力，本文主要介绍如何配合 Vsync 事件，完成自定义动画。在这种实现方式下，自定义动画的绘制不在 UI 主线程中完成，即使主线程卡顿，动画效果也不会受影响。96.Canvas实现模拟时钟案例（0418更新）（点此查看源码实现）本示例介绍利用Canvas和定时器实现模拟时钟场景，该案例多用于用户需要显示自定义模拟时钟的场景。95.Grid和List内拖拽交换子组件位置（0417更新）（点此查看源码实现）本示例分别通过onItemDrop()和onDrop()回调，实现子组件在Grid和List中的子组件位置交换。此案例目前已有动效升级版，请参考：列表项交换案例、网格元素交换案例。 94.视频弹幕功能（0417更新）（点此查看源码实现）本示例介绍如何使用@ohos.danmakuflamemaster和@ohos.gsyvideoplayer开发支持视频弹幕的播放器。可以自定义弹幕样式、占据屏幕宽度，发送弹幕，开关弹幕视图。93.悬浮窗拖拽和吸附动画（0417更新）（点此查看源码实现）本示例使用position绝对定位实现应用内悬浮窗，并且通过animateTo结合curves动画曲线实现悬浮窗拖拽跟手和松手吸附边缘的弹性动画效果。92.Web自定义长按菜单案例（0411更新）（点此查看源码实现）本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。91.阅读翻页方式案例（0411更新）（点此查看源码实现）本示例展示手机阅读时左右翻页，上下翻页，覆盖翻页、文本朗读、字体变小、背景颜色、阅读背景的功能。由于篇幅、链接等限制，无法在一篇文章维护，1-70号案例已归档到：HarmonyOS Next应用开发案例(更多案例归档)，其中71-90号案例已归档。

回车切换到下一个输入框.三个核心方法:setUserNextFocus(int side, int id); // 设置下一个要切换的光标位置 findRequestNextFocus(int side); // 切换到下一个要切换光标位置 Component.KeyEventListener; // 监听键盘输入这里的setUserNextFocus的第一个参数,有很多:FOCUS_SIDE_LEFT, FOCUS_SIDE_TOP, FOCUS_SIDE_RIGHT, FOCUS_SIDE_BOTTOM,FOCUS_NEXT, FOCUS_PREVIOUS此处用FOCUS_NEXT实现.直接上代码.public class MainAbilitySlice extends AbilitySlice implements Component.KeyEventListener { private static final HiLogLabel LABEL = new HiLogLabel(HiLog.INFO, 0x000110, "KeyEventListener"); // 输入框 private TextField storeKey; private TextField storeValue; private TextField getDataKey; private TextField removeDataKey; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); initButton(); } private void initButton() { storeKey = (TextField) findComponentById(ResourceTable.Id_store_data_key); storeValue = (TextField) findComponentById(ResourceTable.Id_store_data_value); getDataKey = (TextField) findComponentById(ResourceTable.Id_get_data_key); removeDataKey = (TextField) findComponentById(ResourceTable.Id_remove_data_key); storeKey.setUserNextFocus(Component.FOCUS_NEXT, ResourceTable.Id_store_data_value); storeValue.setUserNextFocus(Component.FOCUS_NEXT, ResourceTable.Id_get_data_key); getDataKey.setUserNextFocus(Component.FOCUS_NEXT, ResourceTable.Id_remove_data_key); // storeKey.setKeyEventListener((c,k)->{ // System.out.println("KeyEventListener 按键事件触发"); // // HiLog.info(LABEL,"按键事件触发"); // if(c.hasFocus()) // { // //如果不增加该判断则会触发两次 // if(k.isKeyDown()){ // System.out.println("KeyEventListener " + k.getKeyCode() + " 键按下"); // HiLog.info(LABEL,"回车键按下"); // if (k.getKeyCode() == k.KEY_ENTER) { // // storeValue.setUserNextFocus(Component.FOCUS_NEXT, ResourceTable.Id_store_data_value); // HiLog.info(LABEL, "按了回车键"); // } // } // } // return false; // }); storeKey.setKeyEventListener(this::onKeyEvent); storeValue.setKeyEventListener(this::onKeyEvent); getDataKey.setKeyEventListener(this::onKeyEvent); } @Override public boolean onKeyEvent(Component component, KeyEvent keyEvent) { HiLog.info(LABEL,"按键事件触发"); if (checkFocus(keyEvent, storeKey)) { return true; } else if (checkFocus(keyEvent, storeValue)) { return true; } else if (checkFocus(keyEvent, getDataKey)) { return true; } return false; } private boolean checkFocus(KeyEvent keyEvent,TextField textField) { if (textField.hasFocus()) { // 如果不增加该判断则会触发两次 if(keyEvent.isKeyDown()){ if (keyEvent.getKeyCode() == keyEvent.KEY_ENTER) { textField.findRequestNextFocus(Component.FOCUS_NEXT); } return true; } } return false; } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } }xml<?xml version="1.0" encoding="utf-8"?> <DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <TextField ohos:id="$+id:store_data_key" ohos:height="match_content" ohos:width="match_parent" ohos:basement="#9e9e9e" ohos:focus_border_width="1px" ohos:hint="key" ohos:text_size="50" ohos:padding="50" /> <TextField ohos:id="$+id:store_data_value" ohos:height="match_content" ohos:width="match_parent" ohos:basement="#9e9e9e" ohos:focus_border_width="1px" ohos:hint="value" ohos:text_size="50" ohos:padding="50" /> <TextField ohos:id="$+id:get_data_key" ohos:height="match_content" ohos:width="match_parent" ohos:basement="#9e9e9e" ohos:focus_border_width="1px" ohos:hint="key2" ohos:text_size="50" ohos:padding="50" /> <TextField ohos:id="$+id:remove_data_key" ohos:height="match_content" ohos:width="match_parent" ohos:basement="#9e9e9e" ohos:focus_border_width="1px" ohos:hint="key3" ohos:text_size="50" ohos:padding="50" /> </DirectionalLayout>

社区

社区

HarmonyOS 5

HarmonyOS 6

DevEco Studio

UI

HarmonyOS

ArkUI (方舟UI框架)

HarmonyOS 7

App开发

Ability框架