2

嘿，我如何在这里关闭键盘？我希望键盘在该区域外被点击时关闭。

  Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.fromLTRB(15, 0, 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'),
  ),
);
}
4

2 回答 2

3

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

FocusScope.of(context).unfocus()

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

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

当我们在外部点击时，父小部件会消耗点击事件，因为它的子小部件都不会消耗它。因此，父母的onClick被触发。

下面是一个例子。你可以在 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'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
于 2021-03-11T03:00:34.883 回答
-1

为我工作:)

  TextField(
        onSubmitted: (value) async {
          FocusScope.of(context).unfocus();
        },
    })
于 2021-12-16T17:13:48.020 回答