如何理解Flutter軟鍵盤的原理

本篇內(nèi)容介紹了“如何理解Flutter軟鍵盤的原理”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Flutter頁面在軟鍵盤彈出的時(shí)候，可以設(shè)置 Scaffold 的 resizeToAvoidBottomInset 屬性來設(shè)置軟鍵盤的處理。

當(dāng)這個(gè)值為true的時(shí)候，頁面會(huì)進(jìn)行重新布局。那么我們應(yīng)該如何監(jiān)聽 Flutter 的鍵盤彈出和頁面的高度變化?

我們從 Flutter 鍵盤彈出說起。當(dāng)一個(gè)輸入框 TextField 的焦點(diǎn)變化的時(shí)候，焦點(diǎn)變化會(huì)執(zhí)行
_openOrCloseInputConnectionIfNeeded 方法：

if (_hasFocus && widget.focusNode.consumeKeyboardToken()) {
      _openInputConnection();
    } else if (!_hasFocus) {
      _closeInputConnectionIfNeeded();
      widget.controller.clearComposing();
    }

這里會(huì)調(diào)用 TextInputConnection 的 show 方法打開鍵盤：

void _show() {
    _channel.invokeMethod<void>('TextInput.show');
  }

這里會(huì)通過 _show 的調(diào)用，去調(diào) TextInput.show 這個(gè)方法

// android 端實(shí)現(xiàn)
mImm = (InputMethodManager) view.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);

// TextInputHandler
private void showTextInput(View view) {
    view.requestFocus();
    mImm.showSoftInput(view, 0);
 }

在Android 端，最后是調(diào)用 InputMethodManager 來打開軟鍵盤。這里的 view 指的就是 FlutterView 。

此時(shí) View 的 onApplyWindowInsets 會(huì)被調(diào)用：

// 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 端，軟鍵盤的高度在底部欄可見的時(shí)候取的就是系統(tǒng) window inset 的 bottom。

如果不可見，就會(huì)根據(jù) bottom inset 的占比去猜測。當(dāng)這個(gè)高度大于 0.18 的時(shí)候，就會(huì)認(rèn)為是鍵盤彈出。

當(dāng)判斷是軟鍵盤后，會(huì)通過刷新 ViewportMetrics 來觸發(fā)頁面重繪:

// 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(
  	//...省略參數(shù)
) {
	_invoke(window.onMetricsChanged, window._onMetricsChangedZone);

}

經(jīng)過上面的理論分析，我們可以得出結(jié)論，F(xiàn)lutter 軟鍵盤的高度變化體現(xiàn)在 metrics  的變化。具體的值，則體現(xiàn)在 window.viewInsets.bottom 中。

“如何理解Flutter軟鍵盤的原理”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！