TextArea在输入内容的过程中会被键盘遮挡 - HarmonyOS 鸿蒙Next

发布于 1周前 作者 sinazl 来自 鸿蒙OS

TextArea在输入内容的过程中会被键盘遮挡 - HarmonyOS 鸿蒙Next

@Entry
@Component
struct TextAreaPage {
  build() {
    Column() {
      Column() {
        Text("内容区").height(400)
        TextArea({ placeholder: '请输入评价内容（非必填）' })
        .margin({ left: 15, right: 15 })
        .textAlign(TextAlign.Start)
        .borderRadius(10)
        .fontSize(14)
        .constraintSize({ minHeight: 120, maxHeight: 200 })
        .backgroundColor(Color.Gray)
        .maxLength(500)
        .align(Alignment.TopStart)
        .layoutWeight(1)

        Text("提交")
        .borderRadius(20)
        .width(200)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .height(40)
        .backgroundColor(Color.Blue)
      }.width("100%").height("100%")
    }
  }
}

更多关于TextArea在输入内容的过程中会被键盘遮挡 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复 
楼主你好，可以参考以下文档：

```less
[@Entry](/user/Entry)
[@Component](/user/Component)
struct TextAreaPage {
  build() {
    Column() {
      Column() {
        Text("内容区").height('50%')
        TextArea({ placeholder: '请输入评价内容（非必填）' })
          .margin({ left: 15, right: 15 })
          .textAlign(TextAlign.Start)
          .borderRadius(10)
          .fontSize(14)
          .constraintSize({ minHeight: 120, maxHeight: 200 })
          .height('40%')
      }.layoutWeight(1)

      Text("提交")
        .borderRadius(20)
        .width(200)
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .height('10%')
        .backgroundColor(Color.Blue)
    }.width("100%").height("100%")
  }
}

// Main window is created, set main page for this ability
hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

在onWindowStageCreate设置一下键盘避让模式：
windowStage.loadContent('pages/Index', (err) => {
  if (err.code) {
    hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
    return;
  }

  windowStage.getMainWindowSync().getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
  hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
});

更多关于TextArea在输入内容的过程中会被键盘遮挡 - HarmonyOS 鸿蒙Next的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next系统中，针对TextArea在输入内容时被键盘遮挡的问题，这通常是由于布局未正确适配软键盘弹出导致的。以下是一些可能的解决方案，专注于鸿蒙系统的特性：

  1. 调整布局参数：确保TextArea所在的布局容器（如StackLayout、DirectionalLayout等）具有足够的空间来适应软键盘的弹出。可以尝试设置容器的paddingBottom或增加其高度，以预留出键盘空间。

  2. 使用Scroll组件：将TextArea包裹在一个可以滚动的组件中（如Scroll），这样当键盘弹出时，用户可以滚动视图以查看被遮挡的内容。

  3. 监听键盘事件：利用鸿蒙系统提供的键盘事件监听机制，如onKeyboardVisibleChange，根据键盘的显示状态动态调整布局。

  4. 检查TextArea属性：确保TextArea的输入模式（如multiline）和滚动设置（如scrollEnabled）正确配置，以支持内容在键盘弹出时的可见性。

  5. 测试不同设备：由于不同设备的屏幕尺寸和键盘高度不同，建议在多种设备上测试，确保布局在所有情况下都能正确适配。

如果问题依旧没法解决请联系官网客服，官网地址是 https://www.itying.com/category-93-b0.html，

回到顶部