HarmonyOS 鸿蒙Next中显示键盘时整体页面不上滑

HarmonyOS 鸿蒙Next中显示键盘时整体页面不上滑 输入框内写东西是整个页面不能往上移动功能怎么实现？

@Entry
@Component
struct Input {
  @State message: string = 'Hello World';

  build() {
    Column() {

      Column() {
        Text('不要被往上滑动的区域')
          .fontSize(25)
      }
      .width('100%')
      .height('90%')
      .margin({ bottom: 5 })
      .justifyContent(FlexAlign.Start)
      .border({ width: 1, color: '#ff5174f8' })

      Column() {
        TextInput({ placeholder: '输入框' })
      }
      .height('10%')
      .justifyContent(FlexAlign.Center)
      .border({ width: 1, color: '#ff95fa57' })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中显示键盘时整体页面不上滑的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

尊敬的开发者，您好，可以在aboutToAppear生命周期中通过setKeyboardAvoidMode方法设置合适的键盘避让模式。

示例代码如下：

import { KeyboardAvoidMode } from "@kit.ArkUI";

@Entry
@Component
struct Input {
  @State message: string = 'Hello World';
  aboutToAppear(): void {
    this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE_WITH_CARET);
  }
  build() {
    Column() {
      Column() {
        Text('不要被往上滑动的区域')
          .fontSize(25)
      }
      .width('100%')
      .height('90%')
      .margin({ bottom: 5 })
      .justifyContent(FlexAlign.Start)
      .border({ width: 1, color: '#ff5174f8' })
      Column() {
        TextInput({ placeholder: '输入框' })
      }
      .height('10%')
      .justifyContent(FlexAlign.Center)
      .border({ width: 1, color: '#ff95fa57' })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中显示键盘时整体页面不上滑的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next中，软键盘弹出时页面不上滑是由于默认的键盘避让模式为adjustPan或adjustNothing，该模式会压缩窗口高度而非移动页面。可通过配置应用模块的module.json5文件中的window属性，设置softInputMode为"adjustResize"，使页面布局整体上移。

在 HarmonyOS Next 中，系统默认会对键盘弹出进行避让处理，导致页面整体上移。要禁止页面上滑，可在 Ability 中设置窗口的键盘避让模式为 NONE。

核心步骤：
在 EntryAbility.ts 的 onWindowStageCreate 生命周期里，通过 windowStage.getMainWindow() 获取主窗口实例，调用 setKeyboardAvoidMode(KeyboardAvoidMode.NONE) 即可。

示例代码：

import { UIAbility } from '@kit.AbilityKit';
import { window, KeyboardAvoidMode } from '@kit.ArkUI';

export default class EntryAbility extends UIAbility {
  onWindowStageCreate(windowStage: window.WindowStage) {
    windowStage.getMainWindow().then((win: window.Window) => {
      win.setKeyboardAvoidMode(KeyboardAvoidMode.NONE); // 禁用键盘避让
    });
    // ... 加载页面
  }
}

如果需要输入框不被键盘完全遮挡，可以监听键盘高度，自行用 translate 或 position 移动单个组件，而不是让整个页面上滑。
该设置会让窗口保持原始布局，键盘弹出时仅覆盖底部区域，适合固定页头或特殊交互场景。

回到顶部