android软键盘点击空白自动隐藏,【Flutter实战】全局点击空白处隐藏键盘

老孟导读&＃xff1a;为什么要实现点击空白处隐藏键盘&＃xff1f;因为这是 iOS 平台的默认行为&＃xff0c;Android 平台由于其弹出的键盘右上角默认带有关闭键盘的按钮&＃xff0c;所以点击空白处不会隐藏键盘。

对于单个页面来说&＃xff0c;通过为 TextField 添加 focusNode&＃xff0c;点击空白处时使 TextField 失去焦点&＃xff0c;实现如下&＃xff1a;class DismissKeyboardDemo extends StatelessWidget {

final FocusNode focusNode &＃61; FocusNode();

&＃64;override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(),

body: GestureDetector(

onTap: () {

focusNode.unfocus();

},

child: Container(

color: Colors.transparent,

alignment: Alignment.center,

child: TextField(

focusNode: focusNode,

),

),

),

);

}

}

当 App 中有多个页面多个 TextField 时&＃xff0c;此方式会增加大量重复的代码&＃xff0c;因此全局添加点击空白处的监听&＃xff1a;class MyApp extends StatelessWidget {

&＃64;override

Widget build(BuildContext context) {

return MaterialApp(

title: &＃39;Flutter Demo&＃39;,

builder: (context, child) &＃61;> Scaffold(

body: GestureDetector(

onTap: () {

FocusScopeNode currentFocus &＃61; FocusScope.of(context);

if (!currentFocus.hasPrimaryFocus &&

currentFocus.focusedChild !&＃61; null) {

FocusManager.instance.primaryFocus.unfocus();

}

},

child: child,

),

),

home: DismissKeyboardDemo(),

);

}

}

也可以使用如下方式隐藏键盘&＃xff1a;SystemChannels.textInput.invokeMethod(&＃39;TextInput.hide&＃39;);

修改 DismissKeyboardDemo 页面&＃xff1a;class DismissKeyboardDemo extends StatelessWidget {

&＃64;override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(),

body: Center(

child: TextField(),

),

);

}

}

效果和上面是一样的&＃xff0c;同样可以实现点击空白处隐藏键盘。

交流

老孟Flutter博客地址(330个控件用法)&＃xff1a;http://laomengit.com

欢迎加入Flutter交流群(微信&＃xff1a;laomengit)、关注公众号【老孟Flutter】&＃xff1a;