詳解Flutter點(diǎn)擊空白隱藏鍵盤的全局做法
開發(fā)原生頁面的時(shí)候,在處理鍵盤事件上,通常的需求是,點(diǎn)擊輸入框外屏幕,要隱藏鍵盤,同樣的,這樣的需求也需要在 Flutter 上實(shí)現(xiàn),
Android 上的實(shí)現(xiàn)方式是在基類 Activity 里實(shí)現(xiàn)事件分發(fā),判斷觸摸位置是否在輸入框內(nèi)。
/** * 獲取點(diǎn)擊事件 */ @CallSuper @Override public boolean dispatchTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.MotionEvent ) { View view = getCurrentFocus(); if (isShouldHideKeyBord(view, ev)) { hideSoftInput(view.getWindowToken()); } } return super.dispatchTouchEvent(ev); } /** * 判定當(dāng)前是否需要隱藏 */ protected boolean isShouldHideKeyBord(View v, MotionEvent ev) { if (v != null && (v instanceof EditText)) { int[] l = {0, 0}; v.getLocationInWindow(l); int left = l[0], top = l[1], bottom = top + v.getHeight(), right = left + v.getWidth(); return !(ev.getX() > left && ev.getX() < right && ev.getY() > top && ev.getY() < bottom); } return false; } /** * 隱藏軟鍵盤 */ private void hideSoftInput(IBinder token) { if (token != null) { InputMethodManager manager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE); manager.hideSoftInputFromWindow(token, InputMethodManager.HIDE_NOT_ALWAYS); } }
那么在 Flutter 上如何實(shí)現(xiàn)呢?
許多文章的做法如下,每個(gè)包含TextField的屏幕中包裹GestureDetector,手動(dòng)控制Focus。一旦失去焦點(diǎn),就請(qǐng)求關(guān)閉鍵盤。這是一個(gè)臨時(shí)的解決方案,容易出錯(cuò),并且生成大量代碼。
GestureDetector( behavior: HitTestBehavior.translucent, onTap: () { // 觸摸收起鍵盤 FocusScope.of(context).requestFocus(FocusNode()); }, child: ******* }
通常這種需求是對(duì)應(yīng)整個(gè) app 的,有沒有一勞永逸的方法呢?當(dāng)然有,我們可以借助MaterialApp的builder方法,在 Navigator上方但在其他小部件下方插入小部件,僅添加了一個(gè)“全局” GestureDetector,它將為我們處理鍵盤關(guān)閉:
void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), builder: (context, child) => Scaffold( // Global GestureDetector that will dismiss the keyboard body: GestureDetector( onTap: () { hideKeyboard(context); }, child: child, ), ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } void hideKeyboard(BuildContext context) { FocusScopeNode currentFocus = FocusScope.of(context); if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) { FocusManager.instance.primaryFocus.unfocus(); } } }
當(dāng)然也可以使用下面這個(gè)方法關(guān)閉鍵盤:
SystemChannels.textInput.invokeMethod('TextInput.hide');
這樣就全局控制,再也不用在每個(gè)頁面寫了。
到此這篇關(guān)于詳解Flutter點(diǎn)擊空白隱藏鍵盤的全局做法的文章就介紹到這了,更多相關(guān)Flutter點(diǎn)擊空白隱藏鍵盤內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Android實(shí)現(xiàn)懸浮窗全系統(tǒng)版本
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)懸浮窗全系統(tǒng)版本,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11XListView實(shí)現(xiàn)網(wǎng)絡(luò)加載圖片和下拉刷新
這篇文章主要為大家詳細(xì)介紹了XListView實(shí)現(xiàn)網(wǎng)絡(luò)加載圖片和下拉刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android 實(shí)現(xiàn)錨點(diǎn)定位思路詳解
本篇文章就使用tablayout、scrollview來實(shí)現(xiàn)android錨點(diǎn)定位的功能。通過<a href="#head" rel="external nofollow" > 去設(shè)置頁面內(nèi)錨點(diǎn)定位跳轉(zhuǎn)。具體實(shí)現(xiàn)思路大家跟隨腳本之家小編一起通過本文看下吧2018-07-07flutter實(shí)現(xiàn)頁面多個(gè)webview的方案詳解
這篇文章主要為大家詳細(xì)介紹了flutter如何實(shí)現(xiàn)頁面多個(gè)webview的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起了解下2023-09-09完美實(shí)現(xiàn)ExpandableListView二級(jí)分欄效果
這篇文章主要為大家詳細(xì)介紹了ExpandableListView實(shí)現(xiàn)二級(jí)分欄效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Android studio 自動(dòng)換行和取消自動(dòng)換行操作
這篇文章主要介紹了Android studio 自動(dòng)換行和取消自動(dòng)換行操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04Android自定義dialog 自下往上彈出的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了Android自定義dialog 自下往上彈出效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08Android自定義對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Android自定義對(duì)話框的簡(jiǎn)單實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07