【HarmonyOS】解决自定义弹框和键盘之间安全距离的问题

【HarmonyOS】解决自定义弹框和键盘之间安全距离的问题

一、问题背景

我们在应用开发评论输入框时，常规的需求样式是：输入框view和键盘贴近，上半部展示信息区的形式，这样的设计，方便用户不割裂的去评论发言。

但是在使用鸿蒙提供的自定义弹框时，会发现键盘和弹框之间有个安全空隙。就算弹框布局是置底，每次显示键盘都会将弹框顶上去。

自定义弹框源码

@CustomDialog
@Component
struct CustomDialogExample {@Link textValue: string@Link inputValue: stringcontroller?: CustomDialogControllercancel: () => void = () => {}confirm: () => void = () => {}build() {Column() {TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%').onChange((value: string) => {this.textValue = value}).defaultFocus(true)Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('cancel').onClick(() => {if (this.controller != undefined) {this.controller.close()this.cancel()}}).backgroundColor(0xffffff).fontColor(Color.Black)Button('confirm').onClick(() => {if (this.controller != undefined) {this.inputValue = this.textValuethis.controller.close()this.confirm()}}).backgroundColor(0xffffff).fontColor(Color.Red)}.margin({ bottom: 10 })}.borderRadius(10).height(px2vp(500)).offset({ x: 0, y: 16}) }
}

调用页面源码：

@Entry
@Component
struct TextPage {@State textValue: string = ''@State inputValue: string = 'click me'dialogController: CustomDialogController | null = new CustomDialogController({builder: CustomDialogExample({cancel: ()=> { this.onCancel() },confirm: ()=> { this.onAccept() },textValue: $textValue,inputValue: $inputValue}),cancel: this.exitApp,autoCancel: true,onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {console.info("reason=" + JSON.stringify(dismissDialogAction.reason))console.log("dialog onWillDismiss")if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {dismissDialogAction.dismiss()}if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {dismissDialogAction.dismiss()}},keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,alignment: DialogAlignment.Bottom,// offset: { dx: 0, dy: -20 },gridCount: 4,customStyle: false,cornerRadius: 10,backgroundColor: Color.Black})// 在自定义组件即将析构销毁时将dialogController置空aboutToDisappear() {this.dialogController = null // 将dialogController置空}onCancel() {console.info('Callback when the first button is clicked')}onAccept() {console.info('Callback when the second button is clicked')}exitApp() {console.info('Click the callback in the blank area')}build() {Column() {Button(this.inputValue).onClick(() => {if (this.dialogController != null) {this.dialogController.open()}}).backgroundColor(0x317aff)}.width('100%').margin({ top: 5 })}
}

二、解决方案

了解安全弹框的问题，需要对自定义弹框的实现有比较深刻的认识才能规避。

首先我们要搞清楚，自定义弹框的基本用法，会发现在CustomDialogExample中，build是弹框布局的具体样式的一部分，在调用页面TextPage ，其实也会设置弹框的一些样式属性，例如：customStyle。

这是系统系统的基本样式，如果customStyle该属性为false，那我们的弹框样式，只需要关心弹框内的布局，整个弹框外围是交给系统定制样式处理。

所以当我们设置customStyle该属性为true，就会发现弹框view会贴合键盘，但是整体弹框的边框都没了。

此时我们只需要处理边框样式和弹框背景色即可：
.borderRadius(15)
.backgroundColor(Color.White)
.borderWidth(5)

源码示例：

自定义弹框源码

@CustomDialog
@Component
struct CustomDialogExample {@Link textValue: string@Link inputValue: stringcontroller?: CustomDialogControllercancel: () => void = () => {}confirm: () => void = () => {}build() {Column() {TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%').onChange((value: string) => {this.textValue = value}).defaultFocus(true)Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })Flex({ justifyContent: FlexAlign.SpaceAround }) {Button('cancel').onClick(() => {if (this.controller != undefined) {this.controller.close()this.cancel()}}).backgroundColor(0xffffff).fontColor(Color.Black)Button('confirm').onClick(() => {if (this.controller != undefined) {this.inputValue = this.textValuethis.controller.close()this.confirm()}}).backgroundColor(0xffffff).fontColor(Color.Red)}.margin({ bottom: 10 })}.width("90%").borderRadius(15).backgroundColor(Color.White).borderWidth(5).height(px2vp(500)).offset({ x: 0, y: 16})}
}

调用页面源码：

@Entry
@Component
struct TextPage {@State textValue: string = ''@State inputValue: string = 'click me'dialogController: CustomDialogController | null = new CustomDialogController({builder: CustomDialogExample({cancel: ()=> { this.onCancel() },confirm: ()=> { this.onAccept() },textValue: $textValue,inputValue: $inputValue}),cancel: this.exitApp,autoCancel: true,onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {console.info("reason=" + JSON.stringify(dismissDialogAction.reason))console.log("dialog onWillDismiss")if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {dismissDialogAction.dismiss()}if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {dismissDialogAction.dismiss()}},keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,alignment: DialogAlignment.Bottom,gridCount: 4,customStyle: true,cornerRadius: 10,backgroundColor: Color.Black})// 在自定义组件即将析构销毁时将dialogController置空aboutToDisappear() {this.dialogController = null // 将dialogController置空}onCancel() {console.info('Callback when the first button is clicked')}onAccept() {console.info('Callback when the second button is clicked')}exitApp() {console.info('Click the callback in the blank area')}build() {Column() {Button(this.inputValue).onClick(() => {if (this.dialogController != null) {this.dialogController.open()}}).backgroundColor(0x317aff)}.width('100%').margin({ top: 5 })}
}