HarmonyOS 鸿蒙Next 软键盘弹出后布局显示问题
根布局 //底部keyBoardHeight是软键盘高度
aboutToAppear(): void {
try {
window.getLastWindow(getContext(this), (err, data) => {
if (err.code) {
return;
}
let windowClass = data;
try {
windowClass.on('keyboardHeightChange', (data) => {
console.log(`当前键盘高度:${data}`)
if (data > 0) {
this.keyBoardHeight = data / displayProperty.densityPixelsGet()
} else {
this.keyBoardHeight = 0
}
});
} catch (exception) {
}
});
} catch (exception) {
}
}
build() {
Column() {
//自定义组件
Scroll() {
//自定义组件
}
.layoutWeight(1)
.align(Alignment.Top)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.margin({ bottom: this.keyBoardHeight })
}
}
问题是点击下面的输入框会有中间的空白高度，点击上面的输入框没问题
更多关于HarmonyOS 鸿蒙Next 软键盘弹出后布局显示问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
需要给组件添加expandSafeArea，参考如下demo
import { window } from '[@kit](/user/kit).ArkUI';
[@Entry](/user/Entry)
[@Component](/user/Component)
struct Page241009104211044 {
[@State](/user/State) message: string = 'Hello World';
[@State](/user/State) keyBoardHeight: number = 0
aboutToAppear(): void {
try {
window.getLastWindow(getContext(this), (err, data) => {
if (err.code) {
return;
}
let windowClass = data;
try {
windowClass.on('keyboardHeightChange', (data) => {
console.log(`当前键盘高度:${data}`)
if (data > 0) {
this.keyBoardHeight = px2vp(data)
} else {
this.keyBoardHeight = 0
}
console.log('this.keyBoardHeight', this.keyBoardHeight)
});
} catch (exception) {
}
});
} catch (exception) {
}
}
build() {
Column() {
Scroll() {
//自定义组件
Column() {
Row() {
Text('111')
}
.width('100%')
.height(50)
.backgroundColor(Color.White)
.margin({
bottom: 10
})
Row() {
Text('222')
}
.width('100%')
.backgroundColor(Color.White)
.height(50)
.margin({
bottom: 10
})
Column() {
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "11" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "22" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "33" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "44" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "55" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "66" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "77" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
Row() {
Text('title1')
.margin({
right: 10
})
TextInput({ placeholder: "88" })
.height(60)
.margin({
bottom: 15
})
}
.backgroundColor(Color.White)
.padding(10)
.justifyContent(FlexAlign.SpaceBetween)
}
}
.expandSafeArea([SafeAreaType.KEYBOARD])
}
.layoutWeight(1)
.align(Alignment.Top)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.Spring)
.expandSafeArea([SafeAreaType.KEYBOARD])
.margin({
bottom: this.keyBoardHeight
})
}
.width('100%')
.height('100%')
.backgroundColor('#f5f5f5')
}
}
更多关于HarmonyOS 鸿蒙Next 软键盘弹出后布局显示问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在HarmonyOS鸿蒙Next系统中，软键盘弹出后布局显示问题通常与布局适配和窗口焦点调整相关。以下是一些可能的解决方案：
-
调整布局参数：确保你的布局文件（如XML布局）中，相关控件（如EditText）设置了正确的布局参数，如
android:windowSoftInputMode（在鸿蒙中可能对应不同的属性，需查阅鸿蒙文档）来指定软键盘弹出时的布局行为。 -
使用ConstraintLayout：如果布局较为复杂，建议使用ConstraintLayout，它提供了更强的布局控制能力和更好的软键盘适配。
-
监听软键盘状态：通过监听软键盘的显示和隐藏状态，动态调整布局。鸿蒙系统提供了相应的API，可以在窗口焦点变化或键盘事件时触发。
-
检查UI线程：确保所有UI更新都在UI线程中执行，避免线程冲突导致的布局问题。
-
全屏与非全屏适配：如果应用支持全屏模式，确保在全屏和非全屏模式下都能正确适配软键盘。
如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html 。在联系客服时，请提供详细的复现步骤和日志信息，以便快速定位问题。
