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.鸿蒙南向开发方向

相关推荐
汉堡黄•᷄ࡇ•᷅43 分钟前
鸿蒙开发:案例集合List:ListItem拖拽(交换位置,过渡动画)(性能篇)
华为·harmonyos·鸿蒙·鸿蒙系统
500841 小时前
鸿蒙 Flutter 权限管理进阶:动态权限、权限组、兼容处理与用户引导
flutter·华为·架构·wpf·开源鸿蒙
HONG````1 小时前
鸿蒙应用动态文件读取全指南:从JSON、XML到文本文件的解析实战
华为·harmonyos
C雨后彩虹2 小时前
矩阵扩散问题
java·数据结构·算法·华为·面试
SunkingYang2 小时前
华为Mate 80系列全维度对比:从Mate 70到四版本差异解析
华为·手机·对比·80·mate·70
Mr_Hu4042 小时前
鸿蒙开发学习笔记-生命周期小记
笔记·学习·harmonyos·鸿蒙
汉堡黄2 小时前
鸿蒙开发:案例集合List:ListItem拖拽(交换位置,过渡动画)(性能篇)
harmonyos
500842 小时前
鸿蒙 Flutter 蓝牙与 IoT 开发进阶:BLE 设备连接、数据交互与设备管理
flutter·华为·electron·wpf·开源鸿蒙
kirk_wang3 小时前
Flutter 图表库 fl_chart 鸿蒙端适配实践
flutter·移动开发·跨平台·arkts·鸿蒙
食品一少年4 小时前
开源鸿蒙 PC · Termony 自验证环境搭建与外部 HNP 集成实践(DAY4-10)(2)
华为·harmonyos