Flutter軟鍵盤的原理淺析
Flutter頁(yè)面在軟鍵盤彈出的時(shí)候，可以設(shè)置 Scaffold 的 resizeToAvoidBottomInset 屬性來(lái)設(shè)置軟鍵盤的處理。
當(dāng)這個(gè)值為true的時(shí)候，頁(yè)面會(huì)進(jìn)行重新布局。那么我們應(yīng)該如何監(jiān)聽 Flutter 的鍵盤彈出和頁(yè)面的高度變化?
我們從 Flutter 鍵盤彈出說(shuō)起。當(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 來(lái)打開軟鍵盤。這里的 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 的占比去猜測(cè)。當(dāng)這個(gè)高度大于 0.18 的時(shí)候，就會(huì)認(rèn)為是鍵盤彈出。
當(dāng)判斷是軟鍵盤后，會(huì)通過刷新 ViewportMetrics 來(lái)觸發(fā)頁(yè)面重繪:
// 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 中。
總結(jié)
到此這篇關(guān)于Flutter軟鍵盤原理的文章就介紹到這了,更多相關(guān)Flutter軟鍵盤原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android獲取周圍WIFI熱點(diǎn)服務(wù)的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-07-07
Android相機(jī)Camera基礎(chǔ)知識(shí)
這篇文章主要為大家詳細(xì)介紹了Android相機(jī)Camera基礎(chǔ)知識(shí)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
Android TextView字體顏色設(shè)置方法小結(jié)
這篇文章主要介紹了Android TextView字體顏色設(shè)置方法,結(jié)合實(shí)例形式總結(jié)分析了Android開發(fā)中TextView設(shè)置字體顏色的常用技巧,需要的朋友可以參考下2016-02-02
Android如何動(dòng)態(tài)調(diào)整應(yīng)用字體大小詳解
這篇文章主要給大家介紹了關(guān)于Android如何動(dòng)態(tài)調(diào)整應(yīng)用字體大小的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
Android利用Espresso進(jìn)行UI自動(dòng)化測(cè)試的方法詳解
因?yàn)槲沂歉鉧ndroid開發(fā)的，所以被分到了自動(dòng)化測(cè)試小組，所以了解了一些UI自動(dòng)化測(cè)試。下面這篇文章主要給大家介紹了關(guān)于Android利用Espresso進(jìn)行UI自動(dòng)化測(cè)試的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-12-12
android 仿微信聊天氣泡效果實(shí)現(xiàn)思路
微信聊天窗口的信息效果類似iphone上的短信效果，以氣泡的形式展現(xiàn),實(shí)現(xiàn)這種效果主要用到ListView和BaseAdapter，配合布局以及相關(guān)素材，接下來(lái)為大家介紹下如何實(shí)現(xiàn)2013-04-04
本文是筆者在學(xué)習(xí)安卓開發(fā)的過程中的一些經(jīng)驗(yàn)之談的分享，希望對(duì)大家學(xué)習(xí)安卓開發(fā)能夠有所幫助。2015-12-12
Android自定義View實(shí)現(xiàn)遙控器按鈕
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)遙控器按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
Android帶清除功能的輸入框控件EditTextWithDel
這篇文章主要為大家詳細(xì)介紹了Android帶清除功能的輸入框控件EditTextWithDel，感興趣的小伙伴們可以參考一下2016-09-09
利用Android中BitmapShader制作自帶邊框的圓形頭像
這篇文章給大家介紹了一下如何利用BitmapShader制作圓形頭像，可以自定義要顯示的圖片，邊框顏色和邊框?qū)挾鹊?，有需要的朋友們可以參考借鑒。2016-09-09