flutter 点击空白地方键盘隐藏

322 阅读1分钟

在flutter开发项目过程中,遇到输入框输入完成后点击空白出键盘没发隐藏,一下将用两种方式去实现;

1.局部方式

在每个TextField的页面最外层包裹GestureDetector,手动控制Focus。

GestureDetector(behavior: HitTestBehavior.translucent,onTap: (){FocusScope.of(context).requestFocus(FocusNode());});

2.全局方式

由于上面那种方式要在所需的页面上去添加,工作量太大,所以下面介绍一种全局的方式。我们可以在main这个入口用MaterialApp的builder方法加载一个全局的GestureDetector。

void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      title: 'Flutter',      builder: (context, child) => Scaffold(        body: GestureDetector(          onTap: () {            hideKeyboard(context);          },          child: child,        ),      ),      home: MyHomePage(title: 'Flutter Demo Home Page'),    );  }  void hideKeyboard(BuildContext context) {    FocusScopeNode currentFocus = FocusScope.of(context);    if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {      FocusManager.instance.primaryFocus.unfocus();    }  }}