HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分

HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分,怎么解决

NavDestination的DIALOG模式弹窗布局,布局中有2个textinput输入框,

  1. 点击最上面的输入框,系统键盘显示,遮挡了第2个textinput的部分区域,手动点击第2个textinput,键盘没有消失,布局也没有上抬,导致键盘还是遮挡了第2个textinput的一部分,使用Scroll包裹布局也不会上抬页面。

  2. 如果关掉键盘,再点击第2个textinput,键盘显示时会上抬页面使第2个textinput完全显示出来。

遮挡效果:

image.png

弹窗布局:

@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

3 回复

您好,为了更快速解决您的问题,并且吸引更多用户一同参与您问题的解答与讨论,建议您补全如下信息:

  • 补全复现代码,让参与用户更快速复现您的问题;

更多提问技巧,请参考:【Tips】如何提个好问题

更多关于HarmonyOS鸿蒙Next中系统键盘遮挡textinput输入框的一部分的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


软键盘适配解决文档如下,根据你的场景选择合适的适配方案

https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-keyboard-layout-adapt#section20196428133211

在HarmonyOS鸿蒙Next中,系统键盘遮挡TextInput输入框时,可以通过以下方法解决:

  1. 使用ScrollView:将TextInput放在ScrollView中,当键盘弹出时,自动调整布局,确保输入框可见。

  2. 设置windowSoftInputMode:在config.json中配置windowSoftInputModeadjustResizeadjustPan,自动调整窗口大小或平移视图。

  3. 手动调整布局:监听键盘事件,动态调整TextInput的位置,确保其不被遮挡。

通过这些方法,可以有效避免键盘遮挡输入框的问题。

回到顶部