鸿蒙next开发学习笔记:小技巧-持续记录

1、软键盘弹出,导致页面整体上移,或者是布局错乱了?

解决方法也简单,给不想被键盘影响的组件,增加以下代码:

//组件增加expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]) 调用即可解决
// 以Row为例
Row() {
  .....组件内容
}
.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])

2、点击空白处,收起键盘?

目前没有找到别的方法,只能在页面最外层的组件,增加onClick方法,然后调用系统全局方法inputMethod.getController().stopInputSession()


// 以Row为例
Row() {
  .....组件内容
}
.onClick(() => {
      inputMethod.getController().stopInputSession()
    })

3、跨模块路由跳转,Navgaiton方式

参考官方文档
官网文档demo地址

从API version 12开始,Navigation支持使用系统路由表的方式进行动态路由。各业务模块(HSP/HAR)中需要独立配置route_map.json文件,在触发路由跳转时,应用只需要通过NavPathStack提供的路由方法,传入需要路由的页面配置名称,此时系统会自动完成路由模块的动态加载、页面组件构建,并完成路由跳转,从而实现了开发层面的模块解耦。系统路由表不支持预览器,跨平台及模拟器。其主要步骤如下

//在跳转目标模块的配置文件module.json5添加路由表配置:
  {
    "module" : {
      "routerMap": "$profile:route_map"
    }
  }
//添加完路由配置文件地址后,需要在工程resources/base/profile中创建route_map.json文件。添加如下配置信息:
  {
    "routerMap": [
      {
        "name": "PageOne",
        "pageSourceFile": "src/main/ets/pages/PageOne.ets",
        "buildFunction": "PageOneBuilder",
        "data": {
          "description" : "this is PageOne"
        }
      }
    ]
  }
配置说明如下:
配置项 说明
name    跳转页面名称。
pageSourceFile  跳转目标页在包内的路径,相对src目录的相对路径。
buildFunction   跳转目标页的入口函数名称,必须以@Builder修饰。
data    应用自定义字段。可以通过配置项读取接口getConfigInRouteMap获取。
在跳转目标页面中,需要配置入口Builder函数,函数名称需要和route_map.json配置文件中的buildFunction保持一致,否则在编译时会报错。
  // 跳转页面入口函数
  @Builder
  export function PageOneBuilder() {
    PageOne()
  }

  @Component
  struct PageOne {
    pathStack: NavPathStack = new NavPathStack()

    build() {
      NavDestination() {
      }
      .title('PageOne')
      .onReady((context: NavDestinationContext) => {
         this.pathStack = context.pathStack
      })
    }
  }
通过pushPathByName等路由接口进行页面跳转。(注意:此时Navigation中可以不用配置navDestination属性)。
  @Entry
  @Component
  struct Index {
    pageStack : NavPathStack = new NavPathStack();

    build() {
      Navigation(this.pageStack){
      }.onAppear(() => {
        this.pageStack.pushPathByName("PageOne", null, false);
      })
      .hideNavBar(true)
    }
  }

4、NavDestination生命周期

.onWillAppear(() => {
      console.log('1 onWillAppear 创建时调用')
    })
    .onReady((ctx) => {
      console.log('2 onReady 创建时调用')
      this.navPathStack = ctx.pathStack
    })
    .onAttach(() => {
      console.log('3 onAttach 创建时调用')
    })
    .onAppear(() => {
      console.log('4 onAppear 创建时调用')
    })
    .onWillShow(() => {
      console.log('5 onWillShow 创建时调用/pop回来时调用')
    })
    .onShown(() => {
      console.log('6 onShown 创建后第一次展出时调用/后台进入前台时调用/pop回来时调用(注意会先调onWillShow)')
    })
    .onWillHide(() => {
      console.log('onWillHide push进入下一页时调用/从当前页pop出去时调用')
    })
    .onHidden(() => {
      console.log('onHidden 前台进入后台时调用/页面销毁时调用/push进入下一页或从当前页pop出去时调用(注意会先调onWillHide)')
    })
    .onWillDisappear(() => {
      console.log('7 onWillDisappear 页面销毁时调用')
    })

    .onDetach(() => {
      console.log('8 onDetach')
    })
    .onBackPressed(() => {
      console.log('onBackPressed')
      return true
    })

A页面push到B页面,A页面和B页面各自会调用哪些生命周期方法?

(1)先调B页面以下方法

.onWillAppear(() => {
      console.log('1 onWillAppear 创建时调用')
    })
    .onReady((ctx) => {
      console.log('2 onReady 创建时调用')
      this.navPathStack = ctx.pathStack
    })
    .onAttach(() => {
      console.log('3 onAttach 创建时调用')
    })

(2)再调A页面以下方法

.onWillHide(() => {
      console.log('onWillHide push进入下一页时调用/从当前页pop出去时调用')
    })

(3)再调B页面以下方法

.onAppear(() => {
      console.log('4 onAppear 创建时调用')
    })
    .onWillShow(() => {
      console.log('5 onWillShow 创建时调用/pop回来时调用')
    })

(4)再调A页面以下方法

  .onHidden(() => {
      console.log('onHidden 前台进入后台时调用/页面销毁时调用/push进入下一页或从当前页pop出去时调用(注意会先调onWillHide)')
    })

(5)最后调B页面以下方法

  .onShown(() => {
      console.log('6 onShown 创建后第一次展出时调用/后台进入前台时调用/pop回来时调用(注意会先调onWillShow)')
    })

从B页面pop到A页面,A页面和B页面各自会调用哪些生命周期方法?

(1)先调B页面以下方法

 .onWillHide(() => {
      console.log('onWillHide push进入下一页时调用/从当前页pop出去时调用')
    })

(2)再调A页面以下方法

 .onWillShow(() => {
      console.log('5 onWillShow 创建时调用/pop回来时调用')
    })

(3)再调B页面以下方法

.onHidden(() => {
      console.log('onHidden 前台进入后台时调用/页面销毁时调用/push进入下一页或从当前页pop出去时调用(注意会先调onWillHide)')
    })
    .onWillDisappear(() => {
      console.log('7 onWillDisappear 页面销毁时调用')
    })

(4)再调A页面以下方法

.onShown(() => {
      console.log('6 onShown 创建后第一次展出时调用/后台进入前台时调用/pop回来时调用(注意会先调onWillShow)')
    })

(5)最后再调B页面以下方法

.onDetach(() => {
      console.log('8 onDetach')
    })
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,755评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,369评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,799评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,910评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,096评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,159评论 3 411
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,917评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,360评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,673评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,814评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,509评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,156评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,123评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,641评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,728评论 2 351

推荐阅读更多精彩内容