如何实现弹窗和软键盘的避让

自定义弹窗中存在输入框,点击输入框软键盘弹出之后,会把整个弹窗往上顶,能否设置弹窗不避让软键盘。

HarmonyOS
2024-05-23 23:24:35
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
妙蛙菜籽油

解决方案 :

1.当前都是默认避让输入法,不允许开发者配置不避让。

2.自定义弹窗仅适用于简单提示场景,当弹窗高度过大时建议用页面级的组件代替,或者使用半模态实现相关功能。

参考代码:

@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%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.

注意事项:

1.安全区域只对页面级别的组件生效,对半模态,自定义弹窗都不生效。

2.自定义弹窗默认与最底部有16vp的间隔,此为UX规格,如果需要设置自定义弹窗完全贴底,需要给弹窗设置offset({x:0,y:16})。

分享
微博
QQ
微信
回复
2024-05-24 23:15:00
相关问题
HarmonyOS 弹窗避让软键盘
1359浏览 • 1回复 待解决
HarmonyOS 如何实现弹窗不规避软键盘
1008浏览 • 1回复 待解决
HarmonyOS 弹窗布局被软键盘压缩
604浏览 • 1回复 待解决
HarmonyOS 如何实现隐藏软键盘功能
788浏览 • 1回复 待解决
HarmonyOS dialog软键盘
704浏览 • 1回复 待解决
HarmonyOS 如何实现调用起来软键盘
610浏览 • 1回复 待解决
HarmonyOS 表情面板软键盘
762浏览 • 1回复 待解决
HarmonyOS 如何监听软键盘弹出
893浏览 • 1回复 待解决
如何判断软键盘是否弹出
2822浏览 • 1回复 待解决
HarmonyOS 如何监听软键盘收起
953浏览 • 1回复 待解决
HarmonyOS 软键盘操作API
551浏览 • 1回复 待解决
如何主动收起软键盘
960浏览 • 1回复 待解决
HarmonyOS 如何控制软键盘打开、收起?
2001浏览 • 1回复 待解决
HarmonyOS 如何代码控制软键盘弹出?
1165浏览 • 1回复 待解决
HarmonyOS 如何获取软键盘高度?
1906浏览 • 1回复 待解决