Shulou(Shulou.com)06/03 Report--

This article introduces the relevant knowledge of "how to understand the principle of Flutter soft keyboard". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

When the Flutter page pops up on the soft keyboard, you can set the resizeToAvoidBottomInset property of Scaffold to set the processing of the soft keyboard.

When this value is true, the page will be rearranged. So how should we monitor the Flutter keyboard pop-up and page height changes?

Let's start with the Flutter keyboard pop-up. When the focus of an input box TextField changes, the focus change is executed

_ openOrCloseInputConnectionIfNeeded method:

If (_ hasFocus & & widget.focusNode.consumeKeyboardToken ()) {_ openInputConnection ();} else if (! _ hasFocus) {_ closeInputConnectionIfNeeded (); widget.controller.clearComposing ();}

Here, the show method of TextInputConnection will be called to open the keyboard:

Void _ show () {_ channel.invokeMethod ('TextInput.show');}

Here, the method TextInput.show will be called through the call of _ show

/ / implement mImm = (InputMethodManager) view.getContext () .getSystemService (Context.INPUT_METHOD_SERVICE) on the android side; / / TextInputHandlerprivate void showTextInput (View view) {view.requestFocus (); mImm.showSoftInput (view, 0);}

On the Android side, the last step is to call InputMethodManager to open the soft keyboard. The word view here refers to FlutterView.

At this point, the onApplyWindowInsets of View will be called:

/ / FlutterViewmMetrics.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 ();}}

Here we can see that on the Android side, the height of the soft keyboard is the bottom of the system window inset when the height of the soft keyboard is visible in the bottom bar.

If it is not visible, it will be guessed based on the percentage of bottom inset. When this height is greater than 0.18, it will be considered to be a keyboard pop-up.

When it is determined to be a soft keyboard, the page redrawing will be triggered by refreshing ViewportMetrics:

/ / FlutterViewprivate void updateViewportMetrics () {if (! isAttached ()) return MNativeView .getFlutter JNI () .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) }

The entry for metrics updates on the Dart side is in hooks.dart.

@ pragma ('vm:entry-point') void _ updateWindowMetrics (/ /... Omit parameter) {_ invoke_ (window.onMetricsChanged, window._onMetricsChangedZone);}

After the above theoretical analysis, we can draw a conclusion that the height change of Flutter soft keyboard is reflected in the change of metrics. The specific value is reflected in window.viewInsets.bottom.

This is the end of the content of "how to understand the principle of Flutter soft keyboard". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.