Flutter軟鍵盤的原理淺析
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 中。
總結(jié)
到此這篇關(guān)于Flutter軟鍵盤原理的文章就介紹到這了,更多相關(guān)Flutter軟鍵盤原理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android TabHost選項(xiàng)卡標(biāo)簽圖標(biāo)始終不出現(xiàn)的解決方法
這篇文章主要介紹了Android TabHost選項(xiàng)卡標(biāo)簽圖標(biāo)始終不出現(xiàn)的解決方法,涉及Android界面布局相關(guān)屬性與狀態(tài)設(shè)置操作技巧,需要的朋友可以參考下2019-03-03
Android進(jìn)階事件分發(fā)機(jī)制解決事件沖突
這篇文章主要為大家介紹了Android進(jìn)階事件分發(fā)機(jī)制解決事件沖突過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01
android實(shí)現(xiàn)點(diǎn)擊按鈕控制圖片切換
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)點(diǎn)擊按鈕控制圖片切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-01-01
Android中通過樣式來去除app的頭及界面全屏(備忘)的實(shí)現(xiàn)方法
這篇文章主要介紹了Android中通過樣式來去除app的頭及界面全屏(備忘)的相關(guān)資料,需要的朋友可以參考下2016-12-12
Android常用控件ImageSwitcher使用方法詳解
這篇文章主要為大家詳細(xì)介紹了Android常用控件ImageSwitcher的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08
Android自定義Gallery控件實(shí)現(xiàn)3D圖片瀏覽器
這篇文章主要介紹了Android自定義Gallery控件實(shí)現(xiàn)3D圖片瀏覽器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-04-04
Android基于reclyview實(shí)現(xiàn)列表回彈動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Android基于reclyview實(shí)現(xiàn)列表回彈動(dòng)畫效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04
Android程序開發(fā)之手機(jī)APP創(chuàng)建桌面快捷方式
這篇文章主要介紹了Android程序開發(fā)之手機(jī)APP創(chuàng)建桌面快捷方式 的相關(guān)資料,需要的朋友可以參考下2016-04-04

