自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域
自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域
1、根据window.on("keyboardHeightChange")获取软键盘系统高度
2、在CustomDialog的根组件下通过onAreaChange确认Dialog实际抬升高度
3、两数相减得到具体偏移量
样例代码如下:
import { inputMethod } from '@kit.IMEKit'
import { window } from ‘@kit.ArkUI’
struct CustomDialogExample {
controller?: CustomDialogController
@State @Watch(‘keyboardHeightChange’) keyboardHeight: number = 0
@State @Watch(‘keyboardHeightChange’) realKeyboardHeight: number = 0
@State offsetY: number = 0
aboutToAppear(): void {
window.getLastWindow(getContext(this), (err, window) => {
window.on(“keyboardHeightChange”, (keyboardHeight) => {
if (keyboardHeight !== 0) {
this.keyboardHeight = px2vp(keyboardHeight)
}
});
})
}
keyboardHeightChange() {
if (this.keyboardHeight !== 0 && this.realKeyboardHeight !== 0) {
this.offsetY = this.realKeyboardHeight - this.keyboardHeight
}
}
build() {
Column() {
Text(‘content’)
.fontSize(20)
TextArea()
.width(“100%”)
.height(100)
Text(‘content’)
.fontSize(20)
}
.width(“100%”)
.offset({y: this.offsetY})
.backgroundColor(Color.White)
.borderRadius({topLeft: 32, topRight: 32})
.onAreaChange((oldValue: Area, newValue: Area) => {
if (Number(oldValue.globalPosition.y) > Number(newValue.globalPosition.y)) {
this.realKeyboardHeight = Number(oldValue.globalPosition.y) - Number(newValue.globalPosition.y)
console.log("")
}
})
}
}
struct CustomDialogTest {
@State message: string = ‘Hello World’;
dialogController: CustomDialogController = new CustomDialogController({
builder: CustomDialogExample(),
alignment: DialogAlignment.Bottom,
customStyle: true
})
build() {
RelativeContainer() {
Text(this.message)
.id(‘HelloWorld’)
.fontSize(50)
.fontWeight(FontWeight.Bold)
.alignRules({
center: { anchor: ‘container’, align: VerticalAlign.Center },
middle: { anchor: ‘container’, align: HorizontalAlign.Center }
})
.onClick(() => {
this.dialogController.open()
})
}
.height(‘100%’)
.width(‘100%’)
}
}
更多关于自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
针对自定义dialog样式时,HarmonyOS 鸿蒙Next dialog弹出后底部存在空白区域的问题,以下是一些可能的解决方案:
-
检查布局属性:
- 确保弹窗的布局没有超出其应有的范围,检查
layout_height
和layout_width
属性,避免设置为超出屏幕大小的值。 - 如果使用的是自定义弹窗,检查其样式和布局文件,确保没有不必要的背景色或边框导致白条出现。
- 确保弹窗的布局没有超出其应有的范围,检查
-
调整弹窗样式:
- 在自定义弹窗中,将最外层容器的宽度设置为100%,以确保弹窗的宽度占据整个屏幕。
- 调整弹窗的高度,可能需要覆盖底部导航栏,这通常涉及到对弹窗内容的布局和样式的精细调整。
-
全屏模式设置:
- 如果弹窗需要在全屏模式下显示,确保在显示弹窗之前将当前页面设置为全屏模式。
- 在HarmonyOS中,可以通过设置窗口的布局参数来实现全屏效果。
如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html 。