詳解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-11
XListView實(shí)現(xiàn)網(wǎng)絡(luò)加載圖片和下拉刷新
這篇文章主要為大家詳細(xì)介紹了XListView實(shí)現(xiàn)網(wǎng)絡(luò)加載圖片和下拉刷新,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11
Android 實(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-07
flutter實(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-11
Android studio 自動(dòng)換行和取消自動(dòng)換行操作
這篇文章主要介紹了Android studio 自動(dòng)換行和取消自動(dòng)換行操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-04-04
Android自定義dialog 自下往上彈出的實(shí)例代碼
本文通過實(shí)例代碼給大家介紹了Android自定義dialog 自下往上彈出效果,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-08-08
Android自定義對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Android自定義對(duì)話框的簡(jiǎn)單實(shí)現(xiàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07

