#鸿蒙学习大百科#如何让无滚动能力的容器组件也生效键盘避让？

// Example.js
import inputmethod from '@ohos.inputmethod';

export default {
    data: {
        keyboardHeight: 0
    },
    onInit() {
        // 监听键盘显示事件
        inputmethod.on('show', (event) => {
            this.keyboardHeight = event.keyboardHeight;
            this.adjustLayoutForKeyboard(true, event.keyboardHeight);
        });

        // 监听键盘隐藏事件
        inputmethod.on('hide', () => {
            this.adjustLayoutForKeyboard(false, 0);
        });
    },
    adjustLayoutForKeyboard(show, height) {
        let container = this.$refs.container; // 获取需要调整的容器
        
        if (show) {
            // 当键盘显示时，调整布局高度
            container.style.height = `${container.clientHeight - height}px`;
        } else {
            // 键盘隐藏时恢复原状
            container.style.height = ''; // 或者设置为初始高度
        }
    }
}

<!-- MainPage.hml -->
<scroll>
    <div ref="container">
        <!-- 你的内容放在这里 -->
        <text>欢迎使用输入框</text>
        <input />
    </div>
</scroll>

@Entry
@Component
struct Index {
  placeHolderArr: string[] = ['1', '2', '3', '4', '5', '6', '7']

  build() {
    Scroll() {
      Column() {
        ForEach(this.placeHolderArr, (placeholder: string) => {
          TextInput({ placeholder: 'TextInput ' + placeholder })
            .margin(30)
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}