Flutter軟鍵盤的原理淺析
Flutter頁面在軟鍵盤彈出的時候，可以設置 Scaffold 的 resizeToAvoidBottomInset 屬性來設置軟鍵盤的處理。
當這個值為true的時候，頁面會進行重新布局。那么我們應該如何監(jiān)聽 Flutter 的鍵盤彈出和頁面的高度變化?
我們從 Flutter 鍵盤彈出說起。當一個輸入框 TextField 的焦點變化的時候，焦點變化會執(zhí)行
_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 端實現(xiàn)
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 端，軟鍵盤的高度在底部欄可見的時候取的就是系統(tǒng) window inset 的 bottom。
如果不可見，就會根據 bottom inset 的占比去猜測。當這個高度大于 0.18 的時候，就會認為是鍵盤彈出。
當判斷是軟鍵盤后，會通過刷新 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);
}
經過上面的理論分析，我們可以得出結論，F(xiàn)lutter 軟鍵盤的高度變化體現(xiàn)在 metrics 的變化。具體的值，則體現(xiàn)在 window.viewInsets.bottom 中。
總結
到此這篇關于Flutter軟鍵盤原理的文章就介紹到這了,更多相關Flutter軟鍵盤原理內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Android獲取周圍WIFI熱點服務的相關資料，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了Android相機Camera基礎知識，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
這篇文章主要介紹了Android TextView字體顏色設置方法,結合實例形式總結分析了Android開發(fā)中TextView設置字體顏色的常用技巧,需要的朋友可以參考下2016-02-02
這篇文章主要給大家介紹了關于Android如何動態(tài)調整應用字體大小的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-05-05
Android利用Espresso進行UI自動化測試的方法詳解
因為我是搞android開發(fā)的，所以被分到了自動化測試小組，所以了解了一些UI自動化測試。下面這篇文章主要給大家介紹了關于Android利用Espresso進行UI自動化測試的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-12-12
微信聊天窗口的信息效果類似iphone上的短信效果，以氣泡的形式展現(xiàn),實現(xiàn)這種效果主要用到ListView和BaseAdapter，配合布局以及相關素材，接下來為大家介紹下如何實現(xiàn)2013-04-04
本文是筆者在學習安卓開發(fā)的過程中的一些經驗之談的分享，希望對大家學習安卓開發(fā)能夠有所幫助。2015-12-12
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)遙控器按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
Android帶清除功能的輸入框控件EditTextWithDel
這篇文章主要為大家詳細介紹了Android帶清除功能的輸入框控件EditTextWithDel，感興趣的小伙伴們可以參考一下2016-09-09
利用Android中BitmapShader制作自帶邊框的圓形頭像
這篇文章給大家介紹了一下如何利用BitmapShader制作圓形頭像，可以自定義要顯示的圖片，邊框顏色和邊框寬度等，有需要的朋友們可以參考借鑒。2016-09-09