如何在TextFormfield flutter 2.0.1中关闭键盘

ewm0tg9j  于 2023-03-04  发布在  Flutter
关注(0)|答案(2)|浏览(165)

嘿,我怎么在这里解除键盘?我希望键盘在区域外被点击时解除。

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'),
  ),
);
}
rwqw0loc

rwqw0loc1#

您可以将覆盖整个屏幕的父小部件 Package 为一个可以检测点击的小部件。

FocusScope.of(context).unfocus()

FocusScope.of(context)获取当前聚焦的节点,.unfocus()取消聚焦该节点。
这是因为当TextFormField被点击时,它会消耗点击,因此父小部件的onClick不会被触发,也就不会发生失焦。
当我们在外部单击时,父小部件会使用click事件,因为它的子小部件都不会使用它,因此父小部件的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'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
4uqofj5v

4uqofj5v2#

为我工作:)

TextField(
        onSubmitted: (value) async {
          FocusScope.of(context).unfocus();
        },
    })

相关问题