鸿蒙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')
    })

5、SaveButton使用注意事项

(1)报TEMPORARY_AUTHORIZATION_FAILED?
如果该按钮控件显示不全(给予的范围不够),可能会导致该错误

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容