HarmonyOS NEXT实战：管理避让区
原创
HarmonyOS NEXT实战：管理避让区
原创
##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##
参考资料：
https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-immersive#section813019373176
核心概念
避让区的显隐：
在页面显示或隐藏时，使用Window.setWindowLayoutFullScreen()方法设置窗口是否为全屏模式，使用Window.setWindowSystemBarEnable()方法设置状态栏和导航条显隐。
系统栏的属性设置：
setWindowSystemBarProperties(systemBarProperties: SystemBarProperties): Promise<void>设置主窗口状态栏的属性，使用Promise异步回调，该接口在2in1设备上调用不生效，其他设备在分屏模式（即窗口模式为window.WindowStatusType.SPLIT_SCREEN）、自由悬浮窗口模式（即窗口模式为window.WindowStatusType.FLOATING）、自由多窗模式（可点击设备控制中心中的自由多窗按钮开启）下调用不会立刻生效，只有进入全屏主窗口才会生效。
安全区域概念：
安全区域是指页面的显示区域，默认情况下开发者开发的界面都布局在安全区域内，不与系统设置的避让区比如状态栏、导航栏区域重叠。提供属性方法允许开发者设置组件绘制内容突破安全区域的限制，通过expandSafeArea属性支持组件不改变布局情况下扩展其绘制区域至安全区外，通过设置setKeyboardAvoidMode来配置虚拟键盘弹出时页面的避让模式。页面中有标题栏等文字不希望和避让区重叠时，建议对组件设置expandSafeArea属性实现沉浸式效果，也可以直接通过窗口接口setWindowLayoutFullScreen设置全屏沉浸式。
控制虚拟键盘抬起时页面的避让模式
接口：
setKeyboardAvoidMode(value: KeyboardAvoidMode): voidvalue：配置虚拟键盘抬起时页面的避让模式。
默认值：KeyboardAvoidMode.OFFSET，键盘抬起时默认避让模式为上抬。
说明
KeyboardAvoidMode.RESIZE模式会压缩页面大小，页面中设置百分比宽高的组件会跟随页面压缩，而直接设置宽高的组件会按设置的固定大小布局。设置KeyboardAvoidMode的RESIZE模式时，expandSafeArea(SafeAreaType.KEYBOARD,SafeAreaEdge.BOTTOM)不生效。
KeyboardAvoidMode.NONE模式配置页面不避让键盘，页面会被抬起的键盘遮盖。
KeyboardAvoidMode：配置键盘避让时页面的避让模式。属性即含义如下：
OFFSET：上抬模式。
RESIZE：压缩模式。
OFFSET_WITH_CARET：上抬模式，输入框光标位置发生变化时候也会触发避让。
RESIZE_WITH_CARET：压缩模式，输入框光标位置发生变化时候也会触发避让。
NONE： 不避让键盘。
代码实战示例：
import { common } from '@kit.AbilityKit';
import { window } from '@kit.ArkUI';
import { KeyboardAvoidMode } from '@kit.ArkUI';
@Entry
@Component
struct ManageAvoidZonePage {
context = this.getUIContext();
uiAbilityContext = this.context.getHostContext() as common.UIAbilityContext;
private windowClass = this.uiAbilityContext.windowStage.getMainWindowSync();
private keyboardAvoidMode = KeyboardAvoidMode.OFFSET
build() {
Column() {
Column({ space: 10 }) {
Text('ManageAvoidZone Page')
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button('hideSystemBar')
.onClick(() => {
this.hide()
})
Button('showSystemBar')
.onClick(() => {
this.show()
})
Button('setSystemBarBgBlack')
.onClick(() => {
let sysBarProps: window.SystemBarProperties = {
statusBarColor: '#000000',
statusBarContentColor: '#ffffff'
};
this.windowClass.setWindowSystemBarProperties(sysBarProps);
})
Button('setSystemBarBgWhite')
.onClick(() => {
let sysBarProps: window.SystemBarProperties = {
statusBarColor: '#ffffff',
statusBarContentColor: '#000000'
};
this.windowClass.setWindowSystemBarProperties(sysBarProps);
})
TextInput()
Button('changeKeyboardAvoidMode')
.onClick(() => {
if (this.keyboardAvoidMode === KeyboardAvoidMode.OFFSET) {
this.keyboardAvoidMode =KeyboardAvoidMode.RESIZE
this.getUIContext().setKeyboardAvoidMode(this.keyboardAvoidMode);
} else {
this.keyboardAvoidMode =KeyboardAvoidMode.OFFSET
this.getUIContext().setKeyboardAvoidMode(this.keyboardAvoidMode);
}
})
}
.width('100%')
Button('submit')
.margin(10)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.SpaceBetween)
.backgroundColor('#fffffae5')
}
hide() {
this.windowClass.setWindowLayoutFullScreen(true);
this.windowClass.setWindowSystemBarEnable([]);
}
show() {
this.windowClass.setWindowLayoutFullScreen(false);
this.windowClass.setWindowSystemBarEnable(['status', 'navigation']);
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
