詳解Flutter點(diǎn)擊空白隱藏鍵盤(pán)的全局做法

更新時(shí)間：2020年11月27日 10:26:24 作者：艾維碼

這篇文章主要介紹了詳解Flutter點(diǎn)擊空白隱藏鍵盤(pán)的全局做法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

開(kāi)發(fā)原生頁(yè)面的時(shí)候，在處理鍵盤(pán)事件上，通常的需求是，點(diǎn)擊輸入框外屏幕，要隱藏鍵盤(pán)，同樣的，這樣的需求也需要在 Flutter 上實(shí)現(xiàn)，

Android 上的實(shí)現(xiàn)方式是在基類(lèi) 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;
  }

  /**
   * 隱藏軟鍵盤(pán)
   */
  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)閉鍵盤(pán)。這是一個(gè)臨時(shí)的解決方案，容易出錯(cuò)，并且生成大量代碼。

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    // 觸摸收起鍵盤(pán)
    FocusScope.of(context).requestFocus(FocusNode());
  },
  child: *******
}

通常這種需求是對(duì)應(yīng)整個(gè) app 的，有沒(méi)有一勞永逸的方法呢？當(dāng)然有，我們可以借助MaterialApp的builder方法，在 Navigator上方但在其他小部件下方插入小部件，僅添加了一個(gè)“全局” GestureDetector，它將為我們處理鍵盤(pán)關(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)閉鍵盤(pán)：

SystemChannels.textInput.invokeMethod（'TextInput.hide'）;

這樣就全局控制，再也不用在每個(gè)頁(yè)面寫(xiě)了。

到此這篇關(guān)于詳解Flutter點(diǎn)擊空白隱藏鍵盤(pán)的全局做法的文章就介紹到這了,更多相關(guān)Flutter點(diǎn)擊空白隱藏鍵盤(pán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: