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('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软键盘原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！