HarmonyOS NEXT应用开发之侧滑返回事件拦截案例

介绍

在编辑场景中,存在用户误触返回,导致内容未保存就退出编辑页的现象; 本示例介绍使用NavDestination组件的onBackPressed回调对返回事件进行拦截,提示用户保存编辑内容,并使用preferences实例持久化保存内容。

效果预览图

使用说明

  1. 编辑状态侧滑返回弹出弹窗提醒用户是否保存。
  2. 点击弹窗空白区域,弹窗消失,继续编辑。
  3. 点击保存按钮,返回主页,保存用户编辑的数据,再次进入编辑页可在上次编辑的基础上再次编辑。

实现思路

  1. 因为功能是以har的形式集成在主工程中,没有@Entry修饰的组件,也无法作为入口组件,不能使用@Entry组件的onBackPress生命周期函数。

  2. 在使用方面onBackPressed是NavDestination自己的事件,需配合NavDestination组件使用; 且组件本身用于显示Navigation内容区,作为子页面的根容器,因此若拦截子页面的返回事件,可使用onBackPressed回调。

  3. onBackPress生命周期函数只能在@Entry组件中使用,因此若对入口组件的返回事件拦截可使用onBackPress生命周期函数。

  4. 通过NavDestination组件的onBackPressed回调对返回事件进行拦截;源码参考MainPage.ets

    // 应用主页用NavDestination承载,用于显示Navigation的内容区
    Navigation(this.pageStackForComponentSharedPages) {
    }
    .onAppear(() => {
    this.pageStackForComponentSharedPages.pushPathByName("MainPage", null, false);
    })
    // 创建NavDestination组件,需使用此组件的onBackPressed回调拦截返回事件
    .navDestination(this.textArea)

    复制代码
     @Builder textArea(name: string) {
       NavDestination() {
         Column() {
           TextArea({
             text: this.text,
             placeholder: 'input your word...',
             controller: this.controller
           })
             .onChange((value: string) => {
               this.text = value;
             })
         }
         .justifyContent(FlexAlign.Start)
         .width('100%')
         .height('100%')
     }
     .onBackPressed(() => {
         // 此处可添加拦截处理逻辑,然后return true放行
         return true
     }
    }

高性能知识点

不涉及

工程结构&模块类型

复制代码
sideslipintercept                                   // har类型
|---mainpage
|   |---Mainpage.ets                                // 视图层-组件页面 

模块依赖

本场景依赖了路由模块来注册路由

参考资料

navigation

NavDestination

@ohos.data.preferences (用户首选项)

为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05

《鸿蒙开发学习手册》:

如何快速入门:https://qr21.cn/FV7h05

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ......

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ......

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ......

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题

2.性能优化方向

3.架构方向

4.鸿蒙开发系统底层方向

5.鸿蒙音视频开发方向

6.鸿蒙车载开发方向

7.鸿蒙南向开发方向

相关推荐
不愿透露姓名的大鹏13 小时前
华为存储新增LUN存储到VMware集群
运维·服务器·华为·vmware·存储
lxysbly13 小时前
鸿蒙gba模拟器app下载
华为·harmonyos
左手厨刀右手茼蒿14 小时前
Flutter 三方库 firebase_admin 跨云边管线企业级鸿蒙管控底座适配风云:无障碍贯穿服务器授权防火墙打通底层生态授权域并构建海量设备推送集结-适配鸿蒙 HarmonyOS ohos
服务器·flutter·harmonyos
钛态14 小时前
Flutter for OpenHarmony:shelf_web_socket 快速构建 WebSocket 服务端,实现端到端实时通信(WebSocket 服务器) 深度解析与鸿蒙适配指南
服务器·前端·websocket·flutter·华为·性能优化·harmonyos
亚历克斯神14 小时前
Flutter 三方库 at_server_status 的鸿蒙化适配指南 - 在鸿蒙系统上构建极致、透明、实时的 @protocol 去中心化身份服务器状态感知与鉴权监控引擎
flutter·华为·harmonyos
木易 士心15 小时前
TypeScript 与 ArkTS 全面对比:鸿蒙生态下的语言演进
typescript·harmonyos
XHW___00115 小时前
鸿蒙音频通话应用后台保活与音频连续播放方案
华为·音视频·harmonyos
zzialx16 小时前
HarmonyOS:照片添加多样式的水印信息
华为·harmonyos
左手厨刀右手茼蒿17 小时前
Flutter 三方库 k_m_logic 的鸿蒙化适配指南 - 构建声明式的业务逻辑状态机、助力鸿蒙端复杂交互流程的解耦与重构
flutter·harmonyos·鸿蒙·openharmony·k_m_logic