【HarmonyOS】解决自定义弹框和键盘之间安全距离的问题
一、问题背景
我们在应用开发评论输入框时，常规的需求样式是：输入框view和键盘贴近，上半部展示信息区的形式，这样的设计，方便用户不割裂的去评论发言。
但是在使用鸿蒙提供的自定义弹框时，会发现键盘和弹框之间有个安全空隙。就算弹框布局是置底，每次显示键盘都会将弹框顶上去。
自定义弹框源码
dart
@CustomDialog
@Component
struct CustomDialogExample {
@Link textValue: string
@Link inputValue: string
controller?: CustomDialogController
cancel: () => 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.textValue
this.controller.close()
this.confirm()
}
}).backgroundColor(0xffffff).fontColor(Color.Red)
}.margin({ bottom: 10 })
}.borderRadius(10)
.height(px2vp(500))
.offset({ x: 0, y: 16})
}
}调用页面源码：
dart
@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)
源码示例：
自定义弹框源码
dart
@CustomDialog
@Component
struct CustomDialogExample {
@Link textValue: string
@Link inputValue: string
controller?: CustomDialogController
cancel: () => 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.textValue
this.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})
}
}调用页面源码：
dart
@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 })
}
}