如何在 TextFormfeild flutter 2.0.1 中关闭键盘

问题描述

嘿，我如何在这里关闭键盘？我希望键盘在区域外轻按时关闭。

  Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.fromLTRB(15,15,0),child: TextFormField(
    keyboardType: TextInputType.number,maxLength: 10,controller: widget._phoneController,onTap: () => FocusScope.of(context).unfocus(),inputFormatters: [
      //input type
      FilteringTextInputFormatter.allow(
        RegExp(r'[0-9]'),),],//how the text Box is decorated
    decoration: buildInputdecoration(
        Icons.phone,'Enter your 10 digit phone number'),);
}

解决方法

您可以使用可以检测点击的小部件来包装跨越整个屏幕的父小部件。在 onClick 中，

FocusScope.of(context).unfocus()

FocusScope.of(context) 获取当前聚焦的节点，.unfocus() 将其取消聚焦。

这是有效的，因为当点击 TextFormField 时，它会消耗点击。因此不会触发父小部件的 onClick。所以不会发生失焦。

当我们在外面点击时，父小部件会消耗点击事件，因为它的子小部件都没有消耗它。因此，触发了父级的 onClick。

下面是一个例子。您可以看到 demo on DartPad。
（不过，最好在移动设备上运行它，以便您可以看到屏幕键盘。）

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hide keyboard in TextFormField when touched outside'),),body: GestureDetector(
        onTap: () {
          print('Clicked outside');
          FocusScope.of(context).unfocus();
        },child: Container(
          color: Colors.white,child: Form(
            child: Column(
              children: [
                TextFormField(
                  onTap: () => print('Clicked TextFormField'),],);
  }
}