详解Flutter点击空白隐藏键盘的全局做法

 更新时间:2020年11月27日 10:26:24   作者:艾维码  
这篇文章主要介绍了详解Flutter点击空白隐藏键盘的全局做法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

开发原生页面的时候,在处理键盘事件上,通常的需求是,点击输入框外屏幕,要隐藏键盘,同样的,这样的需求也需要在 Flutter 上实现,

Android 上的实现方式是在基类 Activity 里实现事件分发,判断触摸位置是否在输入框内。

 /**
   * 获取点击事件
   */
  @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 上如何实现呢?

许多文章的做法如下,每个包含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点击空白隐藏键盘内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Android实现悬浮窗全系统版本

    Android实现悬浮窗全系统版本

    这篇文章主要为大家详细介绍了Android实现悬浮窗全系统版本,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Android支付宝和微信支付集成

    Android支付宝和微信支付集成

    这篇文章主要为大家详细介绍了Android支付宝和微信支付集成的相关资料,需要的朋友可以参考下
    2016-07-07
  • XListView实现网络加载图片和下拉刷新

    XListView实现网络加载图片和下拉刷新

    这篇文章主要为大家详细介绍了XListView实现网络加载图片和下拉刷新,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Android 实现锚点定位思路详解

    Android 实现锚点定位思路详解

    本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。通过<a href="#head" rel="external nofollow" > 去设置页面内锚点定位跳转。具体实现思路大家跟随脚本之家小编一起通过本文看下吧
    2018-07-07
  • flutter实现页面多个webview的方案详解

    flutter实现页面多个webview的方案详解

    这篇文章主要为大家详细介绍了flutter如何实现页面多个webview的效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解下
    2023-09-09
  • 完美实现ExpandableListView二级分栏效果

    完美实现ExpandableListView二级分栏效果

    这篇文章主要为大家详细介绍了ExpandableListView实现二级分栏效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • Android studio 自动换行和取消自动换行操作

    Android studio 自动换行和取消自动换行操作

    这篇文章主要介绍了Android studio 自动换行和取消自动换行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-04-04
  • Android仿微信发朋友圈浏览图片效果

    Android仿微信发朋友圈浏览图片效果

    这篇文章主要介绍了Android仿微信发朋友圈浏览图片效果的相关资料,需要的朋友可以参考下
    2016-01-01
  • Android自定义dialog 自下往上弹出的实例代码

    Android自定义dialog 自下往上弹出的实例代码

    本文通过实例代码给大家介绍了Android自定义dialog 自下往上弹出效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-08-08
  • Android自定义对话框的简单实现

    Android自定义对话框的简单实现

    这篇文章主要为大家详细介绍了Android自定义对话框的简单实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07

最新评论