【HarmonyOS NEXT】解决自界说弹框和键盘之间安全隔断的问题 ...

【HarmonyOS NEXT】解决自界说弹框和键盘之间安全隔断的问题

一、问题背景

我们在应用开辟批评输入框时，常规的需求样式是：输入框view和键盘贴近，上半部展示信息区的形式，这样的计划，方便用户不割裂的去批评发言。
但是在利用鸿蒙提供的自界说弹框时，会发现键盘和弹框之间有个安全安定。就算弹框结构是置底，每次表现键盘都会将弹框顶上去。

自界说弹框源码

1. @CustomDialog
2. @Component
3. struct CustomDialogExample {
4.   @Link textValue: string
5.   @Link inputValue: string
7.   controller?: CustomDialogController
8.   cancel: () => void = () => {
9.   }
10.   confirm: () => void = () => {
11.   }
13.   build() {
14.     Column() {
15.       TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
16.         .onChange((value: string) => {
17.           this.textValue = value
18.         })
19.         .defaultFocus(true)
20.       Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
21.       Flex({ justifyContent: FlexAlign.SpaceAround }) {
22.         Button('cancel')
23.           .onClick(() => {
24.             if (this.controller != undefined) {
25.               this.controller.close()
26.               this.cancel()
27.             }
28.           }).backgroundColor(0xffffff).fontColor(Color.Black)
29.         Button('confirm')
30.           .onClick(() => {
31.             if (this.controller != undefined) {
32.               this.inputValue = this.textValue
33.               this.controller.close()
34.               this.confirm()
35.             }
36.           }).backgroundColor(0xffffff).fontColor(Color.Red)
37.       }.margin({ bottom: 10 })
39.     }.borderRadius(10)
40.     .height(px2vp(500))
41.     .offset({ x: 0, y: 16})
42.   }
43. }

复制代码

调用页面源码：

1. @Entry
2. @Component
3. struct TextPage {
4.   @State textValue: string = ''
5.   @State inputValue: string = 'click me'
6.   dialogController: CustomDialogController | null = new CustomDialogController({
7.     builder: CustomDialogExample({
8.       cancel: ()=> { this.onCancel() },
9.       confirm: ()=> { this.onAccept() },
10.       textValue: $textValue,
11.       inputValue: $inputValue
12.     }),
13.     cancel: this.exitApp,
14.     autoCancel: true,
15.     onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
16.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
17.       console.log("dialog onWillDismiss")
18.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
19.         dismissDialogAction.dismiss()
20.       }
21.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
22.         dismissDialogAction.dismiss()
23.       }
24.     },
25.     keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,
26.     alignment: DialogAlignment.Bottom,
27.     // offset: { dx: 0, dy: -20 },
28.     gridCount: 4,
29.     customStyle: false,
30.     cornerRadius: 10,
31.     backgroundColor: Color.Black
32.   })
34.   // 在自定义组件即将析构销毁时将dialogController置空
35.   aboutToDisappear() {
36.     this.dialogController = null // 将dialogController置空
37.   }
39.   onCancel() {
40.     console.info('Callback when the first button is clicked')
41.   }
43.   onAccept() {
44.     console.info('Callback when the second button is clicked')
45.   }
47.   exitApp() {
48.     console.info('Click the callback in the blank area')
49.   }
50.   build() {
51.     Column() {
52.       Button(this.inputValue)
53.         .onClick(() => {
54.           if (this.dialogController != null) {
55.             this.dialogController.open()
56.           }
57.         }).backgroundColor(0x317aff)
58.     }.width('100%').margin({ top: 5 })
59.   }
60. }

复制代码

二、解决方案

相识安全弹框的问题，需要对自界说弹框的实现有比较深刻的熟悉才气规避。
起首我们要搞清晰，自界说弹框的根本用法，会发现在CustomDialogExample中，build是弹框结构的具体样式的一部分，在调用页面TextPage ，实在也会设置弹框的一些样式属性，比方：customStyle。
这是体系体系的根本样式，如果customStyle该属性为false，那我们的弹框样式，只需要关心弹框内的结构，整个弹框外围是交给体系定制样式处置惩罚。
所以当我们设置customStyle该属性为true，就会发现弹框view会贴合键盘，但是整体弹框的边框都没了。

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

源码示例：

自界说弹框源码

1. @CustomDialog
2. @Component
3. struct CustomDialogExample {
4.   @Link textValue: string
5.   @Link inputValue: string
7.   controller?: CustomDialogController
9.   cancel: () => void = () => {
10.   }
11.   confirm: () => void = () => {
12.   }
14.   build() {
15.     Column() {
16.       TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%')
17.         .onChange((value: string) => {
18.           this.textValue = value
19.         })
20.         .defaultFocus(true)
21.       Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 })
22.       Flex({ justifyContent: FlexAlign.SpaceAround }) {
23.         Button('cancel')
24.           .onClick(() => {
25.             if (this.controller != undefined) {
26.               this.controller.close()
27.               this.cancel()
28.             }
29.           }).backgroundColor(0xffffff).fontColor(Color.Black)
30.         Button('confirm')
31.           .onClick(() => {
32.             if (this.controller != undefined) {
33.               this.inputValue = this.textValue
34.               this.controller.close()
35.               this.confirm()
36.             }
37.           }).backgroundColor(0xffffff).fontColor(Color.Red)
38.       }.margin({ bottom: 10 })
40.     }.width("90%")
41.     .borderRadius(15)
42.     .backgroundColor(Color.White)
43.     .borderWidth(5)
44.     .height(px2vp(500))
45.     .offset({ x: 0, y: 16})
46.   }
47. }

复制代码

调用页面源码：

1. @Entry
2. @Component
3. struct TextPage {
4.   @State textValue: string = ''
5.   @State inputValue: string = 'click me'
6.   dialogController: CustomDialogController | null = new CustomDialogController({
7.     builder: CustomDialogExample({
8.       cancel: ()=> { this.onCancel() },
9.       confirm: ()=> { this.onAccept() },
10.       textValue: $textValue,
11.       inputValue: $inputValue
12.     }),
13.     cancel: this.exitApp,
14.     autoCancel: true,
15.     onWillDismiss:(dismissDialogAction: DismissDialogAction)=> {
16.       console.info("reason=" + JSON.stringify(dismissDialogAction.reason))
17.       console.log("dialog onWillDismiss")
18.       if (dismissDialogAction.reason == DismissReason.PRESS_BACK) {
19.         dismissDialogAction.dismiss()
20.       }
21.       if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) {
22.         dismissDialogAction.dismiss()
23.       }
24.     },
25.     keyboardAvoidMode: KeyboardAvoidMode.DEFAULT,
26.     alignment: DialogAlignment.Bottom,
27.     gridCount: 4,
28.     customStyle: true,
29.     cornerRadius: 10,
30.     backgroundColor: Color.Black
31.   })
33.   // 在自定义组件即将析构销毁时将dialogController置空
34.   aboutToDisappear() {
35.     this.dialogController = null // 将dialogController置空
36.   }
38.   onCancel() {
39.     console.info('Callback when the first button is clicked')
40.   }
42.   onAccept() {
43.     console.info('Callback when the second button is clicked')
44.   }
46.   exitApp() {
47.     console.info('Click the callback in the blank area')
48.   }
49.   build() {
50.     Column() {
51.       Button(this.inputValue)
52.         .onClick(() => {
53.           if (this.dialogController != null) {
54.             this.dialogController.open()
55.           }
56.         }).backgroundColor(0x317aff)
57.     }.width('100%').margin({ top: 5 })
58.   }
59. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。