首页
学习
活动
专区
圈层
工具
发布

鸿蒙Next软键盘弹出避让机制介绍

例如以下布局,一个顶部的Row按钮区,底部一个固定高度的按钮区,中间内容区域充满剩余部分,三种避让模式的演示如下:针对以上三种模式存在的不足:1.上抬模式,整体布局上移,软键盘挡住了底部的按钮区2.压缩模式...,当前布局变形3.不避让,软键盘弹出会挡住下面大部分区域如果使用上抬模式,我们想固定顶部的按钮区不被顶出去,我们可以给顶部按钮区设置expandSafeArea([SafeAreaType.KEYBOARD...因为压缩模式是避让了软键盘的区域,因此布局的高度被压缩了,如果高度设置的是百分比布局,整体高度压缩,自己的高度也会相应的压缩,所以,如果使用压缩模式,可以使用实际高度设置组件的高度。

28110
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android笔记:软键盘弹出遮盖原来界面的布局控件

    给Activity设置软键盘出现与Activity之间的交互模式: 1.在onCreat中的setContent方法之前写入: getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN...windowSoftInputMode各值的含义: 【A】stateUnspecified:软键盘的状态并没有指定,系统将选择一个合适的状态或依赖于主题的设置   【B】stateUnchanged...:当这个activity出现时,软键盘将一直保持在上一个activity里的状态,无论是隐藏还是显示   【C】stateHidden:用户选择activity时,软键盘总是被隐藏   【D】stateAlwaysHidden...:当该Activity主窗口获取焦点时,软键盘也总是被隐藏的   【E】stateVisible:软键盘通常是可见的   【F】stateAlwaysVisible:用户选择activity时,软键盘总是显示的状态...  【G】adjustUnspecified:默认设置,通常由系统自行决定是隐藏还是显示   【H】adjustResize:该Activity总是调整屏幕的大小以便留出软键盘的空间   【I】adjustPan

    1.6K20

    鸿蒙开发:如何解决软键盘弹出后的间距

    虽然说解决了间距问题,但是,沉浸式之后,由于不会避让状态栏与导航栏,会出现底部的组件被遮挡的情况,也就是如下图所示:这种情况下,如果你想实现软键盘弹出后无间距,软键盘收起后,组件在底部导航栏上面,那么就需要代码上的动态设置...,两种方式,一种是监听输入框的输入状态变化,另一种是监听软键盘弹出的状态,根据不同的状态,然后给组件设置距离底部的距离即可。...监听软键盘弹出状态无非就是把输入框的输入状态切换为了软键盘的弹出状态。...0 : this.bottomRectHeight })按照正常逻辑而言,应该和上面的效果是一样的,但偏偏剑走了弯路,当软键盘弹出后输入框明显被遮挡。...我真实服了这个老六,无非就是换了一个监听方式,怎么还给了一个惊喜呢,针对这种情况,建议直接使用第一种方式,当然了,如果你仍然要用这种方式,也不是不行,软键盘弹出后,需要加上被遮挡的高度,也就是44px。

    51400

    鸿蒙开发实战案例:组件随软键盘弹出避让案例

    介绍本示例介绍使用TextInput组件和LazyForEach实现组件随软键盘弹出避让场景。该场景多用于需要用户手动输入文字类应用。...效果图预览使用说明进入案例时,TextInput获焦,弹出系统键盘,点击空白地方键盘收起;点击输入框触发TextInput获焦,弹出系统键盘;点击“弹出键盘”按钮触发TextInput获焦,弹出系统键盘...通过设置defaultFocus属性为true,使TextInput自动获焦,完成进入案例自动拉起键盘;场景二:TextInput组件拥有点击获焦能力,输入框使用TextInput组件即可实现点击输入框弹出系统键盘...basicDataResource | |---BasicDataSource.ets // 数据模型层-LazyForEach控制器模块依赖本实例依赖动态路由模块来实现页面的动态加载

    71520

    js中三种弹出框

    的输入和输出,实现与用户能进行交互的js代码。...今天小编就来简单介绍一下js中的三种弹出对话框,小编先单独对这几个方法进行详细讲解,接着,将这几个方法进行对比,好了,开始我们的js之旅吧`(*∩_∩*)′…… 第一种:alert()方法 alert...,效果如下; 在页面上弹出对话框并显示一句话“上联:山石岩下古木枯”,单击“确认”按钮后再显示第2个对话框并显示“白水泉边少女妙!”...注意:两个对话框是分别显示的,而不是一个覆盖另一个,这是因为js实在执行完第一个alert()并等到用户点击“确认”按钮之后才去执行第二个alert()的。...看下面一个小例子:在页面上两次弹出提示对话框,使用户能输入有关信息,代码如下: ?

    12.5K50

    Ionic3学习笔记(九)关于 Android 端软键盘弹出后界面被压缩的问题

    当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看,整个界面都被压扁了,输入框也不知道去哪儿了。...stateUnspecified 未指定软键盘的状态,系统将自动选择一个合适的状态或依赖于主题中的设置。 stateUnchanged 当前界面的软键盘状态取决于上一个界面的软键盘状态。...stateHidden 用户选择 Activity 时,软键盘总是被隐藏。 stateAlwaysHidden 当该 Activity 主窗口有输入需求时,软键盘总是被隐藏。...stateVisible 软键盘通常可见。 stateAlwaysVisible 用户选择 Activity 时,软键盘总是可见。...adjustUnspecified 未指定软键盘与界面内容之间的显示关系。 adjustResize 该 Activity 总是调整屏幕的大小以便留出软键盘的空间。

    1.3K20

    js实现网页弹出窗口的代码详细教程

    2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。...【6、弹出的窗口之定时关闭控制】 下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的html中,可不是主页面中,否则...)...【9、终极应用--弹出的窗口之cookie控制】 回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)...写到这里弹出窗口的制作和应用技巧基本上算是完成了,需要注意的是,js脚本中的的大小写最好前后保持一致。...详细的js实现网页弹出窗口的教程就结束了,用途很广泛,可以利用其实现每日弹窗搜一搜自己的博客增加展现量,如果有人帮你点,那就更好了,量大的话,权重就出来了。对seo的帮助很大。

    30.6K50
    领券