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方式
从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')
})