HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分
HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分,怎么解决
NavDestination的DIALOG模式弹窗布局,布局中有2个textinput输入框,
-
点击最上面的输入框,系统键盘显示,遮挡了第2个textinput的部分区域,手动点击第2个textinput,键盘没有消失,布局也没有上抬,导致键盘还是遮挡了第2个textinput的一部分,使用Scroll包裹布局也不会上抬页面。
-
如果关掉键盘,再点击第2个textinput,键盘显示时会上抬页面使第2个textinput完全显示出来。
遮挡效果:
弹窗布局:
@Component
export struct DemoDialog {
build() {
NavDestination() {
Stack({ alignContent: Alignment.Center }) {
Column() {
Column() {
Column() {
Text('提示')
.fontSize(18)
.fontWeight(FontWeight.Bold)
.fontColor(Color.Black)
.width('100%')
.textAlign(TextAlign.Center)
Text('测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字')
.fontSize(14)
.fontColor(Color.Black)
.width('100%')
.margin({ top: 20, bottom: 20 })
Column() {
Text('手机号码:')
.fontSize(16)
.fontColor('#3D3D3D')
.width('100%')
.textAlign(TextAlign.Start)
Row() {
TextInput({ placeholder: "请输入手机号" })
.placeholderColor('#CCCCCC')
.type(InputType.Number)
.fontSize(12)
.backgroundColor(Color.Transparent)
.padding({ left: 10 })
.layoutWeight(2)
.height('100%')
Line().backgroundColor('#CCCCCC').width(1).height('100%')
Text('获取验证码')
.fontSize(14)
.fontColor('#fd7903')
.height('100%')
.padding(5)
.textAlign(TextAlign.Center)
.layoutWeight(1)
}
.width('100%')
.border({ width: 0.8, radius: 5, color: '#CCCCCC' })
.height(40)
.margin({ top: 10 })
.alignItems(VerticalAlign.Center)
}
.width('100%')
.margin({ top: 10 })
Text('验证码:')
.fontSize(16)
.fontColor('#3D3D3D')
.margin({ top: 10 })
.width('100%')
.textAlign(TextAlign.Start)
Row() {
TextInput({ placeholder: "请输入验证码" })
.placeholderColor('#CCCCCC')
.type(InputType.Number)
.fontSize(12)
.backgroundColor(Color.Transparent)
.padding({ left: 10 })
.height('100%')
.width('100%')
}
.alignItems(VerticalAlign.Center)
.width('100%')
.border({ width: 0.8, radius: 5, color: '#CCCCCC' })
.height(40)
.margin({ top: 10 })
}.padding(15)
Line()
.width('100%')
.height(0.5)
.backgroundColor('#dddddd')
Row() {
Row() {
Text('取消')
.fontSize(20)
.fontColor('#949499')
.height('100%')
.layoutWeight(1)
.textAlign(TextAlign.Center)
.margin({ left: 10 })
Row() {
Line()
.width(1)
.height('100%')
.backgroundColor('#E0E0E0')
}
.height('100%')
.padding({ bottom: 6 })
}
.height('100%')
.layoutWeight(1)
Text('确认')
.fontSize(20)
.fontColor('#F57A00')
.height('100%')
.layoutWeight(1)
.textAlign(TextAlign.Center)
}
.width('100%')
.height(60)
}
.width('100%')
.backgroundColor('#eeeeee')
.border({ radius: 13.33, width: 0.8, color: '#ffffff' })
}
.width('100%')
}
.width('100%')
.height('100%')
.padding({ left: 16, right: 16 })
}
.backgroundColor('#44000000')
.hideTitleBar(true)
.mode(NavDestinationMode.DIALOG)
}
}
更多关于HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分的实战教程也可以访问 https://www.itying.com/category-93-b0.html
更多关于HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
软键盘适配解决文档如下,根据你的场景选择合适的适配方案
在HarmonyOS鸿蒙Next中,系统键盘遮挡TextInput
输入框时,可以通过以下方法解决:
-
使用
ScrollView
:将TextInput
放在ScrollView
中,当键盘弹出时,自动调整布局,确保输入框可见。 -
设置
windowSoftInputMode
:在config.json
中配置windowSoftInputMode
为adjustResize
或adjustPan
,自动调整窗口大小或平移视图。 -
手动调整布局:监听键盘事件,动态调整
TextInput
的位置,确保其不被遮挡。
通过这些方法,可以有效避免键盘遮挡输入框的问题。