Flutter 中点击输入框之外的区域，进行失焦，收起键盘

最新推荐文章于 2024-07-11 11:48:35 发布

Zh-jie

最新推荐文章于 2024-07-11 11:48:35 发布

阅读量363

点赞数 1

文章标签： flutter 前端 javascript

本文链接：https://blog.csdn.net/zzj17637822814/article/details/139716715

版权

首先引用 FocusNode()

FocusNode focusNode = FocusNode();

然后在输入框组件中调用即可

TextField(
                        controller: _textController,
                        textAlign: TextAlign.start,
                        focusNode: focusNode,
                        onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },
                        decoration: InputDecoration(
                          contentPadding:
                              const EdgeInsets.symmetric(horizontal: 0),
                          hintText: hitText,
                          hintStyle: const TextStyle(color: Colors.grey),
                         
                          focusedBorder: const UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                            borderRadius: BorderRadius.horizontal(),
                          ),
                        ),
                        cursorColor: Colors.white,
                        style: greyTextStyle,
                        onChanged: (value) {
                          setState(() {
                            titleValue = value;
                          });
                        },
                        autofocus: false,
                      ),

下方的代码就是起到点击输入框之外的区域，进行失焦，收起键盘的作用

onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },