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

首先引用 FocusNode()

FocusNode focusNode = FocusNode();

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

Dart 复制代码
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,
                      ),

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

Dart 复制代码
onTapOutside: (e) => {focusNode.unfocus()},
                        onEditingComplete: () {
                          FocusScope.of(context).requestFocus(focusNode);
                        },
相关推荐
编程零零七2 小时前
Python数据分析工具(三):pymssql的用法
开发语言·前端·数据库·python·oracle·数据分析·pymssql
北岛寒沫3 小时前
JavaScript(JS)学习笔记 1(简单介绍 注释和输入输出语句 变量 数据类型 运算符 流程控制 数组)
javascript·笔记·学习
everyStudy3 小时前
JavaScript如何判断输入的是空格
开发语言·javascript·ecmascript
(⊙o⊙)~哦4 小时前
JavaScript substring() 方法
前端
无心使然云中漫步5 小时前
GIS OGC之WMTS地图服务,通过Capabilities XML描述文档,获取matrixIds,origin,计算resolutions
前端·javascript
Bug缔造者5 小时前
Element-ui el-table 全局表格排序
前端·javascript·vue.js
xnian_5 小时前
解决ruoyi-vue-pro-master框架引入报错,启动报错问题
前端·javascript·vue.js
麒麟而非淇淋6 小时前
AJAX 入门 day1
前端·javascript·ajax
2401_858120536 小时前
深入理解MATLAB中的事件处理机制
前端·javascript·matlab
阿树梢6 小时前
【Vue】VueRouter路由
前端·javascript·vue.js