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软键盘原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Android利用Espresso进行UI自动化测试的方法详解
因为我是搞android开发的,所以被分到了自动化测试小组,所以了解了一些UI自动化测试。下面这篇文章主要给大家介绍了关于Android利用Espresso进行UI自动化测试的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。2017-12-12Android带清除功能的输入框控件EditTextWithDel
这篇文章主要为大家详细介绍了Android带清除功能的输入框控件EditTextWithDel,感兴趣的小伙伴们可以参考一下2016-09-09利用Android中BitmapShader制作自带边框的圆形头像
这篇文章给大家介绍了一下如何利用BitmapShader制作圆形头像,可以自定义要显示的图片,边框颜色和边框宽度等,有需要的朋友们可以参考借鉴。2016-09-09
最新评论