詳解Flutter點擊空白隱藏鍵盤的全局做法
開發(fā)原生頁面的時候,在處理鍵盤事件上,通常的需求是,點擊輸入框外屏幕,要隱藏鍵盤,同樣的,這樣的需求也需要在 Flutter 上實現(xiàn),
Android 上的實現(xiàn)方式是在基類 Activity 里實現(xiàn)事件分發(fā),判斷觸摸位置是否在輸入框內(nèi)。
/** * 獲取點擊事件 */ @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); } /** * 判定當前是否需要隱藏 */ 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 上如何實現(xiàn)呢?
許多文章的做法如下,每個包含TextField的屏幕中包裹GestureDetector,手動控制Focus。一旦失去焦點,就請求關閉鍵盤。這是一個臨時的解決方案,容易出錯,并且生成大量代碼。
GestureDetector( behavior: HitTestBehavior.translucent, onTap: () { // 觸摸收起鍵盤 FocusScope.of(context).requestFocus(FocusNode()); }, child: ******* }
通常這種需求是對應整個 app 的,有沒有一勞永逸的方法呢?當然有,我們可以借助MaterialApp的builder方法,在 Navigator上方但在其他小部件下方插入小部件,僅添加了一個“全局” GestureDetector,它將為我們處理鍵盤關閉:
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(); } } }
當然也可以使用下面這個方法關閉鍵盤:
SystemChannels.textInput.invokeMethod('TextInput.hide');
這樣就全局控制,再也不用在每個頁面寫了。
到此這篇關于詳解Flutter點擊空白隱藏鍵盤的全局做法的文章就介紹到這了,更多相關Flutter點擊空白隱藏鍵盤內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
XListView實現(xiàn)網(wǎng)絡加載圖片和下拉刷新
這篇文章主要為大家詳細介紹了XListView實現(xiàn)網(wǎng)絡加載圖片和下拉刷新,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11flutter實現(xiàn)頁面多個webview的方案詳解
這篇文章主要為大家詳細介紹了flutter如何實現(xiàn)頁面多個webview的效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起了解下2023-09-09完美實現(xiàn)ExpandableListView二級分欄效果
這篇文章主要為大家詳細介紹了ExpandableListView實現(xiàn)二級分欄效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-11-11