HarmonyOS 鸿蒙Next 键盘把对话框顶上去,导致自定义对话框变形

HarmonyOS 鸿蒙Next 键盘把对话框顶上去,导致自定义对话框变形

页面底部有一个自定义对话,然后底部对话框中有TextInput。发现弹出软键盘后。对话框会被压缩无法正常展示,切软键盘与对话框中间很很大的空隙

2 回复

您可以参考一下官方的demo,里面有键盘避让的示例,搜索:UI框架-软键盘弹出 。 您可以对不想要受影响的组件添加安全区域

.expandSafeArea([SafeAreaType.KEYBOARD], [SafeAreaEdge.BOTTOM])

参考链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-expand-safe-area-V5

参考demo:

import window from '@ohos.window';

@Entry
@Component
struct ScrollExample {
  scroller: Scroller = new Scroller();
  private arr: number[] = [0, 1, 2, 3, 4, 5];
  controller: TextInputController = new TextInputController();

  @State flag: boolean = false;
  @State TextTest: string = '';
  @State TextTest1: string = '';
  @State screenHeight: number = 0;

  aboutToAppear() {
    window.getLastWindow(getContext(this)).then(currentWindow => {
      let property = currentWindow.getWindowProperties();
      let avoidArea = currentWindow.getWindowAvoidArea(window.AvoidAreaType.TYPE_KEYBOARD);

      // 初始化显示区域高度
      this.screenHeight = px2vp(property.windowRect.height - avoidArea.bottomRect.height);

      // 监视软键盘的弹出和收起
      currentWindow.on('avoidAreaChange', async data => {
        // 获取窗口内容规避的区域,如系统栏区域、刘海屏区域、手势区域、软键盘区域等
        if (data.type !== window.AvoidAreaType.TYPE_KEYBOARD) {
          return;
        }

        // 由于aboutToAppear该生命周期在build函数之前就执行了,所以只设置一个Text文本的话会有一个bug,即键盘收起后,文本顶起的区域并不会收回,影响用户体验,因此这里就用了两个文本来实现效果
        this.TextTest = (this.TextTest == '') ? '1' : '';

        if (this.TextTest1 == '1') {
          this.TextTest1 = '';
        }

        console.log(this.TextTest, 666);
        this.screenHeight = px2vp(property.windowRect.height - data.area.bottomRect.height);
      });
    });
  }

  build() {
    // 使用Stack容器来实现Navigation导航栏的固定
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          ForEach(this.arr, (item: number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 });
          }, (item: number) => item.toString());

          TextInput({ placeholder: 'search...', controller: this.controller })
            // 默认设置当前组件不能获焦
            .focusable(this.flag)
            .width('90%')
            .height(40)
            .backgroundColor('#FFFFFF')
            .margin({ top: 8, bottom: 20 })
            // 设置点击事件重新获取焦点
            .onClick(() => {
              this.flag = true;
              this.TextTest1 = '1';
            });

          // 给键盘空出的高度,内容不为空时会顶起页面的底部内容显示
          Text(this.TextTest)
            .lineHeight(300)
            .fontColor('#DCDCDC');

          Text(this.TextTest1)
            .lineHeight(300)
            .fontColor('#DCDCDC');
        }.width('100%');
      }

      // 上间距根据导航栏高度来设置
      .margin({ top: 110 })
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Gray)
      .scrollBarWidth(0)
      .onScroll((xOffset: number, yOffset: number) => {
        console.info(xOffset + ' ' + yOffset);
      });

      // Stack容器内的第二个子组件,Navigation会覆盖Scroll容器
      Navigation() {
      }
      .title('导航栏标题')
      .backgroundColor(Color.Yellow)
      .height(110)
      .titleMode(NavigationTitleMode.Full)
      .hideTitleBar(false)
      .hideToolBar(false);

      // 这里的按钮是初步思想,由于没有找到监听键盘收起的事件,因此在键盘弹出时可以点击按钮,失去焦点的同时设置文本内容为空,但考虑到用户不会通过别的方式来收起键盘,因此这种方式就摒弃了,思路可供参考。
      Button('键盘收起')
        .onClick(() => {
          this.TextTest1 = '';
          this.flag = false;
        })
        .margin({ top: 10, left: 20 });
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
    // 设置屏幕的安全区域
    .expandSafeArea([SafeAreaType.KEYBOARD]);
  }
}

更多关于HarmonyOS 鸿蒙Next 键盘把对话框顶上去,导致自定义对话框变形的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,当Next键盘弹出时,如果对话框被顶上去并导致变形,这通常是由于对话框的布局没有正确处理键盘弹出时的屏幕空间变化。要解决这个问题,可以尝试以下方法:

  1. 调整对话框布局:确保对话框的布局支持键盘弹出时的屏幕调整。可以使用softInputMode属性来控制对话框在键盘弹出时的行为,比如使用adjustResizeadjustPan

  2. 设置窗口属性:在对话框的Window对象中设置相关属性,使其能够在键盘弹出时正确处理布局变化。这可以通过获取对话框的Window对象并设置其属性来实现。

  3. 自定义对话框内部布局:如果对话框内部有复杂的布局,确保这些布局元素在键盘弹出时能够自适应或重新排列,避免变形。

  4. 监听键盘弹出事件:通过监听键盘弹出和隐藏的事件,动态调整对话框的布局或内容,以适应键盘的出现。

以上方法可以根据具体情况进行尝试和调整。如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html。

回到顶部