HarmonyOS 鸿蒙Next中全屏页面键盘顶起底部导航条

HarmonyOS 鸿蒙Next中全屏页面键盘顶起底部导航条 cke_190.png

全屏页面,键盘顶起底部导航条,这个如何解决呢.目前键盘只配置了

window.getLastWindow(getContext()).then((win) => {
  win.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
})

更多关于HarmonyOS 鸿蒙Next中全屏页面键盘顶起底部导航条的实战教程也可以访问 https://www.itying.com/category-93-b0.html

11 回复

你的意思是中间那条黑色的吗，不是你加了 padding 的原因吗

更多关于HarmonyOS 鸿蒙Next中全屏页面键盘顶起底部导航条的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


对的 那个黑条我需要,我这个布局是全屏的 需要把他顶起,然后输入框没有适配到,如果不是全屏的话这个就解决了…

可以看看这个：https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-54， 还有个简单的方法是当键盘弹出时把 padding 设置为0，

有道理,这个可以试试，

使用this.getUIContext()而非普通getContext()：

aboutToAppear(): void {
  this.uiContext = this.getUIContext(); // 正确方式
  this.uiContext.setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
}

在窗口创建阶段统一配置：

onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.loadContent('pages/Index', () => {
    windowStage.getMainWindowSync().getUIContext()
      .setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
  });
}

在padding加下底部边距试试

获取窗口内容规避的区域，规避区域类型为软键盘区域（TYPE_KEYBOARD）。当软键盘弹出时，获取规避区域的高度，并通过设置margin-bottom顶起组件。参考代码如下：

import { window } from '@kit.ArkUI';

@Entry
struct BottomPopsUpAsTheTopOfKeyboard {
  context = this.getUIContext();
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5];
  @State scrollHeight: number = 0;
  @State isRebuild: boolean = false;
  @State keyHeight: number = 0;
  @State text: string = '';
  aboutToAppear() {
    window.getLastWindow(this.context.getHostContext()).then(currentWindow => {
      // Set the layout of the window to immersive layout
      currentWindow.setWindowLayoutFullScreen(true);
      let property = currentWindow.getWindowProperties();
      // Initialize window height
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);
      this.scrollHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);
      // Monitor the hiding and showing of the soft keyboard
      currentWindow.on('avoidAreaChange', data => {
        if (data.type == window.AvoidAreaType.TYPE_KEYBOARD) {
          this.keyHeight = px2vp(data.area.bottomRect.height);
          this.scrollHeight =
            px2vp(currentWindow.getWindowProperties().windowRect.height - data.area.bottomRect.height);
          return;
        }
      })
    })
  }
  build() {
    Stack({ alignContent: Alignment.TopStart }) {
      Column() {
        Scroll(this.scroller) {
          Column() {
            TextInput({ text: this.text, placeholder: 'input your word...' })
              .placeholderFont({
                size: 14,
                weight: 400
              })
              .width(320)
              .height(40)
              .margin(200)
              .fontSize(14)
              .fontColor(Color.Black)
              .backgroundColor(Color.White)
            ForEach(this.arr, (item: number) => {
              Text(item.toString())
                .width('90%')
                .height(150)
                .backgroundColor(0xFFFFFF)
                .borderRadius(15)
                .fontSize(16)
                .textAlign(TextAlign.Center)
                .margin({ top: 10 })
            })
          }
          .width('100%')
        }
        .width('100%')
        .height(this.scrollHeight)
        .layoutWeight(1)
        Text('This is a test text')
          .width('100%')
          .height(50)
          .backgroundColor(Color.Red)
          .margin({ bottom: this.keyHeight })
      }
      .width('100%')
      .height('100%')
      .justifyContent(FlexAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}

没太明白你的意思，参考下安全区域的文档看看？

setkeyboardavoidmode11-安全区域-布局与边框-通用属性-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

示例-安全区域-布局与边框-通用属性-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

补充一下我在最外层加了底部边距

.padding({bottom:px2vp(AppUtil.getNavigationIndicatorHeight())})

鸿蒙Next中全屏页面键盘顶起底部导航条的问题，是由于键盘弹出时布局未自动适配导致的。可通过在UI描述文件中使用avoidKeyboard属性或设置windowLayoutMode为avoidKeyboard来实现自动避让。同时检查页面布局是否使用了固定定位或绝对定位，建议使用弹性布局或响应式布局组件。

在HarmonyOS Next中，键盘顶起底部导航条的问题可以通过调整窗口的键盘避免模式来解决。当前代码中使用了RESIZE模式，该模式会调整窗口大小以适应键盘，但可能会导致布局挤压。

建议改用PAN模式，它通过平移内容区域来避免键盘遮挡，而不会改变窗口尺寸。修改代码如下：

window.getLastWindow(getContext()).then((win) => {
  win.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.PAN);
});

PAN模式更适合全屏页面，能有效避免底部导航条被键盘顶起的问题。

回到顶部