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

相关文章

  • 根据USER-AGENT判断手机类型并跳转到相应的app下载页面

    根据USER-AGENT判断手机类型并跳转到相应的app下载页面

    检测浏览器的USER-AGENT,然后根据正则表达式来确定客户端类型,并跳转到相应的app下载页面,这个方法还是比较实用的,大家可以看看
    2014-09-09
  • android调试工具adb命令大全

    android调试工具adb命令大全

    这篇文章主要介绍了android调试工具adb的作用、使用方法以及命令大全,需要的朋友可以参考下
    2014-03-03
  • Flutter实现倒计时功能

    Flutter实现倒计时功能

    这篇文章主要为大家详细介绍了Flutter实现倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Android拖动条的实现代码

    Android拖动条的实现代码

    这篇文章主要为大家详细介绍了Android拖动条的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • Android listview多视图嵌套多视图

    Android listview多视图嵌套多视图

    这篇文章主要介绍了Android listview多视图嵌套多视图 的相关资料,需要的朋友可以参考下
    2016-02-02
  • Android实现TCP客户端接收数据的方法

    Android实现TCP客户端接收数据的方法

    这篇文章主要介绍了Android实现TCP客户端接收数据的方法,较为详细的分析了Android基于TCP实现客户端接收数据的相关技巧与注意事项,需要的朋友可以参考下
    2016-04-04
  • 操作SD卡中文件夹和文件的方法

    操作SD卡中文件夹和文件的方法

    操作SD卡中文件夹和文件的方法,需要的朋友可以参考一下
    2013-04-04
  • Android自定义View实现课程表表格

    Android自定义View实现课程表表格

    这篇文章主要为大家详细介绍了Android自定义View实现课程表表格,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-03-03
  • Android调用手机摄像头的方法

    Android调用手机摄像头的方法

    这篇文章主要为大家详细介绍了Android调用手机摄像头的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • Android中Hilt的使用详解

    Android中Hilt的使用详解

    Hilt 是 Android 的依赖项注入库,可减少在项目中执行手动依赖项注入的样板代码,本文就来为大家介绍一下Hilt的具体使用吧,希望对大家有所帮助
    2023-06-06

最新评论