HarmonyOS鸿蒙Next中键盘避让：hsp中的Component如何设置键盘避让？

HarmonyOS鸿蒙Next中键盘避让：hsp中的Component如何设置键盘避让？ 在hsp中没有Ability文件如何在单个页面或者封装的组件中设置键盘避让？
为什么设置.expandSafeArea([SafeAreaType.KEYBOARD, SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])不生效？

3 回复

请参考以下代码：
注意：.安全区域只对页面级别的组件生效，对半模态，自定义弹窗都不生效。

@Entry
@Component
struct Main4 {
  @State isShow: boolean = false

  @Builder
  myBuilder() {
    Column() {
      Button("关闭半模态").onClick(() =>{
        this.isShow = false
      })
      TextInput()
    }

    .expandSafeArea([SafeAreaType.SYSTEM,SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .borderRadius(10)
    .width("100%")
  }

  build() {
    Column() {
      Button('click me 打开半模态')
        .onClick(() => {
          this.isShow = !this.isShow
        })
    }
    .expandSafeArea([SafeAreaType.SYSTEM,SafeAreaType.KEYBOARD], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .bindSheet($$this.isShow, this.myBuilder(), { height: 400})
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中键盘避让：hsp中的Component如何设置键盘避让？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，键盘避让可以通过设置Component的keyboardAvoidMode属性来实现。keyboardAvoidMode属性用于指定组件在键盘弹出时的避让行为。该属性有三个可选值：

  1. auto：默认值，系统自动处理键盘避让，组件会根据键盘的弹出状态自动调整位置。
  2. manual：手动模式，开发者需要自行处理键盘避让逻辑，系统不会自动调整组件位置。
  3. none：不进行键盘避让，组件位置不受键盘弹出影响。

例如，在hsp文件中，可以通过以下方式设置Component的keyboardAvoidMode属性：

<Component
    id="exampleComponent"
    keyboardAvoidMode="auto"
    ...
/>

以上代码将exampleComponent的键盘避让模式设置为auto，系统会在键盘弹出时自动调整该组件的位置。

如果需要更精细的控制，可以在代码中动态设置keyboardAvoidMode属性：

let exampleComponent = this.$element('exampleComponent');
exampleComponent.keyboardAvoidMode = 'manual';

通过这种方式，可以根据具体需求灵活调整组件的键盘避让行为。

在HarmonyOS鸿蒙Next中，通过hsp中的Component设置键盘避让，可以使用avoidKeyboard属性。将该属性设置为true，组件会在键盘弹出时自动调整位置以避免被遮挡。例如：

Component({
  avoidKeyboard: true
};

此设置适用于TextInput等输入组件，确保用户输入时界面友好。

回到顶部