Flutter软键盘的原理浅析
Flutter页面在软键盘弹出的时候,可以设置 Scaffold 的 resizeToAvoidBottomInset 属性来设置软键盘的处理。
当这个值为true的时候,页面会进行重新布局。那么我们应该如何监听 Flutter 的键盘弹出和页面的高度变化?
我们从 Flutter 键盘弹出说起。当一个输入框 TextField 的焦点变化的时候,焦点变化会执行
_openOrCloseInputConnectionIfNeeded 方法:
if (_hasFocus && widget.focusNode.consumeKeyboardToken()) { _openInputConnection(); } else if (!_hasFocus) { _closeInputConnectionIfNeeded(); widget.controller.clearComposing(); }
这里会调用 TextInputConnection 的 show 方法打开键盘:
void _show() { _channel.invokeMethod<void>('TextInput.show'); }
这里会通过 _show 的调用,去调 TextInput.show 这个方法
// android 端实现 mImm = (InputMethodManager) view.getContext().getSystemService(Context.INPUT_METHOD_SERVICE); // TextInputHandler private void showTextInput(View view) { view.requestFocus(); mImm.showSoftInput(view, 0); }
在Android 端,最后是调用 InputMethodManager 来打开软键盘。这里的 view 指的就是 FlutterView 。
此时 View 的 onApplyWindowInsets 会被调用:
// FlutterView mMetrics.physicalViewInsetBottom = navigationBarVisible ? insets.getSystemWindowInsetBottom() : guessBottomKeyboardInset(insets); updateViewportMetrics(); private int guessBottomKeyboardInset(WindowInsets insets) { int screenHeight = getRootView().getHeight(); // Magic number due to this being a heuristic. This should be replaced, but we have not // found a clean way to do it yet (Sept. 2018) final double keyboardHeightRatioHeuristic = 0.18; if (insets.getSystemWindowInsetBottom() < screenHeight * keyboardHeightRatioHeuristic) { // Is not a keyboard, so return zero as inset. return 0; } else { // Is a keyboard, so return the full inset. return insets.getSystemWindowInsetBottom(); } }
这里我们可以看到,在 Android 端,软键盘的高度在底部栏可见的时候取的就是系统 window inset 的 bottom。
如果不可见,就会根据 bottom inset 的占比去猜测。当这个高度大于 0.18 的时候,就会认为是键盘弹出。
当判断是软键盘后,会通过刷新 ViewportMetrics 来触发页面重绘:
// FlutterView private void updateViewportMetrics() { if (!isAttached()) return; mNativeView .getFlutterJNI() .setViewportMetrics( mMetrics.devicePixelRatio, mMetrics.physicalWidth, mMetrics.physicalHeight, mMetrics.physicalPaddingTop, mMetrics.physicalPaddingRight, mMetrics.physicalPaddingBottom, mMetrics.physicalPaddingLeft, mMetrics.physicalViewInsetTop, mMetrics.physicalViewInsetRight, mMetrics.physicalViewInsetBottom, mMetrics.physicalViewInsetLeft, mMetrics.systemGestureInsetTop, mMetrics.systemGestureInsetRight, mMetrics.systemGestureInsetBottom, mMetrics.systemGestureInsetLeft); }
metrics 更新在 Dart 端的入口在 hooks.dart 中
@pragma('vm:entry-point') void _updateWindowMetrics( //...省略参数 ) { _invoke(window.onMetricsChanged, window._onMetricsChangedZone); }
经过上面的理论分析,我们可以得出结论,Flutter 软键盘的高度变化体现在 metrics 的变化。具体的值,则体现在 window.viewInsets.bottom 中。
总结
到此这篇关于Flutter软键盘原理的文章就介绍到这了,更多相关Flutter软键盘原理内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 说到php的运行机制还要先给大家介绍php的模块,PHP总共有三个模块:内核、Zend引擎、以及扩展层;PHP内核用来处理请求、文件流、错误处理等相关操作;Zend引擎(ZE)用以将源文件转换成机器语言,然后在虚拟机上运行它;扩展层是一组...2015-11-24
- 这篇文章主要介绍了java中Base64编码原理实例讲解,文章讲解的很清晰,有对于这方面不太懂的同学可以研究下...2021-02-10
- 本文主要介绍了Vue3中key的作用和工作原理,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-10-13
- 这篇文章主要介绍了C# URL短地址压缩算法及短网址原理解析,本文重点给出了算法代码,需要的朋友可以参考下...2020-06-25
- Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理,是目前使用范围最广的版本管理工具,本文重点给大家介绍在Visual Studio 中使用git及git的工作原理,感兴趣的朋友一起看看吧...2021-05-19
- 这篇文章主要介绍了Python基础之Socket通信原理,文中有非常详细的代码示例,对正在学习python基础的小伙伴们有非常好的帮助,需要的朋友可以参考下...2021-04-22
Flutter悬浮按钮FloatingActionButton使用详解
本文主要介绍了Flutter悬浮按钮FloatingActionButton使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-07-12- 登录页面在 App 开发中非常常见,本篇借登录页面的开发介绍了文本框 TextField组件的使用,同时使用文本框的装饰属性实现了个性化文本框设置。...2021-06-05
Flutter 底部弹窗ModelBottomSheet的使用示例
在实际开发过程中,经常会用到底部弹窗来进行快捷操作,例如选择一个选项,选择下一步操作等等。在 Flutter 中提供了一个 showModelBottomSheet 方法用于弹出底部弹窗,本篇介绍如何使用底部弹窗。...2021-06-07- 今天带大家了解SpringBoot的相关知识,文中对SpringBoot的配置原理作了非常详细的图文示例及介绍,需要的朋友可以参考下...2021-06-04
- 在实际开发过程中,往往开始是完成功能层面的开发,然而再考虑组件封装和代码优化。当然,组件封装越早做越好,因为这样会提高整个团队开发的规范性和效率。本文将介绍如何封装一个文本输入框组件...2021-06-05
- 这篇文章主要介绍了Flutter项目在 iOS14 启动崩溃的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-09-24
- 这篇文章主要介绍了flutter实现点击事件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-26
- cgroup的内核通过hook钩子来实现管理进程资源,提供了一个统一的接口,从单个进程的资源控制到操作系统层面的虚拟卡的过渡,今天通过本文给大家介绍Docker核心原理之 Cgroup详解,需要的朋友参考下吧...2021-07-07
- 这篇文章主要介绍了JavaScript 详解预编译原理的相关资料,需要的朋友可以参考下...2017-01-26
- 这篇文章主要介绍了病毒程序原理,写个小程序做演示,大家可以参考这个以防中相似C病毒...2020-04-25
- 一般学习的时候也是先总览一下整体,然后逐个部分个个击破,最后形成思路,了解具体细节,Tomcat的结构很复杂,但是Tomcat非常的模块化,找到了Tomcat最核心的模块,问题才可以游刃而解,了解了Tomcat的整体架构对以后深入了解Tomcat来说至关重要...2021-06-23
- Flutter是Google推出的基于Dart语言开发的跨平台开源UI框架,旨在统一纷纷扰扰的跨平台开发框架,在UI层面上多端共用一套Dart代码来实现多平台适配开发,这篇文章主要介绍了flutter的环境安装配置问题,需要的朋友可以参考下...2020-06-09
- 缓存技术: 有些信息比方经常不变的,但是还是能变的信息放在缓存中以加快显示速度,这是很有价值的,所谓的缓存,通俗的理解就是一些保存在服务器端的共用信息.它是...2016-11-25
- Cookies是 web站点放置到你的硬盘上的程序。它们驻留在你的计算机上收集关于你在因特网上所做的一切事情的信息,并且 web站点可以在任何时候读取到Cookies收集到的所有信息...2021-06-21