打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
Flutter中焦点控制FocusNode、Flutter输入框焦点事件的捕捉与监听

在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组件中的第一个根布局设置一上手势兼听,然后在手势兼听中处理隐藏键盘的功能,代码如下:

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

完毕

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
超过百万的StackOverflow Flutter 问题
iOS开发 UITextField字符限制
IOS中多个UITextField的键盘处理
java 用户响应事件
java必学必会之GUI编程
GUI编程
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服