网站体验分析,深圳网站建设知了网络,seo关键词是怎么优化的,鲜花网站建设图片【HarmonyOS】解决自定义弹框和键盘之间安全距离的问题
一、问题背景 我们在应用开发评论输入框时#xff0c;常规的需求样式是#xff1a;输入框view和键盘贴近#xff0c;上半部展示信息区的形式#xff0c;这样的设计#xff0c;方便用户不割裂的去评论发言。
但是在…【HarmonyOS】解决自定义弹框和键盘之间安全距离的问题
一、问题背景 我们在应用开发评论输入框时常规的需求样式是输入框view和键盘贴近上半部展示信息区的形式这样的设计方便用户不割裂的去评论发言。
但是在使用鸿蒙提供的自定义弹框时会发现键盘和弹框之间有个安全空隙。就算弹框布局是置底每次显示键盘都会将弹框顶上去。 自定义弹框源码
CustomDialog
Component
struct CustomDialogExample {Link textValue: stringLink 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 medialogController: 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: stringLink 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 medialogController: 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 })}
}
