Flutter FocusNode输入框焦点控制概述
2023-09-11 14:14:53 时间
题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
在Flutter使用FocusNode来捕捉监听TextField的焦点获取与失去,同时也可通过FocusNode来使用绑定对应的TextField获取焦点与失去焦点,FocusNode的使用分四步,如下:
第一步创建FocusNode,代码如下:
//创建FocusNode对象实例
FocusNode focusNode = FocusNode();
第二步初始化函数中添加焦点监听,代码如下:
/// 输入框焦点事件的捕捉与监听
@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: ... ... 省略
);
}
相关文章
- NGUI之UICamera控制触摸,鼠标事件
- 控制语句和循环
- Flutter Android Toast Message(flutter访问Android Toast Message)
- 【学习总结】网络-TCP拥塞控制
- Flutter原理 flutter架构、flutter UI系统、BuildContext、Widget与Element、命中测试hitTest、flutter显示流程分析
- C++:C++编程语言学习之基本数据类型/流程控制(if else/switch/for/while循环语句)的简介、案例应用之详细攻略
- Flutter 开发环境搭建Unable to ‘pub upgrade‘ flutter tool. Retrying in five seconds...
- LabVIEW编程LabVIEW开发雷赛SMC6480运动控制模块例程与相关资料
- 你知道代码是如何控制硬件的吗?
- Flutter 官方自带日期组件 和第三方 日期组件、轮播图 flutter_swiper
- Go 同步原语:sync 包让你对并发控制得心应手