HarmonyOS 鸿蒙Next 自定义弹框软键盘覆盖内容区域设置方法 HarmonyOS 鸿蒙Next下用customdialog弹出自定义弹框,内容靠底部显示,自定布局含文本输入框。点击文本输入框弹出软键盘时,如何让软键盘覆盖内容区域而非上顶?目标:设置软键盘不顶起内容区域。
HarmonyOS 鸿蒙Next 自定义弹框软键盘覆盖内容区域设置方法
HarmonyOS 鸿蒙Next下用customdialog弹出自定义弹框,内容靠底部显示,自定布局含文本输入框。点击文本输入框弹出软键盘时,如何让软键盘覆盖内容区域而非上顶?目标:设置软键盘不顶起内容区域。
用customdiloag弹出了个自定义弹框,内容靠底部显示,自定布局中文本输入框,点击文本输入框弹出软键盘,软键盘会把底部的内容区域网上上面顶。
目标:如何设置软键盘不把内容区域往上面顶,让软键盘覆盖在内容区域之上
设置安全区域.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);
参考链接:[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5)
全模态内的输入框上抬需要自己做,可以通过这个接口获取到键盘的高度来避让
参考链接:[https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-inputmethod-V13](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V13/js-apis-inputmethod-V13)
关于类似验证码数字输入框,请参考以下代码示例:
```javascript
//验证码输入框
interface codeOne {
str: string,
isBorder: boolean
}
[@Component](/user/Component)
export struct TextInputCodeView {
// 验证码
[@State](/user/State) code: string = ''
// 验证码位数
[@Prop](/user/Prop)
someArrayLength: number = 4
someArray: number[] = []
aboutToAppear(): void {
this.someArray = Array.from({length: this.someArrayLength})
}
build() {
Stack() {
Row() {
ForEach(this.someArray, (item: number,index:number) => {
//加间隙
if (index != 0) {
Blank()
}
//index + 1 :表示输入框的位置。
//填写验证码
if (this.code.length >= index + 1 ) {
this.OneText({ str:this.code.substring(index, index + 1), isBorder: index + 1 === this.someArray.length})
} else {
//没有验证码
this.OneText({
str:'',
isBorder: this.code.length + 1 === index + 1
})
}
}, (item: number ,index: number) => JSON.stringify(index + 1)) //键值标识
}
.width('100%')
TextInput({ placeholder:""})
.width('100%')
.height('100%')
.maxLength(this.someArray.length)
.caretColor(Color.Transparent)
.fontColor(Color.Transparent)
.borderColor(Color.Transparent)
.backgroundColor(Color.Transparent)
.onChange((value: string) => {
this.code = value
})
.onSubmit(async () => {
//回车事件
})
}
.width('100%')
.height(60)
}
//参数:验证码内容,是否显示边框
[@Builder](/user/Builder) OneText(item:codeOne) {
//判断,是否选中当前的输入框,是否有内容 。是当前选中的,没有内容,显示 |
Text(item.isBorder && !item.str ? '|' : item.str as string)
.width(50)
.height(50)
.textAlign(TextAlign.Center)
.fontSize(20)
.fontColor(item.isBorder && !item.str ?'#ffdd4f46' : Color.Black)
.backgroundColor('#f3f4f6')
.borderRadius(8)
}
}
更多关于HarmonyOS 鸿蒙Next 自定义弹框软键盘覆盖内容区域设置方法 HarmonyOS 鸿蒙Next下用customdialog弹出自定义弹框,内容靠底部显示,自定布局含文本输入框。点击文本输入框弹出软键盘时,如何让软键盘覆盖内容区域而非上顶?目标:设置软键盘不顶起内容区域。的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS 鸿蒙Next中,当你使用CustomDialog
弹出自定义弹框,并且希望软键盘弹出时不顶起内容区域,而是覆盖内容区域,可以通过调整窗口属性来实现。
具体步骤如下:
-
设置Dialog窗口属性:在创建或显示
CustomDialog
之前,可以通过WindowManager.LayoutParams
设置窗口属性,确保软键盘弹出时不改变内容区域的位置。 -
调整软输入模式:在Dialog的Window中设置软输入模式为
SOFT_INPUT_ADJUST_NOTHING
,这样软键盘弹出时不会调整窗口布局。
示例代码:
CustomDialog dialog = new CustomDialog(context);
// 设置Dialog布局等属性...
Window dialogWindow = dialog.getWindow();
if (dialogWindow != null) {
WindowManager.LayoutParams layoutParams = dialogWindow.getAttributes();
layoutParams.softInputMode = WindowManager.LayoutParams.SOFT_INPUT_ADJUST_NOTHING;
dialogWindow.setAttributes(layoutParams);
}
dialog.show();
注意,这里的代码示例是为了说明思路,实际在HarmonyOS中可能需要使用对应的API或类来实现,具体请参考HarmonyOS的官方文档和API。