Flutter 全局点击空白处隐藏键盘实战
老孟导读：为什么要实现点击空白处隐藏键盘？因为这是iOS平台的默认行为，Android平台由于其弹出的键盘右上角默认带有关闭键盘的按钮，所以点击空白处不会隐藏键盘。
对于单个页面来说，通过为TextField添加focusNode，点击空白处时使TextField失去焦点，实现如下：
classDismissKeyboardDemoextendsStatelessWidget{
finalFocusNodefocusNode=FocusNode();
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
appBar:AppBar(),
body:GestureDetector(
onTap:(){
focusNode.unfocus();
},
child:Container(
color:Colors.transparent,
alignment:Alignment.center,
child:TextField(
focusNode:focusNode,
),
),
),
);
}
}
当App中有多个页面多个TextField时，此方式会增加大量重复的代码，因此全局添加点击空白处的监听：
classMyAppextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnMaterialApp(
title:'FlutterDemo',
builder:(context,child)=>Scaffold(
body:GestureDetector(
onTap:(){
FocusScopeNodecurrentFocus=FocusScope.of(context);
if(!currentFocus.hasPrimaryFocus&&
currentFocus.focusedChild!=null){
FocusManager.instance.primaryFocus.unfocus();
}
},
child:child,
),
),
home:DismissKeyboardDemo(),
);
}
}
也可以使用如下方式隐藏键盘：
SystemChannels.textInput.invokeMethod('TextInput.hide');
修改DismissKeyboardDemo页面：
classDismissKeyboardDemoextendsStatelessWidget{
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
appBar:AppBar(),
body:Center(
child:TextField(),
),
);
}
}
效果和上面是一样的，同样可以实现点击空白处隐藏键盘。
到此这篇关于Flutter全局点击空白处隐藏键盘实战的文章就介绍到这了,更多相关Flutter全局点击空白处隐藏键盘内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。