Flutter中焦点FocusNode使用Flutter输入框焦点事件的捕捉与监听

bigegpt 2024-10-12 05:14 5 浏览

在Flutter使用FocusNode来捕捉监听TextField的焦点获取与失去，同时也可通过FocusNode来使用绑定对应的TextField获取焦点与失去焦点，FocusNode的使用分四步，如下：

第一步创建FocusNode，代码如下：

//创建FocusNode对象实例
 FocusNode focusNode = FocusNode();
 ```
第二步初始化函数中添加焦点监听，代码如下：

```java
/// 输入框焦点事件的捕捉与监听
@override
void initState() {
  super.initState();

   //添加listener监听
   //对应的TextField失去或者获取焦点都会回调此监听
    focusNode.addListener((){
      if (focusNode.hasFocus) {
        print('得到焦点');

      }else{
      print('失去焦点');
      }
    });

}

第三步在TextField中引用FocusNode，代码如下：

new TextField(
  //引用FocusNode
  focusNode: focusNode,
),

第四步在页面Widget销毁时，释放focusNode，代码如下：

//页面销毁
@override
void dispose() {
  super.dispose();
  //释放
  focusNode.dispose();
}

在项目开发中，关于focusNode的常用方法代码如下：

//获取焦点
void getFocusFunction(BuildContext context){
  FocusScope.of(context).requestFocus(focusNode);
}

//失去焦点
void unFocusFunction(){
  focusNode.unfocus();
}

//隐藏键盘而不丢失文本字段焦点：
void hideKeyBoard(){
  SystemChannels.textInput.invokeMethod('TextInput.hide');
}

在实际项目中的一个用户操作习惯就是当输入键盘是弹出状态时，用户点击屏幕的空白处，键盘要隐藏，处理实现思路就是在MaterialApp组件中的第一个根布局设置一上手势兼听，然后在手势兼听中处理隐藏键盘的功能，代码如下：

///6 /lib/code3/main_data85-3.dart
  /// 全局点击空白处理隐藏键盘
  Widget buildMainBody(BuildContext context) {
    return GestureDetector(
      onTap: () {
        //隐藏键盘
        SystemChannels.textInput.invokeMethod('TextInput.hide');
      },
      child: ... ... 省略
    );
  }

完毕

requestfocus

上一篇：Flutter 完美的验证码输入框 flutter密码输入框
下一篇：抖音Android无障碍开发知识总结 android开发无障碍服务

Flutter中焦点FocusNode使用Flutter输入框焦点事件的捕捉与监听

相关推荐

idea本地配置连接远程hadoop集群的一些网络问题解决汇总

Ceph运维手册(基于P版本)

无缓存不行?例行升级的入门级阿斯加特AN2 SSD装机点评

大数据开发前要做什么准备?8台Hadoop服务器进行集群规划前配置

Tensorflow分类loss函数总结 tensorflow绘制loss曲线

R语言学习笔记(七) -离散型数据的模型预测2

iOS Runtime详解

7 个对 Java 意义重大的性能指标，你知道几个?

PHP 远程调试最佳实践

Laravel框架使用图片处理简单教程